Tutorials

Using the new Facebook ‘Send’ button with WordPress

by 32 Responses

It was only a year ago that Facebook introduced us to the now ubiquitous ‘like’ button.

And now, they launched the new ‘send’ button so that we can all add to the list of sharing tools we have at the top or bottom of all of our posts.

So what does it do, you ask?

The ‘send’ button is Facebook’s way of encouraging users to use Groups and Messages. This is because now with the click of the ‘send’ button, you can easily send a message to all members of a group (or to individuals as well) with a link to the blog post or site content you want to share.

This is different than the ‘like’ button as the ‘like’ button shares content with all of your friends, not just  a select number or group.

And each ‘send’ also counts as a ‘like’ for those that keep score of how successful a post was that way.

You can see it in action at the bottom of this post!

How to add it to WordPress

While I’m sure a plugin or two for this is coming our way, some of us prefer a more hands-on approach for the maximum in customization.

And this hands-on approach is pretty easy too :)

The following steps will add the like and send button together wherever you like in a post:

1. Ignore the handy tools available on the Facebook Developer site – they don’t like WordPress and won’t work for you.

2. Copy the following code:

1
2
3
4

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450" send="true">
</fb:like>

3. Go to Appearance > Editor in your site’s dashboard. For you MultiSite network administrators you would go to Network Admin > Themes > Editor. You could also do the following using your favorite FTP client.

4. Look for loop-single.php or single.php. This will depend on the theme you are using, but what we are looking for is known as the loop.

5. Paste the code from step 2 somewhere in the loop. Do a CTRL-F search for “entry-content” and paste it right above the <div> to put the like and send buttons before all of the text in your post.

6. You might check here for some attributes you can use to customize the look and feel of your buttons too.

Stay-tuned to WPMU.org and we’ll let you know about the best WordPress plugins for ‘send’ as soon as they are released.

What do you think about this new feature from Facebook? Do you plan on sending any links to your friends or adding it to your site?

We’re not totally sure that the extra steps for readers to choose friends and type a message, coupled with the extra choices (do I like, send, tweet, etc.), is the way to go yet – but let the testing commence!

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

Comments (32)

  1. There are way too many buttons of late. I’d call this an overkill. Besides, the like button simply does the job.. Share to EVERYONE!

    I wonder how many webmasters will be up for adding this new button and what the other reactions are going to be.

  4. I inserted to my single.php, nothing seem to be appearing… Do we need any FB developer app? I tried adding some text for debugging before and after the FB like/send code, that appeared, so I think I inserted into the correct place. Will this have any conflict with plugins such as WPMinify?

  5. huh.. oh well i don’t really think a send button would be useful.. that could even create some spam on facebook ((i mean spam like in a way that u would get many many messgs from friends that you don’t even want to receive))

  6. Thank you! This was very helpful. I’ve been looking most of the day for a WordPress plugin that would do this. All of the ones I tried didn’t work. This is simple and to the point. Thanks again!

  7. @Valerie – Glad we could help!

    @Steven – We have WPMinify activated on this blog too, so doubt that is the problem. Since every theme is so unique, it’s hard to tell, but I would try the code in many different places – but it has to be in “the loop” for the permalinks part to work.

  8. @Ronnie,

    I was wondering if there was something I could add to the code that allows me to choose the featured image. I have the featured image selected in WordPress, but it looks like it doesn’t transfer over to Facebook.

  9. I added just right before the content part, after the title. So I assume that is the loop. I think there is a conflict somewhere because I created a send.html and inserted the code. It worked great.
    BTW how do we let the user select images that are in the post? And do we need APPID? (a lot of implementations require it…)

  10. @Steven & @Valerie – You would have to set the image using Facebook Open Graph (http://developers.facebook.com/docs/opengraph/) which is beyond the scope of this post – but perhaps we can work up a plugin or post for that in the near future.

    And no APPID is needed for this to work at all. And for the loop, there is some code here that describes the beginning and end of it – but I agree that it can be painful to find: http://codex.wordpress.org/The_Loop

  14. I believe Facebook is focusing more on user friendliness and to make things private within community & friends, and I think this would eventually out burden “Share”& “like” buttons as well. However, this move by Facebook could be in response to the latest Google+1 service launched by Google.

  15. I might be stupid… but I don’t like the “Like” button. As a user, I don’t know if I am liking the page or liking a group or page. The term “like” is used for both of these actions and it isn’t immediately obvious what I am doing when I click on “like”?? Does anyone else know what I mean? I prefer to change like to “Recommend” and keep the “like” term for liking my facebook page.

  18. @ed Use the iframe instructions I linked to above and you can easily edit the height and width attributes. Not sure what you mean by weight. You should be able to add attibutes to the div code by following the Facebook developers link Ronnie posted.

  19. Sorry I meant width…but with the above div code I was unable to change the width or height….using height=”20″ does not work…maybe I’m using the wrong attribute.

  22. I used the send button above and sent myself an email above and naven’t received anything yet, then I tried aanother one, and nothing yet.

    I don’t see why people are saying this is no different to the ‘Like’ button. This gives you the opportunity to let people know that you select and add in emails, so it is not the same thing at all.

  23. I’m using the Like Button for Dummies plugin and it won’t work with my Facebook Comments for WordPress plugin. I’m going to try some other combos, but am hoping for something simple that I can instruct my clients to do themselves (like activate a plugin). Any ideas?

  24. @sheri – We’re working on just such a plugin at WPMU DEV. Hopefully it will be ready pretty soon and we’ll be sure to announce it on the WPMU.org blog. :)

Participate