9/10/2012

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 DesignEdit HTML (In Old Blogger Interface) or Click on Blog TitleTemplateEdit 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!


Share :


15 comments:

  1. Anonymous9/10/2012

    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.

    ReplyDelete
  2. Nice one bro. I will do it today

    www.infonaija247.blogspot.com

    ReplyDelete
  3. 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

    ReplyDelete
    Replies
    1. 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.

      Delete
  4. 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

    ReplyDelete
    Replies
    1. Yes, it's a nice add-on. Makes alot of sense.

      Delete
  5. Nice review here, keep it up and will like to follow ur blog.

    ReplyDelete
  6. uncopyable, the code above is not copyable

    ReplyDelete
    Replies
    1. I have disabled the script that prevented you from copying it. You can retry now bro.

      Delete
  7. Anonymous9/15/2012

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

    ReplyDelete
    Replies
    1. 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

      Delete
  8. Anonymous10/04/2012

    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!

    ReplyDelete
  9. it dint work ooooooo

    ReplyDelete
  10. Hello jide, i have tried it and it did not work on my blog, i am using travel template. pls wat should i do.

    ReplyDelete

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.

THANKS.

Designed by Jide Ogunsanya.