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.
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 == "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'/> <!-- 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 == "item"’>
<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.
