fb_send

It had been some time since Facebook released their new Send Button.The Send button is a social plugin that websites can use to let people send a link to a friend through Facebook Messages, post it to a Group, or email it to an individual. Follow this tutorial to add it to your Blogger Blog.

Configure how your Send button should look like, using the options below, and then continue following the instructions in this tutorial.

Color Scheme
Font
Float
Location of the Button
Display

Demo

1. Login to your Blogger Dashboard, and navigate to Design > Edit HTML.

2. Click on the checkbox  which says “Expand Widget Templates”

3.  Look for <data:post.body/> and immediately below that paste the following code.

<div>
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:send expr:href="data:post.canonicalUrl" font="arial" colorscheme="light"></fb:send>
</div>

5.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

image This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

6. Save your template, and now you should have the send button working on your  blog.

Hmmmm I want something more than the plain send button!!

In that case, you can use the Facebook like button which can accommodate a send  button along with it. To know more about the usage, refer the following post.

1. Facebook Like + Send Button for Blogger

22 comments :

  1. i have added..wow you make this simple...ck ck ck
    thank you bos \m/

    ReplyDelete
  2. Good to see this feature from Facebook :)

    ReplyDelete
  3. thats cool
    btw, i still wondering how did you put adsense between post on homepage..
    im very peaceful for you wanna let explain it, please...

    ReplyDelete
  4. Real nice Blog!
    We hope you'll join us in our blog "Bacheca Vintage", as we've done with yours, if you'll find it interesting!!

    Bye ;)
    Bacheca Vintage

    ReplyDelete
  5. iframe src="http://www.facebook.com/plugins/comments.php?href=example.com&permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"

    i wanna ask what code for blogger to replace " href=example.com&permalink=1"


    TQ

    ReplyDelete
  6. you make everything easier, thanks for the tricks< I have succesfully added this bfacebook send button on my blog :D

    ReplyDelete
  7. If the Send button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

    ReplyDelete
  8. hey,there is no in my blog's html..
    pls help

    ReplyDelete
  9. Hi admin this facebook send button is very useful and sharing any post with facebook easily.

    ReplyDelete
  10. പ്രിയ സുഹൃത്തേ , എന്റെ ബ്ലോഗില്‍ ഈ ബട്ടണ്‍ വര്‍ക്ക്‌ ചെയ്യുന്നില്ല എന്തെങ്കിലും പോം വഴി ഉണ്ടോ ? അറിയിച്ചാല്‍ ഉപകാര പ്രദമായിരുന്നു ..നന്ദി

    here is my blog

    http://malayalambloghelp.blogspot.com/

    ReplyDelete
  11. @Noushad Vadakkel - sorry for the late reply.. i see that its working now.. :)

    ReplyDelete
  12. Also ask how to set up a tumblr button to blogger blog

    ReplyDelete
  13. Can't find the right place to put the link :(

    ReplyDelete
  14. but i can not find in my temple !!!

    ReplyDelete