Add Official Facebook Recommendations Bar Plugin to Blogger

Facebook Recommendations Bar Plugin displays posts which are recommended for your visitors. It also shows a like button, This will really help you to grt maximum likes to your posts and also help you get popular on facebook. This plugin is easy to install and is totally compatible with blogger. In this post I'll show you How to Add this on your blog.

Facebook Recommendations Bar for blogger

Installing Facebook Recommendations Bar Plugin.

Here are the Instructions for Installing Facebook Recommendations bar plugin on your blogger blog. 

facebook recommendations box for blogger

Creating Facebook App:

Step 1: Go to this Facebook Apps Page for creating your app.

  • Click on Create An App button.
  • Enter your App name and click continue.

Step 2: Now you'll be redirected to App Page.

  • Fill your Blog URL in App Domains and Website with Facebook Login > Site URL.

  • Once you have saved your App, Copy your App ID.

Adding Recommendations Bar to Your Blog:

Step 1: Go to Blogger Dashboard > Template (It is always recommended to backup your template before making any changes)

Step 2: Click Edit HTML > Proceed, Now Search for <body> and paste the following code below it. and just below that paste the following code.

    <div id="fb-root"></div>
      window.fbAsyncInit = function() {
          appId      : 'Your App ID', // App ID
          channelUrl : '//', // Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        // Additional initialization code here
      // Load the SDK Asynchronously
         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); = id; js.async = true;
         js.src = "//";
         ref.parentNode.insertBefore(js, ref);

Step 3: Change Your App ID and YourBlogDomain with App ID and Blog Domain respectively.

Step 4: Save your Template.

Open Graph Meta Tags:

Most templates require installation of meta tags to tell Facebook to fetch correct post titles, thumbnails etc. To do this, Simply follow the steps given below.

  • Go to Blogger Dashboard > Template
  • Click Edit HTML > Proceed
  • Search for <head> and paste the following code below it.
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl'
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

Now Save your template and the recommendations bar will start to appear on your blog. Hope this tutorial was helpful, Please leave your comments below.

jim luthra jimmie jamshed About Author
Jimmie Luthra is founder of He is a Cadet in Merchant Navy and a Part time Blogger. He is 20 and lives in Mumbai. You can Follow him on Twitter, Facebook and Google+

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.
    Blogger Comment
    Facebook Comment is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for to earn fees by linking to and affiliated sites.