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

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.

STEP 1

==> 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


STEP 2

==> Log in to Blogger.com

==> Go to Design → Edit HTML (In Old Blogger Interface) or Click on Blog Title → Template → Edit HTML (in New Blogger Interface)

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

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


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


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

==> Click on Save Template

STEP 3

==> 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'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>


==> Click on Save Template


STEP 4

==> 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'/>
</b:if>


==> 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.

NOTE

==> 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.

Cheers