Facebook implementation – XFBML and META tags

Featured Image

Hi everyone! In this article, I’ll be explaining some of new and “modern” tags and their attributes that emerged together with Facebook API.

XFBML

I’ll give you an example with Facebook’s “Like button”. You can accomplish that with only these couple lines of code:

<fb:like   href="<?php echo $mysite->getCurrentUrl();  ?>"  layout="standard" show_faces="true" action="like"  />
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBM
});
</script>

The key factor here is “<fb:like />” which is parsed by Facebook’s API. Inside that tag, Facebook’s JavaScript will create a bunch of code that will enable simple integration of your site with Facebook Connect. Of course, there are other tags like:

<fb:login -button></fb:login>
//SIMPLE LOGIN BUTTON
<fb:activity ref="homepage"></fb:activity>
//VISITOR GETS HIS ACCOUNT ACTIVITY FEED
<fb:recommendations ref="homepage"></fb:recommendations>
//VISITOR GETS PERSONALIZED SUGGESTIONS FOR PAGES
<fb:facepile></fb:facepile>
VISITOR GETS PROFILE PICTURES OF HIS/HER FRIENDS WHO SIGNED UP FOR YOUR SITE
<fb:activity recommendations="true"></fb:activity>
//SIMMILAR TO <fb:recommendations></fb:recommendations>
</fb:like><fb:like -box href="http://www.facebook.com/platform"></fb:like>
//SAME AS LIKE BUTTON, BUT USER CAN SEE HIS/HER TIMELINE AS WELL
<fb:live -stream event_app_id="255955255198" via_url="" always_post_to_friends="true"></fb:live>
//USERS CAN SHARE ACTIVITY AND COMMENT IN REAL TIME DURING LIVE EVENTS
<fb:comments width="425"></fb:comments>
//ALLOWS USERS TO COMMENT ANY PART OF YOUR SITE

META TAGS

Facebook also uses Open Graph tags – those are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else. You can read more about them here. And if you wish to use them, these are the six basic ones, that you MUST use:

og:title - The title of the entity.
 
og:type - The type of entity. You must select a type from the list of Open Graph Types (http://developers.facebook.com/docs/opengraph#types)
 
og:image - The URL to an image that represents the  entity. Images must be at least 50 pixels by 50 pixels. Square images  work best, but you are allowed to use images up to three times as wide  as they are tall.
 
og:url - The canonical, permanent URL of the page  representing the entity. When you use Open Graph tags, the Like button  posts a link to the og:url instead of the URL in the Like button code.
 
og:site_name - A human-readable name for your site, e.g., "IMDb".
 
fb:admins or fb:app_id - A comma-separated  list of either the Facebook IDs of page administrators or a Facebook  Platform application ID. At a minimum, include only your own Facebook  ID.

And a sample of usage:

<meta property="og:tag name" content="tag value"/>

To conclude, it has its advantages like simplicity, but it also has its disadvantages – if Facebook “is down”, your site will slow down too. Anyway, usage is up to you!

I hope you learned something!


4 comments

  1. I am beginner in PHP and i was trying to integrate facebook social plug-ins with my website.I have gone through the Runkeeper website(http:runkeeper.com) for the facebook share plugin, i don’t know how the friends of me in facebook(he is also the member of runkeeper.com) activity displays in my runkeeper page “http://runkeeper.com/user/Testingwebdeveloper/streetTeam page”. i don’t even shared anything from runkeeper website in the facebook share. But whenever someone do some activities in the runkeeper website and if he is friend of me in facebook , then his activities will be displayed in my webpage of runkeeper. This is how the Tracking of Activity goes on with the help of some Facebook API, i have seen this website is built using Android , so is there anyway and some one please give me some ideas to do this same kind of feature in my website using PHP and facebook API’s.

  2. @Akif – it breaks validation because its not in W3 standards (yet?!)… But on the other hand it can create some JS errors/warnings on IE, so notice that because you wouldn’t want a warning pop up on checkout page of webshop, right? 😀

    @Mirna – I’m always glad to help someone… 😉

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.