Hi All,

I've been using the JFBConnect component by www.sourcecoast.com to integrate my site's music collection into my facebook application. In short, this gives your music collection/site a bigger audience by allowing your users to share their activity & your content via facebook by integrating it into the Facebook OpenGraph.

Furthermore, this allows you maximum control over the way your music collection items look when they are shared via facebook by allowing you to specify the picture, url, title and description.

NOTE, It is not strictly necessary to have your own facebook application setup to take advantage of social interactions such as posting to a user's facebook timeline however, doing so will give you deeper/richer social integration & functionality. You can achieve this by adding other tags/properties that bind your pages/music collection items to custom or existing facebook objects - for example, you could specify an album type such podcast, tutorial or album according to music collection's types, format or any other field.

What you will need
Providing that you already have the following 3 pieces of software running (no 1-3), follow this tutorial to have music collection automatically render facebook's opengraph meta tags inside of your music collection pages.

*There are also a number of prerequisites to having your site run as an app in facebook (should you wish to take this approach that are outside of the scope of this tutorial however, I would like to point out that ALL facebook apps do require you to have an SSL certificate.

1 - Joomla 1.5.x - should also work on newer with some amendments
2 - Joomla Music Collection
3 - JFBC by sourcecoast.com
4 - *A facebook application (Not required)

OK, lets begin...

Step-By-Step
First of all, we need to explicitly set open graph tags for the title, url, image & description. To do so;
1 - Open the default.php file(s) inside of your com_muscol/views/[your_chosen_view_to_render_opengraph_tags]/

In this example I will edit the album view.

2a - Near the beginning of the file, after all of the standard Joomla setup and before any html is rendered, add the following code:

album->name . " - " . $this->album->year;

2d - To set the OpenGraph Image to the album artwork, add the following code directly after 2c;

// if the artwork is empty or null set a default (full path to image)	       			

if(is_null($this->album->image) || $this->album->image == ""){ 

        // replace the url string with the path to your chosen DEFAULT image

	$_ogImage = "http://www.yoursite.com/images/stories/og-image.png";

}else{	

        // Concat the url to the album pic directory and add the artwork's filename

	$_ogImage = "http://www.[yoursite.com]/images/albums/" .  $this->album->image;

}

//echo "$_ogImage";

2e - To add a description based on the album review, add the following code directly after 2d;

// strip tags from the review to avoid breaking any html

$_ogDesc = strip_tags($this->areview->text);

//echo $_ogDesc;



// remove new line commands

$_ogDesc = str_replace(array("\\r", "\\r\\n", "\\n"), '', $_ogDesc);



// Shorten the review - change 200 to the number of 

// characters you want to display from your album review

if (strlen($_ogDesc) > 200) {

	// truncate string

	$_ogDesc = substr($_ogDesc, 0, 200);

	

	// make sure it ends in a word so assassinate doesn't become ass...

	$_ogDesc = substr($_ogDesc, 0, strrpos($_ogDesc, ', ')); 



        // Append ... after the text to show that the review's been shortened

	$_ogDesc = $_ogDesc."...";

}					

2f - To output the JFBC Tags for JFBC to render the OpenGraph Meta Tags, add the following code directly after 2e;

// OUTPUT FB TAGS

$GraphOutput = "

	{JFBCGraph title=$_ogTitle} 

	{JFBCGraph url=$_ogURL} 

	{JFBCGraph image=$_ogImage} 

	{JFBCGraph description=$_ogDesc} 

"; 

echo $GraphOutput;

//==== END OPENGRAPH ====//
?>

More about customisations required in respect of your own facebook app coming soon...

I hope this helps!

Gez