Add Facebook Recommendation Bar Widget in Blogger

Hello Bloggers. The most awaited Widget has been arrived. Yes, Facebook releases its recommendation Bar widget for Blogger or WordPress blog. Few days earlier, Facebook already launched its officially sharing widget, Now, it time for recommendation widget. This widget is basically used your post keywords and then find out smiler post related to the current post and show up. By the help of this widget, you can reduce your blog bouncing rate and increase page view which are both increase your blog reputation as well as your pocket money. This recommendation widget is currently in beta mode and may have any bugs. You can get this widget in a simple step from Facebook Recommendation Bar Generator and Generate it within 2 min.

How to Add Facebook Recommendation bar in Blogger.

This is 2 step procedure to implement this widget in Blogger blogs. In first Step, You have to create a Facebook App and in the second implement the code in your blogger blog. So Lets start with step 1.

Step 1: Create a Facebook Apps

First go Facebook Developer App
Click on Create a App on Top Right of the page.
Enter a Valid Name in Application Name, like this.

4. After it, hit Continue Button and Enter Captcha in Next Step.
5. Now, you will get a App ID and App Secret Code. Write Down the App ID in Note Pad.

6. Below that, there is option Website With Facebook Login, Write you blog URL on that and click on save .

Keep Relax, your first step has been completed successfully and you have created a Facebook App. Now, Go to second Step.

Step 2: Implement Widget Code in your Blog.

Go to Blogger -> Dashboard -> Edit HTML
Find the following tag

<html

replace it with

<html xmlns:fb='http://ogp.me/ns/fb#'

This is useful because it makes this plugin comparable with in all browsers.

3. Now, Find <body> tag.
paste the following code just below the <body> tag.

    <div id='fb-root'/>
    <script>
    //Facebook Recommendation Widget by www.probloggingtools.com
    //<![CDATA[

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=*************";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    //]]>
    </script>
    <b:if cond='data:blog.pageType == "item"'>
   <b:if cond='data:blog.pageType != "static_page"'>
   <div class='pbt-recommdation' style='z-index:9999; position:absolute;'>
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right'    site='http://www.probloggingtools.com' trigger='30%'/>
     </div>
    </b:if>
    </b:if>

Change App ID with yours.
Replace www.probloggingtools.com to your blog links.

Further Customization

There is many options available to customize it further.

Side : Change the Position of Widget (Left or Right).
num_recommendations: No. of Posts showing on the Widget.
Read Time: It is the time to fetch the related post on the Widget Area.
Trigger: It is the position at which Widget will trigger out to display posts.

For more details about it, visit Facebook Recommendation Bar