Facebook Recommendations Bar Widget for Blogger / Blogspot

To day I am going to share an amaizing widget for blogger blogpsot.com "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.

PREVIEW

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 -->

First Go to Facebook Recommendations Bar Official Page.
Directly click the Get Code Button.
Click on Create a new app Link
Enter the App Name with your Blog Title and App URL with your Blog URL, like as below and Click Continue button.
Enter Captcha Code Correctly and Click Submit button
Then Click the Get Code Button once again.
Copy the First JavaScript SDK code (First Box Code) and Encode the Code using This Tool
Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
Select the Template > Click on Edit HTML > Proceed
Check/Tick the Expand Template Widgets checkbox
Search for <body> tag and place the Copied code After <body> tag.
Facebook Recommendations Bar Customizations:
You can customize the Facebook Recommendations Bar settings
Settings
Position:
Action
Trigger
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>
```
Save the Template

If you like this" Facebook Recommendations Bar Widget for Blogger / Blogspot ", then please keep looking here.We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Blogging Trainings