Aside from Like button, Facebook now has introduce new features in its collection - the Send button. Its allow users to send your blog post to their friend in diffrent way. The option are :-

  • send message to the inbox of their facebook friends
  • send to the group wall of any Facebook group they are a member of
  • and send as an email to any email address

The message will include a link to the URL specified in the send button, along with a title, image, and short description of the link.


The best thing is, we can integrate it with the Like button in a single attribute. Apparently this only works with the XFBML version, so if you have the Like button on iframe before, you have to change it intirely. But not to worry, its very easy.

Now here is how to do it..

1. The Facebook Send button code in XFBML (if you want to add it seperately)

<!-- Facebook Send button -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>
<!-- /Facebook Send button -->

2. Integrate with Facebook Like button (Facebook Like + Send)

<!-- Facebook Like+Send button -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='arial' send='true' show_faces='false' width='450'/>
<!-- /Facebook Like+Send button -->

3. As to where to put the button code

Step 1 : In your Blogger dashboard Click 'Layout' ► 'Edit Html' ► 'Expand Widget Templates'. Don't forget to backup your template by download it first.
Step 2 : Ctrl + F and find the following code in your blog Html

<data:post.body/>

Step 3 : Paste the code after the above code

4. Customize (button style)

layout = standard / button_count  [choose layout]
show_faces = true / false              [show picture]
action = like / recommend            [option : Like or Recommended button]
colorscheme = light / dark            [color]

And last but not least, use this if you want to make your button appear only in your post page and not in your index page.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
..The_Code_Here
</b:if>

You can also use the AND statement to avoid it appear in your static page

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
..The_Code_Here
</b:if>
</b:if>

Or refer to this post for more choice of the button placement.
[Control your Widget Placement with Conditional Tags]

Go0d Luck..



You may also like this [...]
Fellow Readers