Facebook Share Button for Blogger



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

Vertical count


Facebook Share

<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

Facebook Share


<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

Facebook Share


<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

Facebook Share 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="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.



facebook
google-plus
twitter
pinterest

No comments :

Post a Comment