Add Facebook Recommendation Bar To Right Hand side of Your website/blog

When you are reading articles on some blogs and mine blog www.kutufam.com, you would have noticed a Facebook recommendation bar on 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. Facebook recommendation bar  boost your traffic, by allowing you to gain more pageviews.
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:

                           

How Do I Add Facebook Recommendation Bar to  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 How to add the Facebook comment form to your blog, you can just move straight to step II.

                                         STEP I

1. Visit Facebook Apps SetUp page 

2.A small windows will pop out. Type anything you like in the "App Name" field. Make sure it says valid

3 Click the "Continue" button

4.Enter a captcha code in the space provided and click on submit

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

 click Save Changes.

7. You will see two strings of  characters on the page. theApp ID and the  App secret.  Copy the App ID code and keep it save in a notepad. 

                                                               STEP II

==> Log in to Blogger.com

==>Click on 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 the code "</body>"


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


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

==> Click on Save Template

                                                                      STEP III

1. Still in "Edit HTML" with "Expand Widgets Templates" box ticked, 
2.Use CTRL F to find </head>

3.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'/>


    4.Click on Save Template


                                             STEP IV

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

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


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-recommendations-bar' data-action='like' data-num-recommendations='3' 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
NOTE

 Check out the official Facebook recommendation bar page for more info on how to customize the bar.

                                                   YOUR HEALTH TIP

Are you aware candidiasis affect the mouth. This yeast infection which makes the mouth white and blood. Eating yogurt helps clear a simple infection of thrush.

Credit to my boss Jide of ogbongeblog

HEY ENJOY THIS ARTICLE? ! Subscribe to my Blog Feed in a feed reader or sign up for Free Email Updates and you'll never miss a single post. Thanks for reading my Post!

Delivered by www.kutufam.com

                                                                         

Enter your email address in the Box below to Receive Regular Updates in your Mailbox. Your email address is secured with us:


Delivered by www.kutufam.com