Learning how to deal with Facebook Open Graph integration

Yesterday I flew back to my country Colombia, and during the whole and very long flight I was thinking about the integration with the social networks Facebook and Google+

i've been reading and testing but with so many "mixed code" I have in Partidito.com it has been really difficult to make it.

I'm happy now because during the flight and today with my jetlag I figured out the way! At least the way it works for me :)

first thing to do is understand the Facebook way to manage the integration. What I understood is that you can create Objects, like football teams or football matches, create Actions like Created, Challenged and Scored, and you can put them together to create Stories.

this understood, now the big question in my mind was, how can I tell Facebook which ones are my objects (teams, matches, ranking, footballers, etc) using joomla and all my crazy custom code?

i tried a lot of different things, everything I found, but just one method is working for me.

I found Jumi, a great complement for Joomla that you can use to create modules, plugins or even what I call Content Types (I don't know the real technical nameEmbarassed) that replace the structure of article with your custom code, without using the old and yet good technique of inserting modules in articles.

i liked specially Jumi because it helps me to follow some of the basics of Data Structures and coding good practices making you solve big problems breaking them into little problems easier to solve. It has like a data base of your custom code so you can find everything easily and re use the code!

at the end i moved all the custom code of the world ranking to jumi, and there within the code I added the magic lines to control the facebook meta information. Easy, clean and improved. Jumi turned out to be so good that I will migrate all my custom code (tons of lines of code!) into it to be able to update my joomla! and my community builder (totally recommended to create you own social networks) without having fear of loose my custom code.

so now to the way it worked for me:

1. Read the Facebook Apps Documentation. it is short, friendly and precise documentation to understand the whole thing.

2. Read the jumi Documentation.

3. Install jumi.

4. Use this piece of code in a Jumi content (that is how I call the direct link to custom code from the menu, not using a module, neither and embeded module in an article). Using module or embebed module into article doesn't work For this FB integration. I think it might be the due to the way the facebook scraper works or something.

<?
defined('_JEXEC') OR defined('_VALID_MOS') OR die( "Direct Access Is Not Allowed" );

//To retrieve your url:
$URLcode = "http://".$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

//the string to create the facebook meta:

$tag = "<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# yourappname: http://ogp.me/ns/fb/yourappname#'>
<meta property='fb:app_id' content='Your facebook app id' />
<meta property='og:type' content='yourapp:your_object' />
<meta property='og:url' content=".$URLcode." />
<meta property='og:description' content='your description'/>
<meta property='og:title' content='Your title' />
<meta property='og:image' content='The image link' />";

//insert the code into the head of the current Joomla Content
$doc = JFactory::getDocument();
$doc->addCustomTag($tag);

?>

This way Facebook will understand your object exactly as you want. at least is the way it worked for me. Cool

i hope this helps you out there to give a better user experience leveraging with the power of facebook!

By the way, i noticed Google+ somehow can understand the facebook meta tags at head. Not sure if understands 100%, but it improved the quality of my content shared via Google+ Too!

i will try to dig deep in the facebook and google+ integration possibilities while improving my code and i will be publishing the progress and the very specific tricky issues to solve, like this facebook meta thing.

cheers,

AS