Thursday, June 28, 2012

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

  1. First go Facebook Developer App
  2. Click on Create a App on Top Right of the page.
  3. 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.

  1. Go to Blogger -> Dashboard -> Edit HTML
  2. 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 == &quot;item&quot;'>
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <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

Need Help??


If you are facing any problem, feel free to contact us. We will try to solve your issues asap.

2 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...