Want To Add Facebook Recommendation Bar To Blogger/Blogspot Blog?

While reading articles on some blogs, you might have noticed a Facebook recommendation bar docked to the lower right (or left) of the screen which expands as you scroll down the page or after you might have finished reading the blog post. This Facebook social plugin was designed to show you a social recommendation of the next article to read on such blogs.

If you add the Facebook recommendation bar to your blog, it will boost your traffic, by allowing you to gain more pageviews, though the bar will only display your blog posts that are previously liked or shared on Facebook. It features the “Like” button and can display up to 5 recommended posts but default is 2. Below is a screenshot of the FB recommendation bar:

So, How Do I Add Facebook Recommendation Bar to Blogger Blog?

You will need to create a Facebook application so as to get your appID which will be needed to make the bar work on your blog. If you already have your appID, probably after reading my tutorial on adding the Facebook comment form to your blog, you can just go to step 2.


==> Visit Facebook Apps SetUp page

==> A small windows will pop out. Type anything you like in the “App Name” field. Make sure it says valid

==> Click the “Continue” button

==> You will be prompted to enter a captcha code. Enter it in the space provided and click on submit

==> A new page will be displayed. Click Website with Facebook Login tab and inside the box, enter your blog URL with an ending slash. See the screenshot below

Do not touch remaining options and click Save Changes.

==> You will also see two strings of alpha-numerical characters on the page. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later


==> Log in to Blogger.com

==> Go to DesignEdit HTML (In Old Blogger Interface) or Click on Blog TitleTemplateEdit HTML (in New Blogger Interface)

See also :   How to add Meta tags to blogger blogs and prevent duplicate meta descriptions

==> Tick the “Expand Widgets Templates” box and Use CTRL F to find </body>

==> Add the code below directly above </body>

<div id=’fb-root’/>
//Facebook Recommendation bar tutorial by Ogbongeblog.com
(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=xxxxxxxxxxxxxxx“;
  fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

==> Replace xxxxxx with your appID copied in Step1 ( Important)

==> Click on Save Template


==> Still in “Edit HTML” with “Expand Widgets Templates” box ticked, Use CTRL F to find </head>

==> Copy and paste the code below directly above </head>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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’ property=’og:image’/>
<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’/>

==> Click on Save Template


==> Still in “Edit HTML” with “Expand Widgets Templates” box ticked, Use CTRL F to find <data:post.body/>

==> Copy the code below directly after <data:post.body/>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’fb-recommendations-bar’ data-action=’like’ data-num-recommendations=’2‘ data-read-time=’30’ data-side=’right’ data-trigger=’onvisible’ expr:data-href=’data:post.url’ expr:data-site=’data:blog.homepageUrl’/>

==> Click on Save Template

That’s all.

View your blog posts and you should see the Facebook recommendation bar as you scroll down the page.


==> You can change the number of recommended posts in the code above though maximum is 5. You can check out the official Facebook recommendation bar page for more info on how to customize the bar.

I hope this helps.

If you have contributions or questions to ask, kindly make use of the comment form below.


Please Share :

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here.


Leave a Reply
  1. I have noticed it on yuor blog few days back but don't know its called recommendation bar. Will try it on my blog later when I am on my computer. thanks for sharing.

  2. worked partially, after some seconds it displays this "Object Invalid Value: Object at URL 'http://www.techsentral.com/2012/08/blogging-on-blackberry-apps-and-tools.html&#39; of type 'article' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'." and it only displays only two of my post on everytime

    • STEP 3 should fix the error bro if you follow the instruction carefully. In the code above, I highlighted "2" and stated clearly that you can change the number to maximum of 5. So, change it to any number you want if the 2 is not OK for you.

  3. I added this to my New Blog last month only because it was directly from Facebook (Not all these Heavily scripted ones others use)
    And since i've successfully deferred parsing of JavaScript till Page load is complete, it ads no additional load time.

    Plus Bounce rate below 50%
    Nice addon i tell you

  4. Jide, the codes are not copyable. after highlighting and copying, it shows a different thing when pasted regarding content source.

    • Yes, I added the script to my blog because of those that copy my content without linking back. I have disabled the script so you can easily copy the code above. Retry and am sure you will be able to copy it now

  5. Thank you Jide. Just did it and it worked well. Just that the post title always starts with my blog title, therefore they don't show all of the post title. God bless you richly!

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

  • NetDivo ePin Manager Lets You Print Airtime Of All NetworksLearn More

PostCron: Alternative to Ping.fm and Seesmic that Allows You Schedule Posts to Facebook Profile, Pages and Twitter

“Innocence of Muslims” Video on YouTube