Hello friends, today we are going to share a amazing recommendations bar widget with like/recommend button for blogger/blogspot users.This widget helps you to get massive traffic from facebook to your blog and it also helps you in decreasing bounce rate of your blog.Your blog visitors can easily like your content and recommend your posts to their friends in one click by using facebook recommendation bar.In order to install facebook recommendations bar plugin you should have facebook open graphs meta data/tags in your blogger blog.Follow below tutorial to install this plugin in your blogger blog.Also Read : Add Professional And Stylish Live Chat Widget In Your Blogger Blog
How To Add Facebook Meta Data Or Tags In Blogger Blog :
- First go to blogger.com and login using your google account.
- After login go to blogger Dashboard>>Templates>>Edit html.
- Now search for the following html code in your blog template.
xmlns:expr='http://www.google.com/2005/gml/expr'
- Then just after above code insert xmlns:og='http://ogp.me/ns#' [ Don't forget to give space between both codes ]. Once everything is done, final code will look like below code.
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
- After that again search for <head> tag in you blogger template and just below it paste the following meta code.
<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'/> - Once everything done, click on the save template button.Congratulation, you have successfully added facebook meta tags or data in your blogger blog.Now facebook can show correct images of blog posts on recommendations bar and also on facebook.com.Now you can easily install facebook recommendation plugin in your blogger blog.
How To Add Facebook Recommendations Bar Plugin Or Widget On Your Blogger Blog :
- Once again go to blogger Dashboard>>Templates>>Edit html and search for <body> tag in your blogger template.And paste the following code just below <body> tag.
<div id="fb-root"></div>
<script>(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_GB/sdk.js#xfbml=1&appId=Your Facebook APP ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);}
(document, 'script', 'facebook-jssdk'));</script>
- Replace Your Facebook APP ID with your facebook app id number.
- Now search for <data:post.body/> tag in your blogger template and paste the following code just after the <data:post.body/> tag.
<div class="fb-recommendations-bar" data-site="mytricksyard.blogspot.com" data-read-time="30" data-side="right" data-action="like" num_recommendations="3"></div>
Note : If you can't find <data:post.body/> in your blog or plugin is not working in your blog after puting this code below <data:post.body/> than please go to blogger Dashboard>>Layout>>Add a Gadget>>HTML/JavaScript paste the above code there in blank field and save it.
Customization :
- Replace mytricksyard.blogspot.com with your blog domain name.
- Replace 30 in above code with number of seconds before the plugin shows recommended posts [ Minimum 10 seconds ].
- Replace right with left if you want to this plugin in left side of your blog page.
- Replace 3 with the number of recommendations you want to display [ Maximum 5 ].
No comments:
Post a Comment