How to add Facebook Send button to every post

Update Oct 2011:
Upgrade to the new asynchronous script. Add conditional tags to load script only once, even on multi-post pages.

Facebook has introduced a new sharing tool – the Send button. The Send button allows your readers to privately share things with groups and individuals.  It enables them to:

1. Share your posts with selected friends through Facebook Messages.
2. Post them to Facebook Groups.
3. Email them (without snippet) to individuals.

The are two notable characteristics of the Send button:

• Auto suggestion -it auto-suggests friends and groups, so you don’t have to memorize friends’ and groups’ names.
• Privacy -what you send to a friend or email will not appear on your friend’s newsfeed or your wall. (What you post to a group on the other hand will appear).

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

 

I. Installing a standalone Send button

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Tick the  Expand Widget Templates check box on top right of the HTML window.
4. Find the following code in your HTML (this is the code for your post content):

    <data:post.body/>

5. Paste the following XFBML code right below that line:

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

6. Preview, you should see the button appear under each post.
7. Click Save if you like what you see.

 

II. Installing a Like + Send button

Go through similar steps as in section I but replace the code in step 5 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 -->

 

III. Configuring the buttons

Choose the type of button and set the appropriate width and height by changing the attribute values in line 16. (For Send button only colorscheme and font attributes are applicable).

Like button type	Attribute	Value	Width
	layout	standard	450px
		button_count	150px
		box_count	110px
	action	recommend	n.a.
	colorscheme	dark	n.a.
n.a.	font	font name	n.a.

 

IV. 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 the float in line 15 from left to right.

Enjoy!