× Joomla Facebook Connect support forum

Topic-icon ADD CUSTOM JFBC TAGS TO ANY COMPONENT DYNAMICALLY

Active Subscriptions:

None
Recently, I began exploring how to wholly integrate my website into facebook so that any media that get's played, downloaded gets aggregated in a FB 'game' type display on my users timeline, news feed and ticker etc! It was then that I discovered this wonderful component, JFBConnect|!

SCENARIO
You want to add Opengraph tags to a component dynamically to allow your component to socialise user interaction with it's content via your facebook app as opposed to having to add them in every item, page, view etc!

WHY?
Well, apart from the time it will save by it being automatic, it also gives you the ability to customise the title's, description, image and any FB meta tags that better suit the context of your application, custom opengraph actions and objects. For example, the title of an item in Joomla might be great for those on your site however, you may want to add a bit more info from the database to further describe it on facebook.

MY CASE
I use music collection for managing all of my audio/video for clients, projects and so on - well, artists, albums & tracks! I needed to be able to add dynamic tags to everything in the component (songs, videos, albums and artists) in order to better use some custom actions that I've been developing within my facebook application.

For example, on an artist/client page, you could simply 'like', 'recommend' or 'invite' whereas on an album or song page you could also 'listen'/'download' etc! Furthermore, this gives me the flexibility to add more detail to meta tags that aren't required in the site but further explain the content to friends of users who aren't currently using the app/site.

I'm still developing my app ATM but wanted to share this little script I've written that allows you to create dynamic and custom JFBC Tags for ANY COMPONENT!

There's ONLY 1 REQUIREMENT - The ability to add PHP/custom code in a module position - maybe sourcerer or similar. If you want to live dangerously, you could use a more invasive approach and integrate (HACK) it directly into your chosen component however, THIS IS NOT RECOMMENDED!!!

THE CODE
Using the construct of the code below, simply replace the 'dummy' database fields/tables, component option and views according to your needs and place in a module. Publish that module in the pages that you require custom open graph tags and away you go! The code is well commented and as you can see, with a little imagination, you could actually use the php switch function to further expand your module to work in multiple components.

I'm sure that bits could be more elegant and would welcome any questions, comments or improvements on it!
// INIT DEFAULT/EMPTY VARS
// You can add any other url parameters you require here
$myComponentID = 0; //This is the unique ID from whichever component you're using
$myComponentView = ""; // This is the view that you want to target within your component, e.g. "list", "article", "file" etc...

