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:

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

Facebook send dialog

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

facebook 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

facebook like plus 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
 standard like button layout standard

450px

facebook like button count button_count

150px

facebook like box count[5][1] box_count

110px

standard like button recommend action recommend

n.a.

standard like button dark 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!

69 comments to "How to add Facebook Send button to every post"

Mary April 28, 2011 at 7:46 AM    

Thanks for this - I tried to get the code yesterday, but FB was kinda not responding to me!

Unknown April 28, 2011 at 9:06 AM    

It doesn't work in my template. I have the old iframe code for the like button. I took that one off and put the new code, but nothing shows up. It works on my other blog, but not this one. Have any ideas why?

Greenlava April 28, 2011 at 9:44 AM    

@Mary
The button is working now...except for the popup dialog being cut off (I was having the same problem too). Maybe you want to move the button more towards the center.

Greenlava April 28, 2011 at 9:46 AM    

@Bonny
Which blog is that? The URL?

daus April 28, 2011 at 11:03 AM    

replace

with



to display only on post :) kekeke

Unknown April 28, 2011 at 12:02 PM    

http://www.quicktattletails.com/ it won't work on this one.

Sunah Sakura April 28, 2011 at 12:57 PM    

I also cannot apply this button to my blog post...seems like the template cannot use the xfbml code...

URL: www.sunahsukasakura.com

Attention à la Terre April 28, 2011 at 3:40 PM    

Thank, and if you agree, I just say that for French or other langage : (change /en_US/ by /fr_FR/)
How do I display the Send button in different languages?
If you are using the XFBML version include the language code when you instantiate the library. Replace ‘en_US’ in this line with the correct locale code:

'//connect.facebook.net/en_US/all.js';

Unknown April 28, 2011 at 8:31 PM    

not working with me!

Haz Issac April 29, 2011 at 4:14 AM    

ok jadi.. thanks.. kalau yg guna facebook like versi baru macam dekat blogpost sy, macamana nak tambah button send?

Blog Help April 29, 2011 at 4:51 AM    

Hi Greenlava :)

In the code for "Installing a standalone Send button" it's a little problem and the code doesn't work.
You probably misstyped, instead of: Send button End –> it should be Send button End -->

MicroSourcing April 29, 2011 at 9:06 AM    

It's always a problem when one teeny details in a code gets messed up. But putting an FB button for every post really helps make your blog more interactive.

Greenlava April 29, 2011 at 9:10 AM    

@Bonny, Sunah Mohammad and darxniq
There were bugs in the standalone Send button code. I've since debugged it. Try copy pasting it again, it should work now.

@Attention à la Terre
Thanks for the tip :)

Greenlava April 29, 2011 at 9:18 AM    

@Haz Issac
Like versi baru, yang mana tu?

@Blog Help
Thanks for pointing that out. I really appreciate it.

Noridah April 29, 2011 at 11:53 AM    

thanks for tip will apply on my old blogspot blog. Dah lama tinggal blog tu sejak guna domain dan hosting sendiri.

Muneer Ahmad April 29, 2011 at 1:02 PM    

Thanks for the post Greelava,

Is it possible to customize the text "13 people like this. Be the first of your friends" ?

Emenike Ojiako April 29, 2011 at 2:10 PM    

I tried but it did not work out. I got this message below for standalone code

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.

Your comment box did not allow me to paste the Tag displayed along with the error message

Emenike Ojiako April 29, 2011 at 3:19 PM    

Greenlava thanks for the nice jobs u're doing for bloggers.
Can you write tutorial on this please
How To Add Facebook Comment Box To Blogger Blogs

nisheeth April 29, 2011 at 5:44 PM    

Thats so nice of you..A wonderful tip..I will try this on my blog..Thanks..

Joe Simmons April 29, 2011 at 6:29 PM    

The code seems to work wonderfully for putting the like and send buttons at the bottom of each post. But the problem is that the Like and Send only refers to the main page, not the individual posts' permalinks. So, it only totals the likes for the whole blog, rather than one post. Is there a way to fix that? Thanks.

Greenlava April 29, 2011 at 8:27 PM    

@Noridah
You're welcome.

@Muneer Ahmad
No I'm afraid that's not possible.

Greenlava April 29, 2011 at 8:34 PM    

@Emenike Ojiako
When did you try it? There were bugs when I first posted this tutorial, but I've fixed it and retested. It's bug-free now.
A ptutorial on How To Add Facebook Comment Box To Blogger Blogs? I'll look into it :)

Greenlava April 29, 2011 at 8:46 PM    

@nisheeth
You're welcome.

@Joe Simmons
It does refers to the individual posts, not the homepage.
The "expr:href='data:post.url'" in the code ensures to that.

Haz Issac April 29, 2011 at 11:24 PM    

ada dalam setiap post sy.. boleh check :) kalau tau caranya, tolong ajar..

Joe Simmons April 30, 2011 at 2:03 AM    

@Greenlava: It just doesn't seem to be working for me. If you get a chance, check out my blog:

http://slowjoe12.blogspot.com

