Facebook (FB) Recommendations Widget for Bloggers (Official Bar)
Friday, 20 July 2012 - 
Blogger,Blogging
No comments
Blogger,Blogging
No comments
Facebook recently has introduced a new social plugin called Facebook Recommendation Bar. FRB is useful plugin which helps you to drive traffic from Facebook. With Facebook Recommendation Bar, Your blog viewers can LIKE you posts and can see related posts as well.@How to Install the Facebook Recommendations Widget in Blogger :
You first need to add Facebook open Graphs meta tags. Here is the simple way to add Facebook open graphs in your blogger template.
Got your Blogger template and find this code
<head>
Add new code just AFTER searched code.
<!-- Begin Open Graph metadata -->Save Your Template
<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 -->
Now go to Facebook Recommendations Bar Official Page
No need to enter anything, 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 and click on Continue
Enter Captcha Code and Click Submit button
Enter your blog URL in URL of the article box and your domain name in Domain box, Click the Get Code Button once again
Copy the code that appears in First Box and Encode the Code using HTML parser.
Now, go back to Blogger > Template > HTML > Proceed and select Expand widget templates
Search <body> and past the encoded code AFTER <body> tag
Now search for;
<data:post.body/>
Paste below given code after the code you searched.
<b:if cond='data:blog.pageType == "item"'>@Save your template
<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>
See your blog, a Like button will appear on the right-bottom side of your blog. This button will also be converted to recommendation box.
0 comments:
Post a Comment