Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Facebook Send Button in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Add Facebook Send Button in WordPress

Previously, we showed you how to add the Facebook Like Button in WordPress. The like button allowed your users to like/share your blog posts with their friends on Facebook. Recently, Facebook has announced a new addition to this like button known as the “Send button”. The send button allows your users to share your blog posts with their friends that are on Facebook as well those who are not on Facebook. They can also use the send button to send the message to Facebook Groups that they are part of. Think of this as an email-this button on steroids because it has the social touch to it. Each send counts as a like on Facebook. When someone likes a post, it is shared with all of their friends. But due to hundreds of friends that each person has, the news feed is crowded with so many other things causing your post to be ignored most of the time. The Send button is here to solve that problem because now users can actually suggest your post to a selected friends / groups which will allow you to get GUARANTEED exposure as most people check their Facebook messages. In this article, we will show you how to add the Facebook Send Button in your WordPress blog.

Note: Sometimes, Facebook doesn’t show the right thumbnail image, or the right title by default. To prevent that issue, you should add Facebook Open Graph Meta Data in your WordPress.

Now that you know that this is useful, lets add it in your WordPress posts. First open your single.php file in your theme’s folder, then paste the following code inside your loop (In some themes, you will need to locate loop.php file to do this):

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

But the problem with above code is that it is not the best method. Facebook Send Button can only work well when it is in combination with the like button because without it, it has no social effect. So let us show you how to combine the like button and Send button in one like we have it in this post above.

<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>

As of now, the send button does not work with the iFrame version of the Like Button, so you would have to use it this way.

Once you paste the code, you are done. You should see something like what we have at the top of our post. (Click on the button to see its functionality )

There are other parameters and options for this plugin.

If you want to show the friend icons under the button, then you should use the parameter:

show_face=true

If you want to display the simple button with only the count and nothing else, then you want to use the parameter:

layout=box_count

If you want a darker color scheme for your button, then you need to use the parameter:

colorscheme=dark

If you want to change the text from Like to Recommend, then use the parameter:

action=recommend

We think that this send button will be very helpful. Because it is very new, we do not have the data to present it to our users on how much it is helping us, but if you subscribe to our newsletter, then you can be sure to receive updates about this and other cool marketing tricks that will help you grow your blog.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. harsh says:

    how can i add this button in my wordpress website..in single.php which section should i paste this code?

  2. tuffluvxpress says:

    why when I add the like and send button on my site when I test it and try to add something, Half of the box appear at the back of the page and I can see the small send box, please help

    • wpbeginner says:

      Not sure what you are talking about there. Any way you can maybe take a screenshot and paste it to an image upload service then paste a link here.

  3. wpbeginner says:

    @prakhar.code nope.

  4. prakhar.code says:

    Can this code be implemented on wordpress.com blogs?

  5. Jimmy says:

    hi,
    I just implement the like/send button on a site, I use the code generated in developers.facebook.com, but the “Send” button is not display, only the like/recommend button, do u have an idea?

  6. Earl B Russell says:

    So I’d prefer not to receive these commercially-oriented announcements. Thanks!

  7. Earl B Russell says:

    Is it correct that plugins can’t be installed on the free version of WordPress? If so, that should be made clear at the beginning of any plugin announcements.

    • Editorial Staff says:

      Yes you are correct, plugins are not allowed on free version of WordPress. However, it is not the plugin author’s responsibility to add that in announcement. It should be made clear on free version of WordPress site. We have an infographic that shows you the difference between Self Hosted WordPress vs. Free WordPress.com Sites.

  8. ed says:

    I’m using the Smart Share plugin…how would I add the facebook send button to the plugin (like your site).

  9. Kavita says:

    I have just now added the code to my post pages and am eager to see the results.

  10. hawdy says:

    i tried your code in single.php and it work well. But, i want to add it at sharebar plugin. and it appear nothing.. How to add send button in sharebar like in this site? thanks in advance

  11. Earl B Russell says:

    Is it correct that this new Send Button feature does not work on the free, simpler version of WordPress that I’m using?

    If so, that point needs to made upfront and repeated often in the article above.

  12. Kevin Yang says:

    Hey, I like this site. very good for a new blogger like me. I just want to know, do you offer customized wordpress editting?

  13. FAQPAL says:

    Another Facebook button? Like Harsh, I will have to think about this one, seems to be too many buttons and widgets from Facebook as is.

  14. jessi says:

    its totally new,i would like to try it..presently im using facebook like and facebook share….thanx for sharing your knowledge.

  15. Lincoln Adams says:

    They’re deprecating the FBML language so eventually the send button code will have to be updated to use the iFrames version instead, which is still nonfunctional. Leave it to Facebook to release a new feature that only works using outdated code.

    In addition, using the Send button can produce some strange redirecting quirks in IE7/8 that I was only able to resolve by switching over to iFrames. And this is using the code straight from the FB developers page too (with the exception of adding the necessary WordPress tags of course.)

    Anyone using the Send Button might want to check how it appears in IE7/8 just to ensure it’s not borking anything there.

    • Editorial Staff says:

      They deprecated Static FBML, so that no new applications can use it. The switch was from FBML to XFBML. Haven’t seen the news of XFBML being deprecated yet, so can you please point us to your source. The code above is using XFBML.

      • Lincoln Adams says:

        Ah, thanks for clearing that up, no I haven’t seen anything about XFBML either, I only now learned there was a difference.

        I double checked and the code I used that was creating problems in IE7/IE8 was XFBML, so this is a potential issue that can still arise for some users. I think it depends on the makeup of your site (what JS scripts you’re using etc.) so YMMV.

  16. jean says:

    Thks alot! very useful

  17. Sharon says:

    great tip! I hadn’t heard about the send button. Thanks as always

  18. hafid says:

    hi , i’ve done it and it 100% working … thanks a lot

  19. ed says:

    Can’t adjust the height with the code?

  20. Joan says:

    Thanks, i implemented it on my site changing en_US for es_ES, one thing i don’t like is in the send option they don’t have the possibility to choose what thumbnail send :(

    • Editorial Staff says:

      The thumbnail can be chosen by using the og: tags in your header. You can’t offer multiple images (you are right about that).

  21. Anand Kumar says:

    Now their should be all in one button (official) for Facebook!! Why sjould We add 3 different button for a single site. :(

  22. Harsh Agrawal says:

    I’m still considering if I should add this new button or not.. I already have Fb like and share count button.. One more FB button..I have to rethink….

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.