Facebook Recommendations Bar for Blogger - is a new social plug in that helps your readers to find articles based on what there friends like and share from your blog - this is really Awesome Widget.
How this Works:-
As you read article on your blog or website, a small pop-up comes at the bottom of the screen highlighting recommended articles and these recommendations are based on content that your friends have explicitly liked and shared in your blog.
This is really awesome widget for your Blogger Blog by eBlogger Tips.
And blogger websites are seeing 3x times click through on the stories through this Recommendations Box by eBlogger Tips.
Step 1 :- First Take Backup of your Template
Step 2 :- Facebook Recommendations Bar works with Facebook Open Graph meta tags- In order to work this you need to add following code after <HEAD> tag in your blog
Step 3 :- Add this XML namespace in your template as this will enhance the plugin performance and compatibility for older browsers
And add/replace following code (See below screenshot)
Step 4 :- Create Facebook Application
1. Go to Facebook Apps Official Page
2. Click on Create New App button >> On Top-right of Page
3. In the Next Box- Enter the App Name with your Blog Title, as below and Click Continue button >> Enter captcha code correctly and Click Continue button
4. Next Click on Website with Facebook Login tab and inside the box enter your Blog URL and Note your APP ID
Step 5 :- Final Step to make this Widget Work on Your Awesome Blog
Search for <body> tag and just below this paste the following code :-
Make following changes and your are Done !
You can see demo of this widget Live on eBlogger Tips
How this Works:-
As you read article on your blog or website, a small pop-up comes at the bottom of the screen highlighting recommended articles and these recommendations are based on content that your friends have explicitly liked and shared in your blog.
This is really awesome widget for your Blogger Blog by eBlogger Tips.
And blogger websites are seeing 3x times click through on the stories through this Recommendations Box by eBlogger Tips.
Follow these Steps to Install Facebook Recommendations Bar :-
Step 1 :- First Take Backup of your Template
- Go to Blogger > Template
- Backup your template
Step 2 :- Facebook Recommendations Bar works with Facebook Open Graph meta tags- In order to work this you need to add following code after <HEAD> tag in your blog
<!-- Begin Open Graph metadata by www.ebloggertips.com--> <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 by www.ebloggertips.com-->
Step 3 :- Add this XML namespace in your template as this will enhance the plugin performance and compatibility for older browsers
- Go to Blogger > Template
- Click Edit HTML > Proceed
- Search For " <html "
And add/replace following code (See below screenshot)
<html xmlns:fb='http://ogp.me/ns/fb#'
Step 4 :- Create Facebook Application
1. Go to Facebook Apps Official Page
2. Click on Create New App button >> On Top-right of Page
3. In the Next Box- Enter the App Name with your Blog Title, as below and Click Continue button >> Enter captcha code correctly and Click Continue button
4. Next Click on Website with Facebook Login tab and inside the box enter your Blog URL and Note your APP ID
>> See below screenshot and Click on Save Changes <<
Step 5 :- Final Step to make this Widget Work on Your Awesome Blog
Search for <body> tag and just below this paste the following code :-
<div id='fb-root'/> <script> //<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=ENTER-YOUR-APP-ID-HERE"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script> <b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'> <div style='z-index:999999; position:absolute; margin-right:20px;'> <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='20' side='right' site='http://www.ebloggertips.com' trigger='30%'/></div> </b:if></b:if>
Make following changes and your are Done !
- Replace ENTER-YOUR-APP-ID-HERE with your APP ID
- And replace http://www.ebloggertips.com with your blog link
>> Save your template and that's IT :) For any Questions ! Just drop a comment Below <<