my github
english | espaƱol
Waldo Urribarri HOME PROJECTS ABOUT ME


Use Facebook Open Graph and Insights On Your Website: Part II

Now that you have tested the Open Graph metatags, we are going to use Facebook's Javascript SDK to get the Like and Comments Box working on your page. Keep in mind that this will cover only the basics. If you want to know much more about the topic, click here.

The first thing you need it's a channel.php on your website. Facebook kindly helps us giving us the code to use inside:

<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>

So, what the hell is a channel.php? Well, according to Facebook having it "greatly improves the performance of the JS SDK by addressing issues with cross-domain communication in certain browsers"... What does that mean? I don't need to know. I just made my channel.php and put it on my root folder. If you want to change the language of the SDK, you can do it where it says "...connect.facebook.net/en_US/...".

Now, go to and edit your test website and paste this code just after you open the BODY tag.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.php', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>

Now, put your channel.php location on the channelURL property, and an application Id. What application id you say? Well, the one we are about to create. Go to http://developers.facebook.com/ and register as a developer. Then click on "Apps" at the top of the page. That will take you to the list of apps you've created. Now click "Create new application". Enter your apps name and namespace. I put waldo.com and waldourr. When you create your app, select it's App ID/API Key and put it in the appId property. That's it.

There you go. Now if you want to put a Like button, create it using this code:

<fb:like ref="POSTREFERENCE" href="THEURLTOLIKE" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>

Of course if you want to know all of the parameters and change anything, you can create the code with the help of this page: LINK.

To see the graphs of your page enter http://www.facebook.com/insights/ and enter your webpage domain to register it to your Facebook Insights page.

After you put the code on your test webpage, click the Like button, and your Facebook Insights page will reflect this Like. Cool huh? Well, it will be mostly usefull when you have a lot of traffic.

As for the comments box, now it will be simply a matter of putting this code on the page you will comment about:

<div class="fb-comments" data-href="THEURLYOUWANTTOCOMMENT" data-width="600" data-num-posts="5"></div>

Again, if you want to change it's properties, use this page: LINK.

I know this is really really basic, so if you want any added functionality or to use any other social plugins, the best way to go is to read the documentation of the Facebook's Developers Page.


www.000webhost.com