Add Facebook Like Button And Share Button

Now days Social Networking sites is very popular. People can exchange their views with each other.Social Networking play vital role for your website. They help you for getting traffic for your website. In this post I will teach you how you can add a facebook icons like facebook like button, facebook share button, facebook send button in your website. You can add these facebook button according to your requirement.

Facebook Share button: Facebook share button is use to share a page to your friends or in public. This is the very simple and quickest method to share the website content to your friends.

Facebook Like button: This button is very useful if the visitors who visit your website and the content which contains is very useful for them or they are interested in your blog post. They hit the Like button which are appear under the post.

Facebook Send button: If you send a private message to your friends then this button is very beneficial for us.

Add Facebook like button below blogger post

In the blogger template code  <data:post.body/> occur more than one time if the trick does not work with first <data:post.body/>code the apply it with second one <data:post.body/> and so on.

Step1.Login in your Dashboard and select your blog.

Step2.Click on Template and then click on Edit HTML.

Step3. Find <data:post.body/> and paste the code below it and save the template.

<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 style='margin-bottom:20px' class="fb-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>

You can also change data-share="false" with data-share="true" to show  like and share button together.

Add Facebook like button below your post title:

Step1. Find <data:post.body/>in your blogger template and paste the code just above <data:post.body/> and save it.

<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 style='margin-bottom:20px' class="fb-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>

Add Facebook send button below post title

The steps are same Find the   <data:post.body/>  and paste the code just below it and save the template.

<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 style='margin-bottom:20px' class="fb-share-button" data-type="button_count"></div>

These are very useful for you. If you apply these codes in your blog you see that facebook like button and facebook share button are appear in your blog or website.