New Official "Facebook Recommendation Bar" To Blogger

A new Facebook recommendations bar plug-in has introduced by facebook application developers.This plug-in can also be added to blogger easily.This facebook recommendation bar was located at the any side of the footer with showing facebook like symbol along with maximize button.whenever the visitor open page automatically this facebook bar opens as time fixed by you in the script.
Advantages of this facebook recommendations Bar
Increase of blogger page views
More Likes For Facebook Page.
Install Recommendation Bar On Blogger
To install it on blogger you need to create a facebook app and add app id to script and add it to blogger template.
Get Facebook Id
1. Go to Facebook Developers Page
2.App Name as your wish Ex:- Recommendation Bar
Facebook recomendation bar Screenshots 3.Web Hosting and App Namespace are Optional (Leave Them)
4.Click On ‘Continue’
5.Enter Captcha and Click on Submit. 6.In the next page add only your website address at Website with facebook login
Facebook recomendation bar Screenshots 7.Now Click On ‘Save Changes’ Button at below.
Facebook recomendation bar Screenshots 8.Now Copy app Id and Paste it in notepad for further Use.
Facebook recomendation bar ScreenshotsCode For  Blogger-
1.Go to Blogger->>Design->>Edit Html->>
2.Back up your template. 3.search for <html and replace it with below code
<html xmlns:fb='http://ogp.me/ns/fb#'
4.Next search for the  below code
<body>
or
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
5.Add below code after any of the above code
<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.mybloggertricks.com
//<![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=Your App Id";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.newehow.blogspot.com' trigger='40%'/></div>
</b:if></b:if>
9.Make Changes  In above code in highlighted color.
Better to add this code to get clarity in post thumbnails in facebook recommendation bar
Add below code after head
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
10.That’s all.

No comments:

Post a Comment

Please comment the message if you like post or any trouble