Facebook Share Button for Blogger

Facebook Share Button for Blogger

Facebook is one of the most popular social networking site, From this social site you can get more traffics on your websites or blog. Here i am going to discuss Four types of Facebook Share buttons in different-different styles. Horizontal button with counter, vertical button with counter, normal button and Share icon all these buttons are you can use at the end of your post for get more traffics.

How to add this widgets

Here three types of Facebook Share button choose any one of them and add just after below code. To find this code just copy given code and follow these steps.

Login on Blogger
Go Dashboard >> Template >> Edit Html >> Press Clt + F.
and search below code.

<data:post.body/>

Live Dome

Vertical count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><div id="fb-root">
</div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://www.facebook.com/sites18" data-type="box_count">
</div>
</b:if>

Horizontal counter

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div id="fb-root">
</div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://www.facebook.com/sites18" data-type="button_count">
</div>

</b:if>

Normal button

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div id="fb-root">
</div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://www.facebook.com/sites18" data-type="button">

Share Icon

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div id="fb-root">
</div>
<script>(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://www.facebook.com/sites18" data-type="icon_link">
</div>

</b:if>

Settings

Replace My Facebook Page URL https://www.facebook.com/sites18 with your own Facebook page URL

This button is aligned to left of page if you want to align it to right or middle then replace text-align:left; with text-align:right; and text-align:center; respectively.


This button will visible on below of post if you want to add it before the post then add code just above of <data:post.body/>

Finally save your template and you are done.