I have your code installed right now. But see how on every posts it totals the likes for the entire page, not just that individual post? And the send button only sends the main page as well. Do you have any idea what I might be doing wrong?

Thanks!

Greenlava April 30, 2011 at 2:33 AM    

@Haz Issac
Ha Like button biasa je tu. Cuba cari kod yang macam ni:
< iframe..bla bla bla.../>
Gantikan kod tersebut dengan kod dalam step III.

Muneer Ahmad April 30, 2011 at 3:05 AM    

Ok thanks,

Greenlava April 30, 2011 at 3:18 AM    

@Joe Simmons
These are the culprits -the Facebook open graph meta tags (that you added I presume):

[meta content='Joe Simmons. Comedian. Humorist. Loserist.' property='og:title'/]
[meta content='blog' property='og:type'/]
[meta content='http://slowjoe12.blogspot.com' property='og:url'/]
[meta content='http://a0.twimg.com/profile_images/1313248433/OffTheHook_1.jpg' property='og:image'/]
[meta content='Blog' property='og:site_name'/]
[meta content='500757816' property='fb:admins'/]

By putting these meta tags in your template, you're actually telling Facebook to use those data on all of your pages. In other words all pages (posts, static pages etc.) sharing the same data.
To fix it:
Try removing the og:title and the og:url meta tags. Without these tags Facebook should get the correct data. These new data will take effect after 24 hours.
But I doubt you can wait 24 hours to see if works or not :)
Here's what you do -take a permalink of a post, run it through Facebook URL Linter,and finally go to the post and test the button. If the button works on that post the it should also work on other posts (after 24 hours).

Greenlava April 30, 2011 at 3:22 AM    

Facebook should get the correct data ==> Facebook should get the correct post title and post URL data

NourlHousna Tawfiq April 30, 2011 at 3:54 AM    

the best guide ever!
keep up the good work!

Joe Simmons April 30, 2011 at 5:49 AM    

@Greenlava: First off, thank you VERY much. You've already helped more than you had to. I owe you a beer or something. Hey, actually, I 'll link you whenever I get my stupid page working. :-)

But the bad news: It's still not working. I removed the two tags, as you suggested. But when I run it through the facebook Linter it still shows a Like button with the Likes from the main page, not the individual post. Also, the Linter showed:

Warning
Required Property Missing og:title is required
Required Property Missing og:url is required

Do you think waiting 24 hours will help? Or does the Linter show how it's processed immediately? I can't understand why only my blog is having this problem.

By the way, I also tried deleting [i]all[/i] the meta tags I added, and it still didn't help.

As of right now, it's back to the way it was, minus the two meta tags. I guess I'll wait out the 24 hours, unless you think it won't help. If you have any other suggestions, I'll be more than happy to try them.

Thanks!

Greenlava April 30, 2011 at 1:52 PM    

@Joe Simmons
Try removing all open graph meta tags, except the one for og:image. (BTW I only use this tag in this blog, to prevent Facebook from fetching a image at random)

Haz Issac April 30, 2011 at 2:55 PM    

thanks GreenLava atas respon yg sgt cepat.. good job n thanks for helping! jadi dah :)

praizJosh May 1, 2011 at 12:02 AM    

Thanks for the update Greenlava. Really like your blog

Beben Koben May 1, 2011 at 5:06 AM    

interesting...facebook can other way to famous of blog

Joe Simmons May 1, 2011 at 1:46 PM    

@Greenlava: Well, I simply left it alone for 24 hours, and it seems to be working! Curiously, two of the most recent blog posts are still incorrect, but all the others seem to be tabulating data for just their individual entry. I guess facebook scraped it.

I just want to thank you again for all of your help. I may yet remove all of the meta tage except for the image one, but for now I'll leave it be.

Joe

Haz Issac May 2, 2011 at 4:50 PM    

kenapa send button tu kejap ada kejap tak ada? sy pun send dan like button dah ilang dah.. kenapa ek?

Greenlava May 3, 2011 at 1:03 PM    

@All readers
Please read the latest update at the beginning of the post.

hackrishna May 4, 2011 at 5:43 AM    

@Greenlava ... Thank You 4 the Update ..

Do you know how to Change d Background of the Frame that appears on the Click of the Send Button using Facebook API ... :P
or the Image while sending to Facebook.. (http://i56.tinypic.com/4gj21h.jpg)

It would have Been a great help ... :)

Prashant Rohilla May 4, 2011 at 11:58 PM    

Hey thanks for the trick and help !

Greenlava May 5, 2011 at 12:47 PM    

@hackrishna
Put this Facebook open graph meta tag in the [head]...[/head]

[meta content='PUT YOUR IMAGE URL HERE' property='og:image'/]

However with this meta tag on, Facebook will use the same image for all posts!

Hemanth Kumar May 15, 2011 at 3:16 AM    

Hey Greenlava, thanks for detailed explanation of how to add facebook button to blog. I am searching for this. Awesome article

Peter June 1, 2011 at 8:45 PM    

