Facebook Recommendations Bar Plugin displays posts which are recommended for your visitors. It also shows a like button, This will really help you to grt maximum likes to your posts and also help you get popular on facebook. This plugin is easy to install and is totally compatible with blogger. In this post I'll show you How to Add this on your blog.
Installing Facebook Recommendations Bar Plugin.
Here are the Instructions for Installing Facebook Recommendations bar plugin on your blogger blog.
Creating Facebook App:
Step 1: Go to this Facebook Apps Page for creating your app.- Click on Create An App button.
- Enter your App name and click continue.
Step 2: Now you'll be redirected to App Page.
Step 2: Click Edit HTML > Proceed, Now Search for <body> and paste the following code below it. and just below that paste the following code.
Step 3: Change Your App ID and YourBlogDomain with App ID and Blog Domain respectively.
Step 4: Save your Template.
Now Save your template and the recommendations bar will start to appear on your blog. Hope this tutorial was helpful, Please leave your comments below.
- Fill your Blog URL in App Domains and Website with Facebook Login > Site URL.
- Once you have saved your App, Copy your App ID.
Adding Recommendations Bar to Your Blog:
Step 1: Go to Blogger Dashboard > Template (It is always recommended to backup your template before making any changes)Step 2: Click Edit HTML > Proceed, Now Search for <body> and paste the following code below it. and just below that paste the following code.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Your App ID', // App ID
channelUrl : '//http://www.YourBlogDomain.com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Step 3: Change Your App ID and YourBlogDomain with App ID and Blog Domain respectively.
Step 4: Save your Template.
Open Graph Meta Tags:
Most templates require installation of meta tags to tell Facebook to fetch correct post titles, thumbnails etc. To do this, Simply follow the steps given below.- Go to Blogger Dashboard > Template
- Click Edit HTML > Proceed
- Search for <head> and paste the following code below it.
<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'/>
Now Save your template and the recommendations bar will start to appear on your blog. Hope this tutorial was helpful, Please leave your comments below.
About Jimmie Luthra
Blogger Comment
Facebook Comment