fbpx

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

How To Add Facebook Recommendation Bar To Right Botton Corner In Blogger?Internal 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.

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

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

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

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'/>
</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'/>
<!-- 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’/>
<script>
//<![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=APP_ID“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
//]]>
</script>
<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%’/>
</div>
</b:if>

  • Replace highlighted “APP_ID” text with your own facebook application id which we created earlier.
  • Replace “Your_Blog_Url” text with your blog Address.

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.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Heeren Tanna

Heeren Tanna

Heeren Tanna, a Digital Marketing Consultant, Trainer and Speaker on a mission to help 10,000 people in starting a business online and making a full time income from it.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

siteground hosting