For those who have followed Facebook F8 developer conference, you should know that Facebook CEO Mark Zuckerberg had made official the launch of Open Graph protocol and the social plugins. Being the successors of the Facebook Connect, these two things are going to change the whole ball game and bring the web “socialness” to a whole new level.
For those who are still unaware, the new Open Graph protocol and the social plugins are set of tools newly launched by Facebook that allow you to integrate Facebook deeply into your site and make your site more “sociable”. Things such as the “Like” button can now be easily added to your page and enable your users to share your content in their Facebook account.
How do I add a “Like” button to my site? (The easy way)
To add a “Like” button, simply paste the following iframe code to any part of the page (or the location where you want it to appear).
<iframe src=”http://www.facebook.com/plugins/like.php?layout=standard&show_faces=true&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:px”></iframe>
To change the setting of the “Like” button, go to this Facebook Like button page, customize the setting, grab the iframe code and paste it to your site.
Alternatively, install the Like plugin which can automate most of the basic stuffs for you.
Is that all? What if I want more?
You asked for it. So here you are, the method to integrate Facebook deeply into your site (and turn your site into a social graph).
There are basically two ways to implement Facebook social plugins in your site:
- iFrame
- XFBML
I would recommend using XFBML as it allows you to access to the whole wide range of plugins. The following method will be done using the XFBML protocol.
1. Register a Facebook app
Don’t worry, we don’t need you to learn programming and whip up an ad. All you need to do here is to register for a Facebook app (In short, just fill up a form and submit it).
Go to Facebook Application Creation page and create an app (you’ll need to login to your Facebook account).
Once the application is created successfully, you will see your application dashboard. Record down the Application ID (you will be using it later).
2. Adding custom <html> tag
Now, go to your Theme folder and open the header.php file. Change the <html> tag to the following:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>
3. Adding custom meta tags to your <head> tag
Still in your header.php, add the following line in between the <head> </head> tag.
<meta property="fb:admins" content="USER_ID"/> <meta property="og:title" content="<?php wp_title(' ',true,'right'); ?>"/> <meta property="og:site_name" content="YOUR SITE NAME"/> <meta property="og:type" content="blog" /> <meta property="og:image" content="URL TO YOUR THUMBNAIL IMAGE"/> <meta property="og:description" content="<?php bloginfo('description'); ?>"/>
Note:
- Remember to change all the CAPS field to your site setting in the meta tags.
- To find out what is your Facebook USER_ID, go to http://graph.facebook.com/your-username. You will see your FB user ID.
- Check out this page for full explanation of the meta tags and other meta tags that you can include
4. Adding of javascript sdk
To make use of the XFBML, we need to add the javascript SDK to your <body> tag.
Add the following lines right after the <body> tag.
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>
Now, you will need to replace “YOUR APP ID” with the application ID that you have created just now.
5. Choose the social plugins that you want to use
Go to the Facebook social plugins site, you will see a series of tools that you can implement in your site.
Like button: Show a “Like” button on your site. The most commonly used plugin.
Recommendations: Show users personalized suggestions for pages on your site they might like.
Login with Faces: Allow the users to sign up to your site with their Facebook account. it also shows a list of the user’s friends who have also signed up for your site.
Comments: Allow users to comment on your site. The comments will also be posted back to the users Facebook wall.
Activity Feed: shows users what their friends are doing on your site through likes and comments.
Like Box: This is previously known as the Fan box.
Facepile: Shows profile pictures of the user’s friends who have already signed up for your site.
Live Stream: Lets your users share activity and comments in real-time as they interact during a live event.
6. Configure the social plugins
Choose the social plugin that you want to use on your site. In this example, I will use the “Like” button since it is the most commonly used among all.
Click on the Like Button link
Configure your “Like” button settings. Leave the URL field blank. Click on the “Get Code” button at the end to grab the source code.
Highlight and copy the XFBML code
Paste it to the places (either in the widgets area or the single.php file) where you want the “Like” button to appear.
Do the same for any other social plugins that you use.
That’s it!
Implementing of social plugins in MakeTechEasier
“Like” button for every post entry
Like box in the sidebar
Recommend box in the post footer
References
Here are some useful links for your reference:
- Facebook OpenGraph protocol
- Facebook Javascript SDK
- Facebook Social Plugins
- Facebook Application Dashboard
If you find this post useful, don’t forget to “Like” it and share it with your friends. Do let us know in the comments how have you make use of the social plugins in your site.
Glad you liked it. Would you like to share?
Showing 33 comments
Add New Comment
Reactions