How To Add Facebook Recommendation Bar To Right Botton Corner In Blogger?

Fb+recommendation+barInternal Links play a very important roll for any website. there are many ways to by which you can add internal links in your blog. One of the, is recommendation bar. Recently facebook launch feature of recommendation bar. It will show related recommended links of your blog on right bottom side.This post is all about how to add facebook recommendation bar to blogger blog.
For the purpose of adding facebook recommendation bar to your blog. you must need to create facebook application. If you already have facebook application than copy application id it will require letter.

Create Facebook Application

Step 1: Go to Facebook Application Page.
Step 2: Click on “Create New App”.
Step 3: One popup appear in which you required to Write “App Name” and click on “Continue” Button.


Step 4: Now fill up the details ( See following Screenshot )


Step 5: Save changes that set your FB App ID is Creaded. Now copy your App ID.(Find App Id : In above screenshot highlighted text is my application id, you need to copy your own id.)

Facebook Recommendation barĀ  for blogger.

Step 1: Login into your blogger account.
Step 2: backup your template. ( How to backup your blogger template? )
Step 3: Now select Template > Edit HTML > Proceed button.
Step 4: Find <head> tag by pressing Ctrl+F, and past following code below it.

<!-- Begin Open Graph metadata -->
<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'/>
<!-- End Open Graph metadata -->

Step 5: Now find <body> tag by pressing Ctrl+F and just below it past following code.

<div id=’fb-root’/>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = “//“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style=’z-index:999999; position:absolute;’>
<fb:recommendations-bar action=’like‘ max_age=’0′ num_recommendations=’3
read_time=’15‘ side=’right‘ site=’Your_Blog_Url‘ trigger=’40%’/>

  • Replace highlighted “APP_ID” text with your own facebook application id which we created earlier.
  • Replace “Your_Blog_Url” text with your blog Address.
Recommended -   2019 On-Page SEO Techniques for Google Rankings and Traffic

Customize your code:
Num_recommendation=‘3’: It’s indication the number of post that appear in your Facebook bar
read_time=’15’: It’s indication the time duration for appearing.
side=‘right’ : It’s indicating side where your recommendation bar will appear
action=‘like’ : You can use Like or Recommend

Step 6: Save Template. That set.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Heeren Tanna

Heeren Tanna, a Digital Marketing Consultant, Trainer and Speaker with more than a decade of experience working at prominent global companies, startups and small/mid-size companies.