Facebook send button for Blogger

Posted by Unknown on

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

Comments

  1. MiyengMay 16, 2011 at 9:22 AM

    nice info. thanks :)

    ReplyDelete
  2. SIR GamesMay 16, 2011 at 1:59 PM

    nice! xD

    ReplyDelete
  3. kathy barnesMay 20, 2011 at 12:07 PM

    i think the info. is good to

    ReplyDelete
  4. Beben KobenMay 20, 2011 at 4:57 PM

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

    ReplyDelete
  5. rajinder singhMay 20, 2011 at 11:15 PM

    thanks! facebook plugins rocks

    ReplyDelete
  6. FaisyMay 23, 2011 at 5:36 PM

    Good to see this feature from Facebook :)

    ReplyDelete
  7. nino houMay 24, 2011 at 8:17 AM

    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
  8. AnonymousMay 25, 2011 at 2:10 PM

    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
  9. ymnMay 26, 2011 at 4:05 PM

    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
  10. UnknownMay 26, 2011 at 11:14 PM

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

    ReplyDelete
  11. tab2tabJune 1, 2011 at 3:11 AM

    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
  12. Deepak Kumar JainJune 18, 2011 at 9:15 PM

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

    ReplyDelete
  13. rahmat.buyungJuly 5, 2011 at 12:41 PM

    thanks

    ReplyDelete
  14. Mari BersholawatJuly 30, 2011 at 3:53 AM

    Good

    ReplyDelete
  15. SepuluhjarikuAugust 6, 2011 at 11:42 PM

    Very helping us much, thanks

    ReplyDelete
  16. Anil singhAugust 14, 2011 at 6:34 AM

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

    ReplyDelete
  17. Noushad VadakkelAugust 21, 2011 at 8:34 PM

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

    here is my blog

    http://malayalambloghelp.blogspot.com/

    ReplyDelete
  18. Richdad PhúcAugust 26, 2011 at 7:51 PM

    Very good

    ReplyDelete
  19. UnknownAugust 30, 2011 at 9:32 AM

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

    ReplyDelete
  20. ryuSeptember 11, 2011 at 3:56 AM

    Also ask how to set up a tumblr button to blogger blog

    ReplyDelete
  21. Coupon NurseJanuary 10, 2012 at 6:27 AM

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

    ReplyDelete
  22. UnknownJune 28, 2013 at 10:27 PM

    but i can not find in my temple !!!

    ReplyDelete

Post a Comment