Wednesday, June 29, 2016

How To Add An 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.
tg fb bar

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?

1. 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> tag.
2. Add new code just AFTER searched code. 

<!-- 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.
tg fb bar
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 Click Continue 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 at template code
9. Search for <body> tag and place the Copied code After <body> tag
  • Facebook Recommendations Bar Customizations

10. Look for the <body> tag using ‘Ctrl+F’ then COPY the code which you ‘Encoded’ from the encode/decode tool and PASTE it after the <body> tag.
Feel free to customize the Facebook Recommendations Bar settings as you like.
11. Using ‘Ctrl+F’ again, search for <data:post.body/> tag and paste the following code below AFTER it.

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

12. Save your template and that’s practically it! Enjoy your blog’s new plugin.
Previous Post
Next Post

0 comments: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE