Facebook Share Count Buttons For Blogger
Facebook has now officially introduced the Retweet like Facebook buttons for your blogs or sites. These Facebook buttons look much similar to the Retweet buttons by Tweetmeme. Facebook has 5 styles of Sharing buttons. Here we will see two of them.
Adding a Facebook share count button will show a neat count of how many times your blog post has been shared on Facebook.
Note: The Facebook share buttons are deprecated and FB no longer supports it(It still works though). You can still add it if you want. You can also opt to add the new Facebook Like Buttons with Like Count.
Facebook Share Button Style 1
Code for Facebook Share Button Style 1
<div style="float:right;padding:4px;">
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:share-button expr:href='data:post.url' type='box_count'/>
</div>
Facebook Share Button Style 2
Code for Facebook Share Button Style 2
<div style="float:left;padding:4px;">
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:share-button expr:href='data:post.url' type='box_count'/>
</div>
Facebook Share Button Compact Style 1
Code for Facebook Share Compact Button Style 1
<div style="float:right;padding:4px;">
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:share-button expr:href='data:post.url' type='button_count'/>
</div>
Facebook Share Button Compact Style 2
Code for Facebook Share Compact Button Style 2
<div style="float:left;padding:4px;">
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:share expr:href='data:post.url' type='button_count'/>
</div>
How to install Facebook Share Count Button on your Blogger Blog?
1.Select one of the Share Button Styles and copy the Corresponding Code.
2.Now login to your Blogger Dashboard and navigate to Layout > Edit Html and check the check box which says “Expand widget templates”
3.Find this piece of code
<div class='post-header-line-1'/>
and immediately after that place our Facebook share button code(that you copied) If you were unable to find this code in your template,then look for the first occurrence of
<data:post.body/>
and immediately before that paste our Facebook Share button code(that you copied).
4.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find
<html
and change it to
<html xmlns:fb="https://www.facebook.com/2008/fbml"
The following screenshot will help you out.
This is necessary for all FBML widgets using the fb tag. So if you have already added the namespace while adding some other FB plugin, then you can skip this.5. Save the template and you should get a Facebook share count button near each of your blog post
If you liked this post and if it helped you in implementing the Facebook buttons, then please consider sharing this post on Facebook using the button on the top-right of the post :)
No comments:
Post a Comment