Add Facebook Like, Send, Share button to blogger posts

Facebook is a popular social networking website which provides lots of traffic to millions of websites or blogs. You can also use the power of social media traffic into your blog by adding facebook widgets in your blog. In this guide we will discuss about adding facebook buttons to blogger posts. You will learn how to add different facebook buttons such as share buttons, like button or send button at different locations in blogger posts. In this guide we will add these buttons below blogger posts and below post titles also. You can add these facebook buttons to your blog according to your requirement.

Facebook share button - The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.
Facebook send button - The Send button lets people privately send content on your site to one or more friends in a Facebook message, to an email address, or share it with a Facebook group.
Facebook like button - The Like button is the quickest way for people to share content with their friends. A single click on the Like button will ‘like’ pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

Add facebook like button below blogger posts

Note: In every blogger template <data:post.body/> has more than one occurrences. 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.

Step 1: Login to your blogger dashboard and select your blog.

Step 2: Select Template option and Click on Edit HTML.

Step 3: In the template code find <data:post.body/>

Step 4: Paste following code just below the above code 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>

Customize Like button – Change value of data-share=”false” to data-share=”true” to show both like and share buttons.

Add Facebook like button below posts titles in blogger

Step 1: In the template code find <data:post.body/>

Step 2: 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>

Add Facebook share button below blogger posts

Step 1: Select Template option and Click on Edit HTML option.

Step 2: In the template code find <data:post.body/>

Step 2: 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>

Add Facebook share button below post titles

Step 1: In your blogger dashboard select your blog.

Step 2: Select Template option and click on Edit HTML.

Step 3: In the template code find <data:post.body/>

Step 4: 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>

Add Facebook send button below blogger posts

Step 1: Open your blogger dashboard and select your blog.

Step 2: Select Template option and click on Edit HTML option.

Step 3: In your template code find <data:post.body/>

Step 4: 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>

Add facebook send button below post titles

Step 1: In your Template code find <data:post.body/>

Step 2: 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>