// AS A SAFETY MEASURE, CHECK THAT YOUR 'IN' YOUR CHOSEN COMPONENT
if(isset($_GET['option']) && $_GET['option'] == "com_mycomponent"){ // Replace with the string for your chosen component
	// grab the url params
	$myComponentID = $_GET['id']; // set id to query image filename & any other data
	$myComponentView = $_GET['view']; // check view/database table to look up
	
	if (!is_numeric($myComponentID) || $myComponentID == 0 || $myComponentID == ""){ // the view or artist id are missing - DON'T OUTPUT TAGS!
			$htmlToRender =""; 
	}else{ //get image filename from the db
		// Joomla DB Object - needed to make calls to the DB
		$db =& JFactory::getDBO();

		// Check which view we're in if not empty view
		switch ($myComponentView) {
				// DEFAULT VARS
    			case "client":
		       				//query
		       				$db->setQuery("
			       				SELECT 
			       					t1.name AS Name, t1.dept AS Dept, t1.pic AS Pic
			       				FROM jos_my_component_table t1 /* ref to table t1 */
			       				WHERE t1.id = $myComponentID
			       				LIMIT 1
			       			");
			       			// DEBUG THE VARS
							print_r($_ogData); // COMMENT THIS OUT TO REMOVE
							
			       			$_ogData = $db->loadAssoc(); // An associative array of results
			       			// Now get all of the individual elements from the array
			       			$_ogTitle = $_ogData[Name] . " - " . $_ogData[Dept]; // Here I'm concatenating a fiew fields to create a more descriptive title
			       			// Check that there is an image in the db
			       			if(is_null($_ogData[Pic]) || $_ogData[Pic] == ""){ // if it's empty or null set a default
			       				$_ogImage = "http://www.mydomain.com/images/stories/default-component-image.png";
			       			}else{	// Concat the url to the artist pic directory and add the aPic
			       				$_ogImage = "https://www.learnthrusong.co.uk/images/stories/" .  $_ogData[Pic];
			       			}
			       			// ADD ANY OTHER FIELDS/EVAL HERE AS YOU LIKE
		        			break;
   				 case "others":
       				 // add your other cases as with "client", changing DB tables/fields to suit
       				 // This allows you to totally customise your output per view
       				 break;       			
       			default:  // IN MY CASE - DO NOTHING!!! //
        			// This is your safety net!!! Anything not covered in the cases defined above will run DEFAULT
        			// Therefore, you could specify some default values OR LEAVE BLANK
       				 break;
			} //END SWITCH
		
		// Output HTML - {JFBC Tags} // AGAIN, ADD WHICHEVER ONES YOU WANT WITH YOUR NEW CUSTOM VARS
		$currenturl = JURI::current(); // The current page URL
		$htmlToRender ="
		Yes it worked!
			{JFBCGraph title=$_ogTitle}
			{JFBCGraph url=$currenturl}
			{JFBCGraph type=your_app_name:your_fb_object_name} 
			{JFBCGraph image=$_ogImage}
		";
		}
		echo "$htmlToRender";
	}
}else{ // the option (component) you specified in the first IF wasn't detected in the URL
	$htmlToRender ="Didn't get the option out of the URL";
	echo "$htmlToRender";
}
HOPE IT'S HELPFUL!!!
The topic has been locked.
Support Specialist
12 years 1 month ago #19707 by alzander
learnthrusong,
Excellent information. Yes, the ability to do dynamic tags is part of the reason we have the {JFBCGraph type=xxx} ability at all. While most people will use static tags on a per page basis (they know the article they just wrote), being able to do it with content from the database is definitely helpful. This is a question we get a lot, especially for shopping cart type pages, where it's dynamic content like you mention. With all the new Open Graph functionality, you can be assured that we're looking into how to simplify the process of dynamic tags. I don't know what release it would be in, but it should be this year (as OG really takes off) that we have some better way to let you select database info for your tags.. or still set it as static.

Some easy changes to make your code more Joomla friendly would be:
$myComponentID = JRequest::getInt('id', null); // set id to query image filename & any other data - Use JRequest to filter by int
    $myComponentView = JRequest::getCmd('view', 'default')// check view/database table to look up  - Use JRequest to filter the variable (not necessary in your case, but always good anyways) and set a default value of 'default'.
    
    if (!$myComponentID){ // the view or artist id are missing - DON'T OUTPUT TAGS! - JRequest already filtered, or set this to null. Just check the value
            $htmlToRender ="";
Hope that makes sense and gives a little more insight into some good functionality of Joomla.

Thanks again,
Alex
The topic has been locked.
Active Subscriptions:

None
Hi Alex,

This component rocks!!!

I'm also in the middle of trying to add custom properties to my opengraph objects. As it wasn't directly related but is an extension of this script, please see forum post on triggering an opengraph action here .

As soon as I have it sussed-out I'll make sure that I link back here too.

I will also, once it's all up and running, create a video tutorial or 2 to compliment this stuff so any more feedback/ideas, please let me know so I can make it as good as it can be!

Best wishes,

Gez
The topic has been locked.
Support Specialist
12 years 1 month ago #19845 by alzander
Gez,
Glad to hear you're enjoying it. There are tons of things that Facebook allows that we don't fully support (yet) like pushing Open Graph actions. You're definitely pushing on the bleeding edge, and we'd love any feedback or tutorials you may have on that stuff. We usually don't add features until it really gets settled in on Facebook and we can comfortably add it in a way that isn't too complicated by our users. That means new features may take a few months to be added, but it's the best process. We always try to make it easy for go-getters, like yourself, to at least have a head-start on it by making things simpler where we can.

Thanks, and good luck,
Alex
The topic has been locked.