Jide Ogunsanya
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 == "item"’>
<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=’"en_US"’ 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 == "item"’>
<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!
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.
Nice one bro. I will do it today
http://www.infonaija247.blogspot.com
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' 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.
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
Yes, it's a nice add-on. Makes alot of sense.
Nice review here, keep it up and will like to follow ur blog.
uncopyable, the code above is not copyable
I have disabled the script that prevented you from copying it. You can retry now bro.
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
cool
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!
it dint work ooooooo
Hello jide, i have tried it and it did not work on my blog, i am using travel template. pls wat should i do.
Thanks for sharing it