• Add Official Facebook Recommendations Bar in Blogger | BST


    Facebook has officially launched the recommendations bar for bloggers & site owners. The Facebook recommendations bar only works with the open graph of type "article". Therefore, if you want to add it to your Blogger, then you have to add some open graph Meta data to your Blogger codes. Recommendations bar may easily increase your daily pageviews that you may place to the lower right (or left) on the screen. Below is a screen shot of this bar with a like button.

    how to add facebook recommendation bar in blogger
    Facebook Recommendation Bar Collapsed & Expanded Views

    Facebook recommendations bar allows your visitors to like your current post and display the recommended posts along with page title and a thumbnail. Facebook recommendations bar is only displayed the articles that are previously liked or shared on Facebook. When the visitors load your pages the recommendations bar will collapsed, and the visitors will have the option to like your current post. When your visitors are finished reading articles or spent some time, the recommendations bar will expanded that display the related articles of your blog. Therefore here is how to add Facebook recommendations bar on Blogger.

    To Add Facebook Recommendations Bar in Blogger Blog

    1. Go to this post and create a Facebook app and install open graph Meta tags on your Blogger blog.
    2. Once you have done the steps mentioned in the step 1, you have integrated your Blogger blog with the Facebook open graph protocol Meta tags and created a Facebook application for your blog. Now, you have to install JavaScript SDK to your Blogger blog as sign in to Your Blogger Dashboard --> Template(Under more options) --> Edit HTML(and Proceed) ( Expand Widget Templates ) find the code (using ctrl+F) <body, just below this code paste the following code. [Firstly, search the below code to your template. If exist, then you don't need to add it again.]
      <div id='fb-root'/>
      <script>(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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=**************&quot;;
        fjs.parentNode.insertBefore(js, fjs);
      }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
      Don't forget to change ************** with your Facebook app ID that you have created in step 1.
    3. Once you have installed JavaScript SDK code to your Blogger blog, paste the following code just below the JavaScript SDK code,
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

      <div style='z-index:999999; position:absolute;'>
      <fb:recommendations-bar action='like' max_age='0' num_recommendations='2' read_time='10' side='right' site='http://www.bloggertipsseotricks.com' trigger='40%'/></div>
      The above Facebook recommendations bar code will display the bar on your post pages only. If you wish to show it everywhere on your Blogger, then remove the <b:if> condition lines that are in blue on the above code. Replace http://www.bloggertipsseotricks.com with your homepage URL. You can customize your code with the following way as your need.
      • action: By default, collapsed and expanded view of Facebook recommendations bar will show the "Like" text to like the article. You can change its value to recommend showing the "Recommend" text instead of "Like".
      • max_age: It will decide the age limit of your articles. Sometime, you would not want to show too older posts in the Facebook recommendations bar so you may set it to 1 - 180 days old posts. If you do not wish to limit on your posts then do not change the default value 0.
      • num_recommendations: It will allow you to display the no. of posts in the recommendations bar. Therefore, if you want to show three article on recommendations bar, set it to 3.
      • read_time: The number of seconds before the plugin will expand. Minimum is 10 seconds. You may increase it as your need.
      • side: I am displaying the recommendations bar on the right. If you wish to display it to the left then set it to left.
      • trigger: This is a place where your recommendations bar plugin will expand. I have set it to 40% so when a user scroll downs 40% of your pages the plugin will expand. You may increase or decrease this value.
    4. Look at the following screenshot, the installation of all the codes.

      add facebook recommendations bar on blogger

      Finally, click on Save template.
    In our point of view, the Facebook recommendations bar is extremely important for every blog, and uses on popular blogs like Mashable. I hope the installation of this widget is not very hard, but if you have any problem then let ue know via comments. Don't forget to like this article via our Facebook recommendations bar widget. :)

    Share the Love!

    Did You Like This Post? Get the Latest Blogger & SEO Technology Directly From Your Inbox Just Enter Your Email and Verify it!


Leave a Reply