How to add Facebook Send button to every post

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:

style="border-width: 0px; display: inline;" title="Facebook Send button 1" width="160" />

1. Share your post with selected friends through Facebook Messages.
2. Post it to Facebook Groups.
3. Email it (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 button Start -->
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div style='float:left;padding:5px 5px 5px 0;'>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1' 

   type='text/javascript'></script><fb:send expr:href='data:post.url' font=''

    colorscheme='light'></fb:send>
   </div>
   </b:if>
   <!--Facebook Send button End -->

6. Preview, you should see the button appear in 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 code:

<!-- Facebook Like+Send button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'

></script><fb:like expr:href='data:post.url' font='' layout='standard' send='true' 

show_faces='false' width='450' colorscheme='light'></fb:like>
</div>
</b:if>
<!-- Facebook Like+Send button End -->

III. Adding Send button to existing Like button

If you already have a Like button installed, just replace the existing code (it doesn’t matter if it is an iframe or a XFBML) with the following XFBML code.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' 

type='text/javascript'></script><fb:like expr:href='data:post.url' font='' 

layout='standard' send='true' show_faces='false' width='450' 

colorscheme='light'></fb:like>

IV. Configuring the buttons

Choose the type of button and set the appropriate width and height by changing the attribute values in line 4.

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.

Only two attributes are applicable to Send button –colorscheme and font.

V. Repositioning the buttons

The steps above positioned the button on 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 3 from left to right.
• To display the button on static pages, remove the conditional tag -code line 2 and 6.

Enjoy!

Other information: