Add Facebook Social Plugin Like Box to WordPress Blog

Facebook is a leading social media that bloggers like, to promoteĀ  their blog posts. Adding the Facebook like box for your Facebook fan page in your WordPress blog makes you readers comfortable to share your content with his friends directly from the blog. Facebook has released numbers of social plugin and Open Graph protocol. Obviously, these things will take a leading part to make your site more sociable.

Related: Setup Facebook video call.

Well, there are two ways to integrate the Facebook social plugins into your site or blog.

  1. iFrame
  2. XFBML

How to add Facebook Like Box using XFBML Protocol

Firstly, the easier one which allows you to directly place the code grabbed from your Facebook account to your blog template. But the second method demands some advanced knowledge. I would like to prefer XFBML as you can use all the plugins by using this protocol. Here we shall guide you to integrate Facebook social plugins into your site using XFBML protocol.

1. Register a Facebook application

There is nothing to worry as this will not ask you to learn a programming language. Just register the application by filling up a form.

Log-in to your Facebook account and go to the Facebook Application Creation page. Here, create your application providing the site name, site url and the locale.

Once your application is created successfully, you will be in your application dashboard. Keep a record of the application details e.g Application ID for future use.

2. Changing <html> tag

Now go to your theme folder and download the header.php file. Here replace the tag with the following code.

xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" >

3. Further adding some code in hearder.php

Don’t leave out from your header.php file. Add the following code between <head> and </head> tags.

<meta property="fb:admins" content="Your User_ID"/> <meta property="og:title" content="<?php wp_title(' ',true,'right'); ?>"/> <meta property="og:site_name" content="Name of your site"/> <meta property="og:type" content="blog" />

<meta property=”og:image” content=”The url of your thumbnail“/>
bloginfo(‘description’); ?>”/>

Note: Don’t forget to replace the highlighted (red) and italic part with the right entry.

How can I get my Facebook User_Id?

Well, go to http://graph.facebook.com/your-facebook-username. You will find your user_id there.

4. Add javascript sdk to body tag

Add the following javascript sdk just after the tag replacing the Application ID (highlighted).

<div id="fb-root"></div> <script type="text/javascript">// <![CDATA[ // < ![CDATA[ // < ![CDATA[ window.fbAsyncInit = function() { FB.init({<span pre="">appId: '<span style="color: rgb(153, 51, 0);" data-mce-style="color: #993300;"><em>YOUR APPLICATION ID</em></span>', 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>

You have just set up the interface to install social plugins using the XFBML protocol. upload header.php to its original place.

Now you have to chose the plugin that you want to use in your site. For this purpose go to Facebook social plugins page and find out your social plugin. You can choose any one from the list. Here we’ll guide you to install Like Box plugin for your Facebook fan page.

Click on Like Box from the plugin list. Now, put the Facebook page url and the desired width of the widget. Select other options if you like.

Now click on “Get code”. You will get two types of code one is using iframe another is for XFBML protocol.

Copy the XFBML code and place it in your theme template where you want to show. Which method do you use- iFrame or XFBML protocol?

Comments

  1. Shabnam Sultan :

    I have used iFrame.Nice tutorial.

  2. SHIV :

    NICE TUTORIAL… WONDERFUL…

  3. renu :

    can any one tell me how to put like box for fan page any plugin available in WP???

  4. Tanmay :

  5. lynny :

    hi , i’ve got as far as getting the code, but not sure how to embed on my website? what do you mean by place it in your theme template
    thanks

  6. Tanmay :

    If you are using WordPress then you can embed the like box at sidebar or footer or anywhere else. In this time say, you want to embed that code at your sidebar. Then login to your WP dashboard, click on EDITOR under APPEARANCE from the left side. It will open the editor. Now from the right side, select sidebar.php to edit. Now you can add that code in some preferred position. After adding that code, save the changes by clicking the save button. You are done! Feel free to ask me anything else.

  7. niairen@earn money online :

    *Phew! FINALLY! I’ve been going around in circles for DAYS! Thank you very much for this very informative post! I finally got my FB like box on my blog!

  8. vivek :

    i add ifram code but it doesnt work pls help me…

  9. Tanmay :

    @Vivek: Where did you add the Iframe code? can please tell me in details. The iFrame code should work in your WordPress blog. If you placed the code in between some place holder e.g

    ….

    then try to define the attributes for CSS in your style sheet.

  10. jusnit :

    Normally when using iframe social plugin for like box ,the loading of page is much slower. Is any way to rectify this ?

  11. Andrew Dearfield :

    Does WordPress disallow Facebook login to your own site if you don’t have a credit card on file? Interesting bug.

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=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>