How To Add Facebook Like, Share, Send Button Below Blogger Posts And Titles

Social media sites like Facebook & Twitter etc could be great source to acquire quality traffic for your blog. You can also add a Facebook Share or Like button in each of your blog posts. This button will allow users to quickly share a post on Facebook. Adding a Facebook Like, Share, Send button to your Blogger website lets readers to share your blog contents with their facebook friends or facebook page.

How To Add Facebook Like, Share, Send Button Below Blogger Posts

Note:  In every blogger template you will find  <data:post.body/> more than one time. If the following method does not work with the first <data:post.body/>  then try the same method with next  <data:post.body/>  and so on.

1. How To Add Facebook Share Button Below Post Titles

1. Login to your Blogger account > Go to Dashboard > Design > Edit HTML
2. Now search the below code Use CTRL+F Key

<data:post.body/>

3. Paste following code just Above 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>

4. Save Your Blogger Template

2. How To Add Facebook Share Button Below Blogger Posts

1. Login to your Blogger account > Go to Dashboard > Design > Edit HTML
2. Now search the below code Use CTRL+F Key

<data:post.body/>

3. Paste following 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>

4. Save Your Blogger Template

3. How To Add Facebook Like Button Below Blogger Posts

1. Login to your Blogger account > Go to Dashboard > Design > Edit HTML
2. Now search the below code Use CTRL+F Key

<data:post.body/>

3. Paste following 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-like" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>

4. Save Your Blogger Template

4. How To Add Facebook Like Button Below Blogger Posts Title

1. Login to your Blogger account > Go to Dashboard > Design > Edit HTML
2. Now search the below code Use CTRL+F Key

<data:post.body/>

3. Paste following code just Above 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>

4. Save Your Blogger Template

5. How To Add Facebook Send Button Below Blogger Posts

1. Login to your Blogger account > Go to Dashboard > Design > Edit HTML
2. Now search the below code Use CTRL+F Key

<data:post.body/>

3. Paste following 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-send" data-colorscheme="light"></div>

4. Save Your Blogger Template

6. How To Add Facebook Send Button Below Post Titles

1. Login to your Blogger account > Go to Dashboard > Design > Edit HTML
2. Now search the below code Use CTRL+F Key

<data:post.body/>

3. Paste following code just Above 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-send" data-colorscheme="light"></div>

4. Save Your Blogger Template