.jpg)
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.
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.
<!-- Begin Open Graph metadata -->
<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 -->
1: First Go to Facebook Recommendations Bar Official Page.
2: Directly click the Get Code Button.
3: Click on Create a new app Link.
 |
| Click The Photo To View In Zoom |
4: Enter the App Name with your Blog Title and App URL with your Blog URL, like as below and Click Continue button.
 |
| Click The Photo To View In Zoom |
5: Enter Captcha Code Correctly and Click Submit button.
 |
| Click The Photo To View In Zoom |
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
 |
| Click The Photo To View In Zoom |
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:
13: Search for <data:post.body/> tag and place the following code after the <data:post.body/> tag
<b:if cond='data:blog.pageType == "item"'><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>
You can change Read Time and Number of Recommendations in red colour.
14: Save the Template, Enjoy
Please dorp your comments and share this post.
.jpg)
No comments:
Post a Comment