Add Facebook Send Button to Blogger:Digital Tech Inspiration

Facebook announced an amazing button a send button for Facebook users. This send button share posts in private with many friends and groups. It allows your visitors to share

posts to their selected Facebook friends through messages and can also email them.

This tutorial will show you how to add a Facebook send button to each blog post in Blogger.

Installing a Facebook Send Button

STEP #1: Log on to Blogger.

STEP #2: Go to Dashboard > Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick the Expand Widget Templates check box on top right

STEP #5: Now just press Ctrl + F to search for <data:post.body/> tag

STEP #6: Paste the following XFBML code right below the searched tag

<!-- Facebook Send script Start -->

<b:if cond="data:post.isFirstPost">

<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

</b:if>

<!-- Facebook Send script End -->

<!-- Facebook Send button Start -->

<div style='float:left;padding:5px 5px 5px 0;'>

<fb:send expr:href='data:post.url' font='' colorscheme='light'></fb:send>

</div>

<!-- Facebook Send button End -->

STEP #7: Click Save Template and Preview to see the send button appearing in each post.

Installing a Facebook Like + Send Button

Go through similar steps as in above but replace the code in STEP #6 with the following:

<!-- Facebook Like+Send script Start -->

<b:if cond="data:post.isFirstPost">

<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

</b:if>

<!-- Facebook Like+Send script End -->

<!-- Facebook Like+Send button Start -->

<div style='float:left;padding:5px 5px 5px 0;'>

<fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like>

</div>

<!-- Facebook Like+Send button End -->

Customizing the Buttons:

If you want to change the colorscheme attribute then change colorscheme='dark' for both send and like button. Also select various fonts types like arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana for font attribute put the selected font as font=’verdana’.

For the like button layout and width attribute:

layout=’button_count’ and width=’150’

layout=’box_count’ and width=’110’

Repositioning the Buttons:

The steps above position the button at bottom left of each post. You can change the position if you wish:

Position it on top of post place the button code before <data:post.body/> instead of after.

Position it on the right change it to float:right .