Zaib Blogger: Gadget

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.

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.If you don't have facebook app id,.
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.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.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 ].

After doing all desired customization save your template and preview your blog.Congratulation, you have successfully installed facebook recommendation bar plugin on you blogger blog.Please leave your feedback and suggestions below in comments.and please don't forget to share this article or plugin with your friends.

How to Add Facebook Fan Page to Website

By now, we have learned if you have not on fb page then frist of all create a page from here how to create Facebook page for Business and now, it’s time to increase fans on your Facebook pages. One of the tip, which I have given in my last post is Add Facebook fan page to your Website. Saying that, I mean Facebook offers a widget which you can embed in your blog, and use can hit like button to join your Facebook fan page. This sound super easy and this is one of the easiest way to start seeing increase in number.

Why you should add Facebook fan page to Website:

Many people thing that Facebook is other domain and why should we pass on traffic to that. Here are something, which will understand you how adding Facebook fan page to website is going to help. Facebook has a huge subscriber base, when a user like your Facebook page, he will be able to see all your updates on his wall. Specially for blogs,

Now its time is to make your Facebook Pan page popular and getting more fans on your fan page. You can also buy likes on Facebook and also but Fans, but such likes and Fans won’t be real fan and will not add much value. Your target should be convert regular & loyal readers into your Fb page fans. There are many ways to increase your fan on your blog and we have shared some of them earlier but one of the most effective way is by adding Facebook fan widget on your blog. This will help your readers to quickly like your fan page on Facebook without leaving your blog.

Guide to add Facebook Fan page Like box:

Very first step is to go to Facebook social plugins page and select Facebook like box for pages. Here is a direct link to that page. Apart from Like box, I would suggest also have a look into other Facebook social plugins which might be useful to make your Website more social.

do it right away.

Once you have added your URL, the preview tab will automatically start showing widget for your blog. You can make changes from settings, like specify a custom size for Facebook fan page widget. I usually, remove stream and header part as they add more into loading time. If you don’t want to show Facebook fan photo, you can hide that too from settings. Though, Facebook fan photo into your Facebook fan box, will add more personal touch for new readers, as Facebook shows your friends photo when you browse a site using Facebook like box.

So here, is a quick screenshot of my settings:

step by step .