Add Facebook Recommendations Bar Widget In Blogger::
Adding Open Graph Tags::
1. Firstly you need to add Facebook open graph tags for this widget to work or else this widget will show bug.(I found a very simpler and reliable open graph tags on Git Hub gist and i really thankPathawks for this. .)
- Go to blogger dashboard --> Template --> Edit HTML(Tick the Expand Widget Template Option).
- Find(CTRL+F) for <head> and add the following open graph tags just 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 -->
Creating Facebook App::
2. If you have already created your Facebook app then move on with step 4. If not, Go To Facebook Apps Page.- Choose Create An App button.
- Enter your blog title in app name field and click on Continue.
- It will ask for word verification. Enter the text displayed and click on submitbutton.
3. You will be taken to your app page.
- Note down your App ID.
- Enter your blog Url in App Domains field and also in Website with Facebook Login field.
- Click on Save changes button.
Adding Javascript SDK::
4. You need advancedsource: Facebook developers<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//http://www.YOURDOMAIN.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>
- Replace YOUR_APP_ID with your newly created App ID.
- Replace http://www.YOURDOMAIN.com with your blog Url.
Adding Widget Code::
5. Go to blogger dashboard --> Layout --> Add a gadget ( HTML/Javascript gadget).6. Paste the following peace of code inside it.
<b:if cond='data:blog.pageType == "item"'>
<div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="25"
data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>
Customizations::
- data-read-time="25" --> Number of seconds the plugin will wait before it expands.
- data-action="Like" --> type of action (Like or Recommend).
- data-num-recommendations="2" --> Number of recommendations to be displayed.
- data-side="right" --> The position of plugin.
7. Finally Save your Gadget and Save your Layout.
8. View Your blog and you can notice the official recommendations bar plugin on your blogger blog without any bugs or errors.
Isn't It so cool pals . . . :)
0 Comments
