Official Facebook Recommendations Bar Widget for Blogger / Blogspot

Official Facebook Recommendations Bar Widget for Blogger / Blogspot
Facebook Introduced their brand new social social plugin called Facebook Recommendations Bar. It is Beta Plugins.
In this tutorial, we go to learn how to install Facebook Recommendations Bar in Blogger Blogs. This widget is more helpful to drive traffic from Facebook with and instant likes and related posts

OR
You can take a look at Right Bottom of this Page and see it’s action in Live!

HOW TO INSTALL THE OFFICIAL FACEBOOK RECOMMENDATIONS BAR WIDGET?

In order to work the Facebook Recommendations Bar every blog should must have the Facebook Open Graphs meta tags.
I found the simplest and Working Facebook Open Graphs tags on GitHub gist. Thanks to pathawks.!

Add the Following code after <head> tag.

<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <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='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->

1. First Go to Facebook Recommendations Bar Official Page.
2. Directly click the Get Code Button.
   
3. Click on Create a new app Link
   
4. Enter the App Name with your Blog Title and App URL with your Blog URL, like as below and ClickContinue button.
   
5. Enter Captcha Code Correctly and Click Submit button
   
6. Then Click the Get Code Button once again.
   
7. Copy the First JavaScript SDK code (First Box Code) and Encode the Code using This Tool
8. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
9. Select the Template > Click on Edit HTML > Proceed
10. Check/Tick the Expand Template Widgets checkbox
11. Search for <body> tag and place the Copied code After <body> tag.
12. Facebook Recommendations Bar Customizations:
    You can customize the Facebook Recommendations Bar settings
    Settings

    
    

    Position:
    LeftRight 

    Action
    LikeRecommend 

    Trigger
    onvisibleX%Manual 

    Read Time

    Number of Recomednations
    Search for <data:post.body/> tag and place the following code after the <data:post.body/>tag

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" data-trigger="onvisible" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>

13. Save the Template, Enjoy 

Webpage Content Toolbar Widget

Webpage Content Toolbar Widget

Let your readers easily share, email, print, and bookmark your web pages with these buttons. This widget works really well in your blog's sidebar, where your readers can easily see it. As you can see the demo above, the buttons are spread out, on your site they will be closer together.


+- Get this Widget

Copy and Paste the code below into your site

<script type="text/javascript">stenium_url    = location.href;stenium_title  = document.title;stenium_style  = 'classic';stenium_widgets = 'print,email,bookmark,share';stenium_layout = '1';</script><script src="http://www.stenium.com/js/widget_loader.js" type="text/javascript"></script>

Customizing this Widget

• If you would like to rearrange the order of the buttons search for this line of code below. Rearrange the the names according to your liking or remove any that do not suit your needs.

print,email,bookmark,share

• You can also make these button display themselves horizontally instead of vertically. Search for the line of code below.

stenium_layout = '1';

• Replace it with this line of code.

stenium_layout = '0';

"Review My Blog" Widget

"Review My Blog" Widget

User reviews are one of the most valuable interactive features your site can deploy. By building trust and confidence, reviews improve conversion rates, time on site and overall site experience. Users can add their own reviews, rate reviews submitted by others and engage in threaded conversations.


Please take note that when you make a review, you are reviewing that specific url. Below you can click to see the demo and please give this widget or my site a review.
+- Get this Widget

The HTML code:

<div class="js-kit-rating"></div><div class="js-kit-comments"></div><script src="http://js-kit.com/reviews.js"></script>

For google powered blogs:

Youtube Videos Search Widget

Youtube Videos Search Widget

Add a mini Youtube Videos search engine in the sidebar of your blog. The search module displays it's results on youtube.com, which will let you and your users quickly find the videos you are looking for.


+- Get this Widget

For google powered blogs:

The html code:

<iframe scrolling="no" frameborder="0" width="102" src="http://search-youtube.blogspot.com" height="114"></iframe>

Add a mini Youtube Videos search engine in the sidebar of your blog. The search module displays it's results on youtube.com, which will let you and your users quickly find the videos you are looking for.


+- Get this Widget

For google powered blogs:

The html code:

Buy Me a Beer / Buy me a coffee for blogger

Buy Me a Beer / Buy me a coffee for blogger

I got some requests about implementing the Buy me a beer / Buy me a coffee widget after each of your blog post..So i decided to write this out for you..

Goto your Blogger Template> Edit HTML and expand the widget templates..Now find 

<p class='post-footer-line post-footer-line-3'/>

and immediately after that place the text from this file after properly editing it with your paypal email address(replace youremailaddress with the email address using which you registered at paypal)..

If you have any doubts leave a comment.. and if you like the trick then why not buy me a coffee from that link below!!??

U Comment I Follow Blogger Widget/Plugin

U Comment I Follow Blogger Widget/Plugin

As you guys know the comment field of my blog is do follow..If you too have a blogger blog whose comment field is Do Follow,then let others know of this by adding the Do follow widget to your blog.If you don't know of the Do Follow movement read about it here.. If you are already having a Do Follow comment field for your blog then add the following plugin / widget to your blog

Note: Dofollow Widget is no longer available as i am not a part of it now.
Update: This blog is no longer a part of the DO FOLLOW movement.. I am shutting it down due to excessive comment spam..