Many thanks for this! Is there any way how to let the "dialogue" box (once you clicked on the "send"-button) pop up to the left? I want to have the send-button in a right-handed module so if it pops up I cannot read the whole text. Thanks!

Greenlava June 4, 2011 at 12:56 PM    

@Peter
I don't think you can change that :(

Asfan Ash June 7, 2011 at 7:15 AM    

its not working on static pages. yeah, it works on all other pages but not for static pages. When I click send, it was sending the homepage rather than the static page

Global Insyaka Resources June 7, 2011 at 10:55 AM    

i can't find code



help please

Greenlava June 7, 2011 at 2:30 PM    

@ARC™
That's because your open graph meta tags lead you to the homepage:

[meta content='BLOG ARCX13.COM' property='og:title'/]
[meta content='http://www.arcx13.com/' property='og:url'/]

Greenlava June 7, 2011 at 3:34 PM    

@Global Insyaka Resources
Make sure you tick the Expand Widget Templates checkbox first.

SyedAbuSayyaf June 29, 2011 at 4:30 AM    

bangus banget kamu punya tips... terima kasih daun keladi...

SyedAbuSayyaf June 29, 2011 at 10:48 PM    

salam sejahtera, macam mana mahu buang confirm button bila klik pada like?? boleh kah hanya like dia terus confirm tanpa ada pop up ??? terima kasih atas bantuan..

Greenlava June 30, 2011 at 12:54 AM    

@SyedAbuSayyaf
I don't think that's possible.

Felix Pablo August 16, 2011 at 10:28 AM    

saved my life

Lila Vee September 6, 2011 at 2:46 PM    

nice!! thanksss =)

Akansh October 3, 2011 at 12:18 AM    

Is canonical i causing this problem

santhosh November 3, 2011 at 4:23 PM    

Awesome blog! Thanks for sharing this info. I will visit your blog again to check your new articles.

Dell November 16, 2011 at 12:57 AM    

I can't even find after scrolling two miles of code from top to bottom THREE times. Could you give a hint as to where one might normally look? I like the tutorial, but when I can't past the first step it's really annoying. Thanks!

Greenlava November 16, 2011 at 1:29 AM    

@Dell
Have you checked the Expand Widget Templates checkbox before looking for the code?
And you might want to use the browser search function (by pressing Ctrl+F) for that.

Dell November 16, 2011 at 1:35 AM    

@Greenlava
Yes, I found the "expand" box and checked it. Then I started scrolling but still haven't located whatever it is I was looking for. Using the browser search function simply does not compute to me. I have no idea what that means. It's really awful to be old.

Dell November 16, 2011 at 1:45 AM    

Greenlava, don't waste your time on me. I give up. But thanks for your quick response and attempt to teach an old dog new tricks.

Greenlava November 16, 2011 at 10:58 PM    

@Dell
I'm not giving up just yet :)

To invoke the search bar, you first press CTRL key and F key simultaneously.
Having done that you should see a bar at the bottom (or top) of your browser window, with the word "Find" on the left side of the bar.
Enter the search term "data:post.body" (minus the quotation marks) in the text field next to "Find" and hit Enter key.
The browser should take you to the first occurence of "data:post.body" and highlights it.

Suresh November 24, 2011 at 3:09 PM    

Its a different concept....
lets see....

Rajnie,  December 16, 2011 at 10:09 PM    

Thanks for your Tip. I was trying many ways to do this. Did not realize it was very simple.

Cheers! :)

JC Lamont January 29, 2012 at 4:13 AM    

After 2+ hours of trying to get this to work, i found this site and within 5 minutes it was working. Thanks!

Elizabeth Perrigin February 28, 2012 at 2:10 AM    

I've tried everything with this FB Send/Like Button Java script to get it to work on my blogs. Nothing seems to do the trick. When I add it to any of my blogs it conflicts with a few other Java scripts. An example is on http://myhowtogoogle.serveblog.net, after adding the send button script the G+ in the slide bar does not show and the FB login button disappears in my left sidebar and the Facebook send/like button still does not show below the post. Something else I noticed is that when I go into my HTML in blogger there are two data:post.body tags.

Unknown March 1, 2012 at 5:30 AM    

Excellent information for bloggers. I got a great help from these step by step tips. Really you have done a great job....!!!

Peter Zmijewski March 6, 2012 at 7:14 PM    

I bookmarked this blogging which helps me a lot excellent info with step by step points which I will apply on my aacount.Thanks!!!

Facebook doesn't allow you to add send button for every page of blogger by default, but you have tweaked it very well.

Best Regards!

lookwhoswearing May 15, 2012 at 2:43 AM    

Hi there. I tried everything you said in the comments as well but I cannot figure out for the life of me - why FB keeps sending the Main blog instead of individual posts and if you like one post - it like everything. I couldn't find any og tags either. :(

I'm here:
www.lookwhoswearing.com

Greenlava May 16, 2012 at 10:57 PM    

@Gayatri
Recheck the content of code line 16. Make sure you have expr:href='data:post.url', and not expr:href='http://lookwhoswearing.com' or href='http://lookwhoswearing.com'

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.