Contact Us
  • How to Add Facebook's Like Button & Social Plugins to your WordPress Blog or CMS

    FacebookUPDATED: Nov 24, 2011

    Since Facebook introduced the Open Graph protocol and Social PluginsSocial Plugins at the April 2010 f8 Developers Conference, they have evolved the way these plugins are implemented.

    This tutorial has been updated to reflect these changes.

    NOTE: This does involve modifying the PHP files for your WordPress installation. Make sure you save the originals in case anything goes amiss.

    If you’re not comfortable editing your WordPress source files, a number of WordPress plugins for Open Graph are available to handle this for you.

    Step 1: Get an App ID for your WordPress CMS or Blog

    To make your WordPress website or blog an “object” in Facebook’s Open Graph, you first need to get an App ID for your site or blog.

    Read my tutorial on getting an App ID for your website or blog.

    After you have successfully set up your blog as an application “object” in Facebook’s Open Graph, you then need to add the appropriate <html> and Open Graph meta tags to your site pages.

    Step 2: Add Open Graph Meta Tags to your WordPress Blog Header File

    You’ll need to add the meta tags to your “header.php” file located in your theme’s folder (wp-content > themes > [your theme] > header.php).

    You’ll need to add a couple new values to the <html> tag of your header:

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">

    And then add the following meta tags (taken from our blog) to your header.php:


    <meta property="fb:admins" content="YOUR-ADMIN-ID"/>
    <meta property="fb:app_id" content="YOUR-APP-ID" />
    <meta property="og:type" content="article" />
    <?php if(is_home()) {
    ?><meta property="og:title" content="My Blog Name" /><?php
    } else {
    ?><meta property="og:title" content="<?php the_title_attribute( $args ); ?>" /><?php
    }
    ?>
    <?php if (is_home())
    echo '<meta property="og:url" content="YOUR-BLOG-URL" />';
    else echo '<meta property="og:url" content="'.get_permalink().'" />';
    ?>

    fb:admins

    Replace YOUR-ADMIN-ID with your Facebook User ID. Read these instructions on how to find a Facebook user’s numeric Facebook ID.

    fb:app_id

    Replace YOUR-APP-ID with the Application ID assigned to your blog when you set it up on Facebook, as described in this article (referenced above).

    og:title

    For the “og:title” attribute, you’ll want this to return the title for each blog post. As you can see from the above example, this simply involves a bit of PHP code that pulls in the post’s title.

    og:type

    As you see above, I utilized a PHP conditional statement in header.php to have the <meta property=”og:type” content=”blog” /> tag for the home page and the <meta property=”og:type” content=”article” /> for individual posts. This comes by way of Otto who has an excellent blog on WordPress, as well as a Facebook Connect plugin for WordPress. And this approach is also supported in this GitHub post.

    As for the implications, in terms of Insights and the display of Pages in your “Home > Ads and Pages” section of your personal profile, we’ll have to wait and see.

    You’ll also need to add the <fb:like> XFBML to your index.php file for your theme, as well as the call to the JavaScript SDK. I added it as the first content after the “main-content” DIV. You will then see the Admin Page option next to the Like button.

    og:url

    I used some PHP to set the URL for our blog’s landing page to the blog URL set in the application (YOUR-APP-URL). On the individual pages or posts, it will fill in the Permalink for the page/post. In “single.php” (for individual blog posts) and “page.php” (for pages), we omit the “href” value in the “Like” button code (fb:like).

    og:description

    The “og:description” meta tag: If you omit this meta tag, the value will be the “description” meta tag for the post, and that is what will show up as the description on a user’s Facebook profile when they “Recommend” or “Like” your post. (We use the WordPress SEO plugin Headspace which gives you the ability to create custom title and meta tags for each post. Highly recommended!)

    og:image

    This is simply the full/absolute URL to the image you want to have appear when someone “Likes” your page and it’s added to their personal profile stream. We omit this meta tag so that it uses the lead image from the blog post.

    The below image is from my profile after I “Liked” this blog post:
    How a Facebook Like shows up on a User's Profile

    The orange logo is the logo pulled in with the “og:image” meta tag (make sure you make this value the FULL URL to the image!).

    The title of the post is linked in blue, and the description meta tag content is the description below the title. The “I like this post!” is the comment I added to the Like.

    And that takes care of the meta tags. There are a number of additional social graph meta tags you might want to check out.

    Step 3: Add the Like Button or other Social Plugins to your Individual WordPress Posts or Pages

    First, as mentioned earlier, you must add a call to the JavaScript SDK, if you use the XFBML/HTML5 version of the social plugin (which I recommend).

    You will add the below code right after the opening <body> tag, which is usually in “header.php”. In some WordPress themes, it may be in “single.php.” Yes, WordPress themes vary!

    <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR-APP-ID";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    Adding the Like Button to your Individual WordPress Pages

    Facebook generates the Social Plugins code for you, on its Social Plugins page.

    You should choose one of the two flavors of XFBML, either HTML5 or XFBML. If you use the iFrame version, you won’t get user-interaction data via Insights, and users won’t be able to add a comment to the Like they make.

    However, for users who can’t modify their WordPress code, either the iFrame method or the use of a WordPress plugin will be their only options.

    The Social Plugins you can use on your blog are:

    For each plugin you wish to add to your WordPress blog or CMS, simply visit the plugin page, add the parameters into the “configurator” (as Facebook calls it), then click the “Get Code” button.

    Facebook now enforces your associating the plugin with an existing App ID that you admin. You will probably want to associate with the Facebook application you created for your site or blog to get an App ID, and your site should appear in the pull-down menu next to “This script uses the app ID of your app”.

    Just add the code Facebook provides for your plugin where you want it to appear on your WordPress posts and/or pages. This will involve editing index.php and single.php.

    To add a Social Plugin to each post (commonly the Like/Send buttons), you will need to edit the single.php file:

    wp-content > themes > YOUR THEME DIRECTORY > single.php

    For the HyperArts blog, I put the Like/Send Button code just before the <div class="entry"> ... </div>. (I created a new DIV to contain all the social buttons on our posts — Google+, LinkedIn Share, Twitter Button and the Like/Send Button.)

    Add the Like button to Pages by adding the above code for Posts — but with the below code for <fb:like> tag where the only difference is the PHP code for the “href” value — to the page.php file (wp-content > themes > YOUR THEME > page.php). For our blog’s theme, I put the code just before the closing tag of the <div class="entry"> ... </div>:

    <fb:like action='like' colorscheme='light'
    layout='standard' show_faces='false' width='650' send="true"/>

    After saving your changes to the “single.php” file, you should be ready to go.

    “Like” or “Recommend”?

    For our blog, which contains more how-tos and tutorials than editorial content, I originally used the “Recommend” button, but decided that users were more familiar with the “Like” so I settled on “Like.”

    Further Resources

    Comments

    1. This was a great tutorial on adding the new “Like Button” to your WordPress blog. Thank you so much for sharing this. Having the ability to post comments to Facebook as well as posting comments to your wall is so much better than the simpler IFrame version.

    2. Quick question: I have a wordpress blog. Will this work for a blog hosted on wordpress.com … or will it only work for wordpress blogs hosted elsewhere?
      Thanks!

      • Using the XFBML is really for self-hosted WordPress blogs, not WordPress.com where, as far as I know, you can’t make changes to the files as described above. However, you can probably add the new WordPress social plugins that have quickly shown up to add the new Facebook functionality, although these are of the iframe variety, so a user can’t, for instance, add a comment when clicking the “Like” button.

        • Great tutorial!, I wish I had found it a few weeks ago!

          Note that you can now make an iframe Like that does allow comments(!), just set the width to more than 400. This may be a new feature (not sure), but it works today. It is not as attractive as XFBML, the post box is separate from the Title, and there is no FB pic in the post box (only the one under “likes this”).

          But you can post comments…

    3. Great tutorial – however I can’t get it to work to set the meta property correct. “og:title” seems not to work – it always uses the title tag from my site and not the og:title value. Also the image is not shown up on my facebook page when I click on the recommend button.
      Thanks for any hint
      Andreas

      • You’re using this with WordPress, right Andreas? Send along the code you’ve used in header.php.

      • Thanks for this tutorial, Tim; it was clear and easy to follow.

        I’ve been having the same issues as Andreas and can’t seem to find a single bit of information what’s wrong. Everything works as it should except that the metadata are not being picked up from the og:whatever tags. Instead, the meta information is being picked up from the standard HTML elements and the logo is being picked up from the website’s actual logo.

        (Note, I’ve used the fb:app_id property instead of fb:admins, though I doubt this could cause the problem.)

        Is there any trick that I’m missing?

    4. Hi,

      Thanks for the post, great information. How ‘safe’ is it to register my site with Facebook in order to use the javascript SDK? The reason I ask is that they have, in the past, had a somewhat questionable approach to privacy and ownership/copyright.
      Basically, will my site still be mine or could Facebook claim anything?

      Thanks

      • I know what you mean, but I don’t think there’s any danger here of you losing ownership of your site. You’re simply registering your site or Web page as an “application” so you can run the FBML.

    5. Thanks Tim for your great info.

      I added the meta tags to the Like plugin you mention so you don’t need to code anything, just install the plugin.

    6. Why not entering the code into header.php – this allows you to use the fb-functions anywhere in your wordpress site. (within )?

      • I didn’t add the og:url to the header because I’m using the Like button on both pages and posts. There’s probably a way to put a conditional statement in the head to set URLs based on whether it’s a page or post, but I don’t know what it is. I just set the URL in the code for the Like button for the “href” value.

    7. I tossed the open graph stuff in my header and all works great, i can use xfbml all over the wordpress blog.. BUT my disqus FB Connect option no longer works. Anyone got ideas?

    8. Thanks for the tutorial!

      I have it working on my blog, but now I’m getting new “pages” showing up in my “Ads and Pages” area on Facebook. Is that normal behavior? Will I eventually have hundreds of pages listed there?

      • Yeah, I see that too in my Facebook profile, under Ads and Pages. I plan to do some more testing around the og:url meta tag. As I note, I omitted that tag and leave it to each post’s Like button to deliver the URL of the post. I did this because I also have a couple “pages” and the header.php is common for both pages and posts. Because I use PHP code to get the page or post value, it seemed I didn’t need the og:url meta tag. But if you think otherwise, let me know. We’re all feeling our way here due to the usual lack of help from Facebook in implementing this stuff.

        • OK, cool. I also did the post/page thing so what you have here makes sense to me.

          I just wasn’t expecting that new stuff in the Ads and Pages area. Hopefully they will separate that somehow in the future.

          • Jason, You’ll see in my post that I’ve added some new insight about how to prevent each blog post that is Liked from becoming its own page. See the section just before the “Facebook Social Plugins Resources,” above.

    9. Hello,

      This guide was pretty clear. Thanks for saving us a lot of time :)
      As a follow up, I can tell you I already have my social plugins up and running thanks to your advice, but now FB is creating _a lot_ of pages for each page someone likes!!!
      As I’m the admin, now I see tens of new pages with one “like” (fan). Do you know anything about this? I’m pretty sure this is not ok, but as intent each webpage to be “likeable”, I use each URL to reference it…
      Look forward to hear from you,
      W.

      • See my reply to Jason. Any insight you can provide re my approach is welcome. I feel the same way, that there may be a better way. Functionally, my approach is working great, but I’m not quite sure how to deal with the og:url tag in the case of blogs.

    10. I have implemented the FBML version of the Like Button on my site, but for some reason it will not show the popup to add a comment. This is driving me crazy since that’s really the main purpose of using the FBML version.

      Any idea what I might be doing wrong?

      Here is an example page (Like Button) at the end of the post: http://www.pointsincase.com/articles/merits-of-good-wingman

      • I see your page isn’t a WordPress blog and this post, although generally applicable to static pages, is specific to WP blogs. You haven’t included the “og:url” meta tag. I didn’t include it for reasons specific to blogs, but your page is static, so I’d include that meta tag. Hope this helps.

        • Hmm, I took your suggestion and added the “og:url” tag but it’s still not prompting for a comment. To be clear, the “Like” function works fine, publishing to my Facebook profile.

          Here is a static HTML page (not even running Drupal) that I added the Like Button to (with “og:url” tag) and it’s STILL not working: http://www.pointsincase.com/funny.htm

          Any other ideas?

          • Yes. I see you didn’t add the required values to your <html> tag (although because your site isn’t a blog, you need to put in the language variables, not the PHP code). But I think that’s the problem.

          • Sorry to keep this going, but I’ve added the required tag values (hard-coded, no PHP) and no dice.

            Still stumped…

            • I would try moving the call to the JavaScript SDK:

              <div id=”fb-root”></div>
              <script> … </script>

              to the bottom of the page, just before the </body>. This is what Facebook recommends. Your other stuff seems in order.

            • Still not prompting for a comment. I’ve given up and gone back to a button count-only Like Button and a Share Button next to it until Facebook works out the kinks.

            • Finally figured out why the comments dialog wasn’t showing up, thanks to the author of the Drupal “Facebook social plugins” module:

              It turns out that your facebook app connect URL must much your website’s URL for the comment box to show up. Go on your facebook app page click “Edit Settings”. Then click “Connect”. Make sure that the “Connect URL” matches your domain exactly.

            • Nice. Thanks for sharing this!

            • Sure thing. After reading so many people doing everything right except for this, I’m pretty sure this will solve a lot of people’s comment dialog issues. I’d go so far as to say you might want to edit your main post above to include this info, since the comments are now becoming so extensive.

            • Thanks. I’ll definitely do that!

            • Dude SPOT ON! This had been troubling me ever since. The only problem was my address was http://www.vipulsatya.me/ and connect url was http://vipulsatya.me/ and that made all the difference :D :D Glad i’ve achieved it :) :)

    11. Just read on the facebook dev blog that they advise not to use Like Buttons next for news items or blog posts.

      Isn’t the like button supposed to be animate objects or things…

      http://developers.facebook.com/docs/opengraph#types

      CONFUSED!

    12. Hi Tim

      Yes – they do have an OG type: blogs and websites

      http://developers.facebook.com/docs/opengraph

      Check second bullet point of Best Practices also…

      Further more…

      I’m a bit confused – just installed it on our blog: http://www.iopblog.org

      Under posts where people have liked, we get an admin button.

      Click on this and this takes you to Facebook page created specific to that blog post…

      Is this right? Surely we can’t have a different page for every single post?

      Additionally – I’m having huge problems trying to get a Like Box on another site I run: http://www.homovision.tv.

      If you look at the site you’ll see the problem!

      Thanks for getting back about this.

      Simon

      • I read the Best Practices bullet. If FB specifies an og:type of “blog” then I would assume that assigning Like buttons to blog posts should be acceptable. Our blog posts particularly are not really “transient” info, but good information that is relevant over time. So I don’t think the “Best Practices” is advising against adding the Like button to blog posts.

        See above for newer and better information on using the “og:type” meta tag.

        Regarding the “Pages” that are created when you add a Like button to a post, these are viewable only by the Admin of the page; other users can’t access that “page” and would be directed to the URL of the post.

        I know what you mean about having so many new Pages generated, but there’s a plus side to this. From this Admin page, you, as admin, can manage your fans and publish stories to your fans’ News Feeds. Fans are those who have “liked” the page.

        And when you view the Page via Home > Ads and Pages in your personal profile, you can access insights for that URL.

        I know there’s some of confusion around this, and this could be compounded by bugginess in this new Facebook rollout.

        Cheers….

        • Do you think that this og:type is what is causing the new page to show up in the Pages and Ads area?

          Have you tried it with that setting off?

          • Jason, I’ve got new info on og:type and blog posts. See my post, above.

            I now believe the way to go is have the og:type meta tag ONLY on the blog home page, and not have that tag on individual posts.

    13. Hello there! Very nice help thankyou! Do you think that we can put the javascript in the footer instead of before the <fb:like…etc?!??

      This would maybe help in page speed?

    14. I had installed the Like button plug-in yesterday and it worked, then this morning I have done the plug-in update and everything works fine. I chose xFBML added my ID and my App ID, didn’t have to make any changes to the header at all and it works perfectly including the comment popup and the posting to Facebook. Thanks!

      • To what “plug-in update” do you refer, John? I’m just unclear what you’re saying here. Thanks!

        • Hi. I’ve been trying to get the comment pop-up of the Like button to appear but no luck. I think I’ve added everything that’s needed. http://leparty.com/winningseat/ The application ID I put in there is from an application I’m developping to learn Facebook development and it is not published yet. Could this be the problem

    15. Hi Tim,
      Thanks for the valuable tutorial
      Everything went fine except that I’m not able to see any comments pop up.
      the link is http://www.vipulsatya.me/blog
      According to my knowledge I’ve done everything as per the tutorial still it is not working.
      Any suggestions would be highly appreciated
      Thanks
      Vipul

    16. please look into the issue Tim. A little bit on the urgent side.

      • OK. First, I write the blog posts, but I’m not on demand for helping out and I’m not Facebook! If I can help out, I do, but this is the weekend, fercrissakes….. and your urgency is basically your problem, not mine :)

        I checked out your page and I see you don’t have the “fb:admins” meta tag. I think adding that may help your cause:

        <meta property=”fb:admins” content=”USER ID”/>

        User ID can be your numerical ID for Facebook (you can get it by accessing this URL: http://graph.facebook.com/USERNAME) or your vanity URL name if you have one (mine is “timware”).

        “fb:admins” tells Facebook which Facebook user(s) can access the Admin Page for the URL the Like button resides on.

        You can also use the “fb:app_ID” meta tag to associate your Like button with an application, and you should have set up your blog as an application, per my post here (there’s a link under “Resources”).

        To get your App ID, enter this code on the command line:

        curl ‘https://graph.facebook.com/?ids=http://www.hyperarts.com/blog/’

        Of course, substitute the URL of my blog with the URL of yours.

        Let me know how it turns out for you.

    17. Hi Tim,
      First I’d like to thank you for your tutorial it helped me a lot in implementing the LIKE button on my WordPress blog.

      2 things:

      1) I’ve implemented the fw:admins with MY facebook User ID and even after liking my post, I still can’t see the Admin link show up on the blog post nor do I see any pages created in my profile (under Ads & Pages)

      2) It appears that in your given instructions, I wasn’t able to make it work using the href parameter but had to use URL instead. After half a night of troubleshooting, the button started to work as soon as I switched.

    18. It’s funny, just adding a FB link to one of my websites really helped me.

    19. Hi Tim!

      Fantastic and thorough post — I’ve been looking for help like this ever since FB announced these plugins. I’m really struggling with integrating the XFBML into my website. I followed all your instructions, but the Like button still isn’t showing up. I tried to put it on the single posts right below the author/date/time tag, but it’s still not showing up. :( If you have any suggestions, I would love to hear them. I can’t figure out what I’m doing wrong …

    20. Hi Tim,

      Just wanted to post a follow-up comment because I changed my site to use the iframe version, but would still appreciate the opportunity to chat with you regarding why the XFBML wasn’t working.

      • If your site is http://evilbeetgossip.film.com, the only open graph meta tag is see is the “fb:app_id” and it has the app ID of 114443441918883, while the app ID you give in the call to the JavaScript SDK is 118519488173364. But, as you say, your fb:like code is not longer there, so I can’t assess that. Btw, you have DIV tags in the <head> of your pages. Not good!

    21. Hello Tim,

      do you have any idea on why the like this is not working on my blog? http://www.sportbrain.it
      When I click on the butto, after 2 seconds, it says that there is an error: The specified App ID is not allowed in this domain. You must specify the “base domains” of this app in order to include this domain. In the base domain settings of the app I filled in “sportbrain.it” what else should I add?! Do you think it belongs to some WordPress settings!?

      Thanks for your help…

      • I checked using the “curl” query on the command line (see Comment #38, above), and your URL/domain doesn’t have an app ID. Follow the instructions in this post to set up your domain as a Facebook application. I think you need to read this post more closely, and also the other Resources listed above. And good luck! Let me know how it goes.

        • Dear TIm, of course I did read the article.. and of course I thank you for sharing with us your time and your tips. Now I got it working… there was a conflict with a comment plugin and its facebook connect option.
          I’m not specifying any meta:url, in the header, because I put it in the like button call. do you think this could be a problem?
          I did tried the “curl” you suggested, but I get an error string! Any idea on this? I just type in the browser bar this url: https://graph.facebook.com/?ids=http://www.sportbrain.it/ – do I am right? Thanks for your help and your time… greetings from Italy! ;)

          • You have to execute the curl query using the Terminal app on a Mac; on PCs, click the Start button at lower left corner and select Command Prompt. Include the “curl” part in the query, as in the example in this post.

            • Ok, I did it.. but it seems that I need an “access token” in order to access it.. Never mind, the button now works and everything it’s ok for the moment, thanks to you. The only thing I’d like to change is the language… I get the button and the info in english, do you know how to turn it into italian?
              Have a nice day..

    22. HEy there

      I’m confused regarding the FB page issue? What do we need to do to stop new pages being created for each individual post when someone likes it?

      Thanks

    23. Facebook fixed the og:type problem by creating a new type specifically for blog posts and such. Use og:type = “article” for individual blog posts now. Use “blog” only on your home page.

      • Thanks Otto! Might I ask how you found out about this fix? I’ll be plugging your WordPress Social Plugins app, btw. Cheers.

    24. Hello -

      I must be missing something GLARING.

      I don’t have a wordpress blog, but I’m trying to embed the xfmbl code into my website (it’s not PHP just html), so that users can write something after they click “like”

      But nothing I do show up (right now, on the live site, I just have the iFrame element).

      How on earth do I get it to work?

      My app ID is: 123503350999189

      • You should follow the instructions on this blog to the letter, as regards:

        the <head> tag additions;
        the various meta tags;
        pulling in the JavaScript SDK

        And there are plenty of external resources I’ve linked to.

    25. Why is it that my Recommendations plugin shows only thumbnails of my website logo for every link, yet clicking on a Facebook Share button yields plenty of article-related thumbnails for the same link?

      (This occurs in both FBML and iFrame versions.)

    26. OK -

      http://winifredsanderson.com/untitled-5.html

      I did an exact copy of a page that does work on levis.com – and when I put it on this site, it still works, but there’s no way to add a comment like you can on the original levi’s page.

      Am I just missing something?

    27. @ CSP – THAT WORKED!!!

      YOU’RE MY HERO!

    28. Check out:

      http://communitychickens.blogspot.com

      The comment thing prompts, everything works, but for whatever reason, it pulls this for the title:

      Even tho I have edited the meta data information. I DO like that it pull text from the blog, but how can i get the title in the actual like post to change?

    29. Thanks for the tutorial. I’m seeing Page Not Found on many sites implementing the Like Social plugin, including mine and your own here. Any idea what is happening?

      Steve

      • Which of my links is giving a Page Not Found error? Please describe in detail, Steve, and I’ll look into it.

    30. This was working for me but now it is not working for me or many others websites that have implemented it (check cnn). Anybody know whats happening?

    31. I found something weird.
      Seems like if I use the XFBML version of the facebook Like button, it will not post anything to my fb profile when I Like something WITHOUT leaving any comment… Is this a drawback of using XFBML?

    32. Thanks for this tutorial. Really helpful. If only I could get the darn <meta property="og:image" content="http://www.todotwis.com/todotwisfb.jpg&quot; />
      to work, I’d be a very happy man.

      Anyone else had problems getting the image to appear in your facebook stream?

    33. Thanks Tim, great post!

    34. Do you have to have a static homepage for your app? What I mean is, what if the app is a dynamic page, how do you specify in your connect settings http://example.com/app.aspx?param=x
      where x can be different things.

    35. Thank you for this great tutorial!

      Is it possible to add this to Blogger blogs too?

      And do I have to use the XFBML code to make “like” appear in peoples newsfeed?

      (I am using the iframe now, and tried to use metatags – but I’m not sure where to put the codes…)

    36. Hi Tim, thank you for posting this info. It really helped me ;)

      One thing I haven’t been able to figure out:

      My website is not wordpress, but it is build in php. I have added the like button to my product pages. Title & descriptions so far is working great, but is not showing the image related to the product page.

      On my product page the image is been called by


      <?php echo tep_href_link(DIR_WS_IMAGES . $product_info['products_image_med']) ; ?>

      so I tried adding the meta tag:


      <meta property="og:image" content="<?php echo tep_href_link(DIR_WS_IMAGES . $product_info['products_image_med']);?>" />

      So far no luck. Would you happen to have any suggestions?

      Thanks in advance!

      Ricardo

    37. Is there a way to display the “Like” button and the friend images of other likes in one line?

    38. Hi
      Have been trying get a iframe to work with static FBML for my facebook page, with no luck
      Any pointers – Thanks a lot in advance
      http://bit.ly/cTPtb8

    39. Uhm… it has worked for weeks but now it seems broken: the cloud is not appearing on click and the post is not shared. And I am not able to figure out why. Any ideas? Thanks a lot.
      example: http://www.cellularizzati.net/2010/06/01/nokia-n8-usb-on-the-go-in-un-video/

      • I made some changes to this post this morning to adjust for some errors, mainly removing the “href” property from the <fb:like> code, and changing the PHP that’s used to create the post or page URL for the “og:url” meta tag. So you might want to start there. Also, there’s a great post from “Otto on WordPress” that’s listed in the Resources section.

    40. Fantastic and thorough post — I’ve been looking for help like this ever since FB announced these plugins. I’m really struggling with integrating the XFBML into my website. I followed all your instructions, but the Like button still isn’t showing up. I tried to put it on the single posts right below the author/date/time tag, but it’s still not showing up.

      facebook ads guide

      • Have you made sure you’ve added the tags to the <html> tag? And the call to the Facebook JavaScript SDK (<div id=”fb-root”></div>?

        This probably differs from theme to theme, but in “single.php” I inserted the Like code here:

        <div class=”entry”>
        <div class=”postbody entry”>
        <?php the_content(__(‘Read the rest of this entry »’, ‘fusion’)); ?>

        <fb:like action=’recommend’ colorscheme=’light’
        layout=’standard’ show_faces=’true’ width=’500′/>

        Also, just this morning I revised this post to address an error, removing the “href” property from the <fb:like /> tag, and changing the PHP call to get the URL from the Permalink. So you might check that out.

        And, of course, you need to be using the Permalink feature in your blog for this to work, and you should use Permalinks anyway.

    41. Hi Tim,
      Great tutorial, many thanks.
      I have noticed something with the like/recommend button when using the FBML method.
      If you are not logged in and you click the like/recommend button a pop up appears which just has “error” written in it – no method of logging in.
      If you use the iframe method and are not logged in the popup has the appropriate form to enable the user to login.
      I am trying to find a way around this but I notice your buttons do this too.
      I take it you do not know a way around this either?
      If I work this out I will post a solution.

      Thanks,
      Steve

      • Hi Steve, I have changed my blog post here to address this issue, and thanks for the headsup! Review the bit above about code to add to your header.php and removing the “href” property from the <fb:like… /> code. I changed the PHP call for the permalink in header.php. The combo fixed the error message that was occurring when a user clicked the Like button when not logged in to Facebook.

    42. the code has a variable YOUR-APP-URL but in the explanation you never mention it. I can ignore it? or i should set it to something?
      Cheers,
      Max

      • This is the URL you specify as the “Connect URL” when you first set up your site as a Facebook application. I just updated this post to clarify this, so thanks!

    43. Hey Tim,

      First of all, amazing tutorial. I’ve got the iframe version working right now, because I can’t seem to get the XFBML version to appear – all that shows up is a blank line. Any advice you can offer would be great.

      I’ve got fb and og calls in the HTML tag, the fb-root FB JavaScript SDK call before the /body tag, and fb:like setup in the single.php template page right now. Any advice would be greatly appreciated whenever you find time. :)

    44. Hey Tim. Great tutorial. I have set this up on my on blog, but I am getting the following JS error: “b is undefined.” Any ideas? http://stinogle.com/2010/05/06/starting-windows-services-via-command-line/

      • Not really. When does it happen? I hit your URL and got no error. Are you mixing deprecated FB Connect code with the social graph code?

    45. Great blog post! It helped alot.

      I’m implementing this on a larger e-store. It’s working nicely on testservers. The problem I’m facing has to do with Open Graph objects.

      We have a corporate Facebook page that we use to communicate to our customers. The name of the Facebook page is the name of the e-store website. We have alot of “fans” or “likes” as it is called nowadays.

      When the XFBML Like Button is set up correcly and is pressed, a new object is added to the graph. If the og:type is “website”, a website object is added to the graph. You can publish comments to all that have liked this website object.

      Problem: We have one Facebook page that represents our website and the company as a whole to our customers. We also now have a new Open Graph object, our website that customers will “like” by pressing the XFBML Like Button.

      One would like to have all “fans” or “likes” in the same place. Any insights into this?

      Thanks!

      • If you really have two different pieces of ‘the social graph’ just do as you are doing. If they really are the same entity, you can point your Like button at your facebook page. Like:

        <fb:like href=”http://www.facebook.com/HYPERARTS” />

        and it should just let people like that page instead. Then you only have one place for all your fans.

    46. On my admin pages I only see myself and my friends as likers, but not the other people who pressed the like-button. Do you have any idea how this comes? Thanks a lot for your help!

      • I still have the problem described above. On all my Admin-Pages I only see myself and my friends, but not the other people who liked a post. Any help is appreciated!

    47. Does anyone have any more/better info on how to “Programmatically administering your pages” than what can be found on http://developers.facebook.com/docs/opengraph ?

      I use fb:app_id and basically want to know when something is ‘liked’ on my site. There are several thousand pages that uses the like button so using fb:admins is not ideal. One would really like to get insights on domain level rather than on a per-page level.

      Maybe I’m searching for this? http://developers.facebook.com/docs/api (See the ‘Analytics’ section at the bottom of the page.) Is there anyone that has any experience using this?

    48. If you use custom fields for images in your posts you can use below code to add the og:image meta tag to your header so the post image will be used when your readers share it on Facebook. This is much nicer than using for every post the same image.


      <meta property="og:image" content="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>"/>

      Replace the word thumbnail with the field name you’re using for your custom field. (check your posts in the admin panel of WordPress)

      It works on my own site. Thanks for the other info BTW, very useful!

    49. do you have any idea how to use fbml and validate w3 validator?

    50. I want to add like button to FBML tab on my facebook page
      is that possible?

      • Nope. You can show the image of the link button anywhere you want, but the actual clickable link button allowed is Facebook’s at the top of the page.

    51. When I fill in the information to “Create an Application” and hit the “create application” button, a blank, white page is the result. Nothing to fill in. I’ve done this numerous times and even added a / mark at the end of my blog’s domain. I use the full address including the http:// and nothing. My blog runs on WP and I’ve updated the version.
      What up?

    52. thank you for a great guide its working

    53. Installed “fbog-ilike-button” plug-in using i-frame setting for buttons to appear on posts & pages and it shows up, but what about Admin options?

      Implemented FB Like button on other pages on website using Open-Graph meta tags & can “manage pages” through FB admin. Is it possible to add Open-graph tags on WordPress blog? If not on all posts, at least on pages … in order to see page in FB “manage pages”?

    54. Hi Tim!

      Thank you so much for the great guide–it’s been a huge help making it this far and familiarizing myself with the Facebook social plugins.

      That said, I’m having a few issues I was hoping you might be able to help me with, if you have time!

      First, I’m having issues getting the meta tags to work on my site. My goal is to have the “like” button on each post both on the front page of the site AND on each individual post page–then when users click the “like” button on the homepage, it “likes” only the article they clicked the button on. I’ve installed the Twitter button like this and it works perfectly–the “tweet” button tweets only the post that the button is associated with on the homepage.

      I can’t get this to work with the Facebook “like” button. I tried tweaking your line of php in the metadata in the header for the button to share the URL of the permalink (like I have for the Twitter button) but no matter what I try it always just “likes” my homepage, not the individual post.

      Any idea how to fix that? I’ve used the href="<? the_permalink() ?>" in the Facebook like button code for now as a workaround, but it would be nice to get it to work with the metadata.

      On the other end of things, I’ve installed the button on individual post pages using the same workaround (with the href), but it won’t give users the option to comment on the “like”. On the homepage, it pops up the window where users can add a comment, but on individual post pages it won’t. I took a look at how you’ve set it up in this post, for example, and here you can add the comment, but I can’t get it to work on my blog for some reason.

      FINALLY (sorry for the long comment and so many questions!), whenever someone “likes” one of my posts it shares both the post title and then adds on my site name at the end of it, which is redundant (since Facebook also adds “on alexpriest.com” to each “like”). In other words, when someone likes one of my posts, it shows up on Facebook as:

      ____ liked [post title] | alexpriest.com on alexpriest.com

      Anyway, once again sorry for the long post, but I would GREATLY appreciate any help/tips you could provide!

      Best,
      Alex

      • Did you happen to find a solution here? I’m having the same issue

      • I too am having similiar problems…however the photo that shows up on facebook has nothing to do with the individual blog post…any ideas on how to get the photo be the main photo of the blog post?

    55. well, after reading alllllllllll about face like button in internet, I found this tutorial the best one, but…..in aplication facebook page nothings happens, it has error, those plugins also seems not to be working in my blog.
      So, because there are many people out there with working I like it button, my question is if they put it before wordpress 3.1 ? or if you know some new solution or some other way to implement this aplication in it post?
      Thanks for this great extensive tutorial, sol

    56. Great post – much more helpful than the Facebook official guides.
      I’ve adapted it and created my own post about how to do it for Zen Cart if you’re interested

      http://blog.kineticpulse.co.uk/2010/08/add-facebook-like-button-to-individual.html

      (BTW I also had the blank screen problem after creating an application – but the app was there when I went to my applications home page in Facebook)

    57. Not sure if anyone else is having an issue creating an application and receive errors or blank pages, but in that case, FB creates the application but doesn’t give confirmation. I tried to create the APP about 12 times and when I was about to give up, I noticed that FB created the app 12 times! Anyhow, I deleted the extras and implemented this code which worked to PERFECTION. Thanks for the post … priceless!

    58. Every one of these that I try winds up saying that people like my site, and not the post. Any ideas?

    59. Where do I find my Admin ID? I do not know what this is.

    60. Neil Barlow says:

      How does one go about creating a “Like” button that unlocks material to people who click it. For Example: then band Matt & Kim make their new single available to anyone who “Likes” their fan page. The stream is locked though to anyone who has not “Liked” the page. How do you create this??

      • Hi Neil. I don’t think you can do that with XFBML which is the FBML used on non-Facebook pages. You might consider doing this on your Fan Page, creating a custom tab with Static FBML app and using the Fans-only FBML: fb:visible-to-connection.

        Here’s our tutorial on using the Fans-only FBML.

        If you discover a way what you request CAN be done, please share it here. Cheers!

    61. Neil Barlow says:

      Thank you very much for your response it was quite helpful!

      http://www.facebook.com/mattandkim

      I was wondering if you also had any idea how this page goes about doing what it is doing with the song stream they have on there. Unless you “Like” their page you cannot hear their new song. I was trying to implement that into my fan page

    62. I just wanted to thank you for your article and ALL the followup’s. I’ve had the Like button up and running before by scouring the net and getting info from various tutorials. I still didn’t have it running quite as expected. It would seem clear documentation isn’t easily found. But with your dedication to this post, you may well have the most complete (and human readable) tutorial I’ve seen. I was able to see my errors and was inspired to script all the variables making my like button 100% dynamic from post to post.
      Thank you so much :)
      Have a great day!

    63. Belinda Harris says:

      Thank you! Great tutorial. It works great!

    64. timware, thank you VERY much for the pointer to the fb xml — I needed to retrieve the APP ID and only had the vanity url available and that solved it for me.

      thanks again!

    65. Thanks for the post. I’m stuck on the instructions for Adding the Like Button to your Individual WordPress Pages

      The site says, “Add the Like button to Pages by adding the above code for Posts — but with the below code for tag where the only difference is the PHP code for the “href” value — to the page.php file…”

      I’m confused because 1) the fb:like tags are the same in both examples and 2) neither shows an href value, so I don’t know what I’m supposed to do here. Can you please clarify?

      Also, what if I want to add the button to one specific page, not every page?

      Thanks

    66. I’m not sure you can help me with this but I have searched exhaustively for the code/answer to how to have a conditional Like button. I want customers to come to a facebook tab, then hit the LIKE button to receive a coupon code (not exclusive, I just want another jpeg to pop up with the coupon code after they hit LIKE). Must I only go through Wildfire to do this?
      Thank you!

    67. I’m hoping someone may have a solution to why my og:image meta tag refuses to change anything. Here are the tags I currently have:


      <meta property="fb:app_id" content="APP_ID_HERE"/>
      <meta property="og:title" content="Show Us Your Shot Face"/>
      <meta property="og:type" content="Company"/>
      <meta property="og:url" content="http://www.website.com"/&gt;
      <meta property="og:image" content="http://www.website.com/small/14ca5ce825031c.png"/&gt;
      <meta property="og:site_name" content="website.com"/>

      I have tried appending random variables and values at the end of the url to trick the facebook caching, but i cannot get any change.

      The linter works fine of course, but all I can ever get is another image shown on the page. If there is any way to force a default image, or possibly even remove the picture so I can just use the comment box that would be fine.

      Thanks in advance!

    68. It seems that everything should be working perfectly to enable the “Like” button to refer to one post on my site. It’s just not happening – even with the custom php tweaks. Would love your help. Perhaps the problem is that I have a like button in the header and in each post – but, that’s exactly what I want.

      Here is the site w/ example post:
      http://www.foodoffmyblock.com/2010/11/01/roasted-tomato-sauce-2-ways/

      • Have you tried adding in the following code to pull the link permalink?
        <?php echo urlencode(get_permalink($post->ID)); ?>
        I had the same problem with trying to refer to just one post, and then have another for a universal ‘Like This Site’. I ended up downloading the plugin ‘Facebook Comments for WordPress’ which has a built in, well working Like button. And then I also did a Facebook App page for my site, in order to have a Universal Like button.

        http://www.facebook.com/apps/application.php?id=163335643684906

    69. Everything works great for me… EXCEPT the image.

      If you click ‘Like’ it will show in your wall as just the title text (yes from the og meta data), but not the description or the image.

      BUT if you leave a comment when you click the ‘Like’ button, it works… ??? (title, image, description, website)

      Any ideas? I pretty much followed everything here. The URL Linter shows correct info.

      • Not sure what you guys are referencing but my page looks kind of like:

        … some stuff

        window.fbAsyncInit = function() {
        FB.init({appId: ‘MY_APP_ID’, status: true, cookie: true, xfbml: true});};
        (function() {
        var e = document.createElement(‘script’);
        e.async = true;
        e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
        document.getElementById(‘fb-root’).appendChild(e);
        }());

        Feel free to tell me why only posting a “LIKE” with a COMMENT works, and a “LIKE” without a comment just uses the title and the link. (no image, no description).

        I would really appreciate any responses, questions, or tips.

        • That’s the way Like works, if the user shares a comment, the story gets more prominence, with text and thumbnail… if they do not share a comment, only title appears. It is working as designed!

    70. You have bug in your code. You’re calling og:title content=blog in first conditional tag instead of og:type

      • Two different thing, Sasa. The above code sets the “og:title” attribute to “Blog” meaning that’s what I *want* the title to be if it’s the Blog home page. Users can substitute “Your Blog Name” or whatever. If it’s not the blog main page, it sets the og:title to the name of the post.

    71. Ok, but you know now now that’s a little bit confusing, because stype of page can be “blog” too. Thats only reason why i’d mixed things up. And thanks for this tut, i’m using it now on my blog, works great.

      • Thanks for pointing out the confusing nature of the post. I’m going to correct it now to head off any further confusion. Much appreciated, Sasa.

    72. god, please redo this post for blogger and posterous (or if not specifically posterous, something that addresses a third-party host which does not utilize javascript, but definitely blogger would be appreciated and well-digested and trafficked).

      Thanks,

      as usual you guys are the only ones who get even close to addressing the ongoing nightmare that is Facebook’s application for blogs

      Cynophagie

    73. Thanks Tim for the easy instructions.

      I came here while trying to increase my site’s traffic via facebook (a bit late huh :) ).
      Before reading this I didn’t want to bother using XBFML; I was going to use IFRAME for fast result.

      Thanks again for showing how easy it is to setup facebook plugin using XBFML

    74. I tried this tutorial because the like button would only show up via iframe, and the other problem being the ‘like box’ on my sidebar not showing up anywhere but on the front page, but it doesn’t work. any ideas?

    75. Question, when using the code from facebook, the photo that shows up on facebook has nothing to do with the individual blog post…any ideas on how to get the photo to be the main photo of the blog post? I’m using wordpress and my site is http://www.moneypress.com…thanks

    76. Hmmm,
      A simple thing made very complex…
      Publicity is all about relations or is the other way atound?

    77. Hi,

      Great tutorial but having a very frustrating issue I just can’t seem to fix. Similar problem to what a couple of other people have posted here. When I press the ‘Like’ button, there is a few issues

      1) – All FB like buttons are ‘liked’ i.e. pressing like on 1 post will like all other posts. I can’t seem to de-couple the likes to liking only 1 article/post

      2) – Tied in with the above, liking a post will not send the post headline and image to facebook. Instead it sends the entire page.

      Now, from what I can see somehow the like button is pulling in my title, img and first p tag from my main site index.html page. I am not sure why, but that is what is getting sent to facebook. My index is in my root dir, so not sure how it pulls in that info from the /blog/wp-content/etc etc etc

      I have also tried using the popular plugin ‘Share & Follow’ to insert the buttons and just update the header.php but that does not work either. Inserting the buttons is very easy with that plugin and I would like to use it for flexability, but just can’t get the FB button to work right.

      Lastly, I built my own site and just use WP as the blog part. Not sure if that indicates something, but thought I would add it just in case.

      Any help appreciated… //Steve

      • Sorry Missed a bit of info which may help.

        I checked the facebook linter and it seems that the meta tags I am not setting in the head are being pulled from the index.php file in my root (From my home page of my website)

        So maybe it is something to do with how the page treats meta data that is not set. According to this post it should choose the first image and description for the post. But it seems to do that but grabs the info from the wrong page.

        maybe that is more confusing! :-/

    78. Per the Facebook like page documentation, it is in fact possible for a user to add comments when the iFrame version of the button is used. Perhaps this functionality did not exist when the post was written?


      When will users have the option to add a comment to the like?

      If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the Iframe version of the button, users will have the option to comments if you are using the 'standard' layout with a width of at least 400 pixels. If users do add a comment, the story published back to Facebook is given more prominence.

      • Yes, the adding comments feature has been added to the iFrame Like button. I’ve updated this post to reflect that. Thanks!

    79. Your article on Facebook like button is very interesting and appealing to readers. http://shareitto.com thanks and wish to post you more article about it.

    80. Thank you for your article. It makes me knowledgeable in facebook plugin a lot. Do you know why the face of facebook user especially when they are not in my friend’s list in my facebook, doesn’t show up in my facebook like button plugin and also my facebook like box plugin? I use my facebook like box plugin from my page in facebook (facebook plugin developers).

      Some time I try to change and use plugin from many plugin in WordPress, but still the result is the same. The image of facebook user doesn’t show up if they are not in my friend’s list. Why is it like that? I get frustrated to find from search engine to solve my problem. Do you know why is it like that? And how to fix it?

      Thanks for your kindness and attention. I’m sorry to trouble you.
      Thank you very much.

    81. Oh thanks for this wonderful tutorial hyperarts.

    82. Thanks for the article very much!
      Some times it’s not easy to find useful info at developer.facebook.com.

      For example, “Like Box” still offers not asynchronous loading //connect.facebook.net/en_US/all.js
      Thanks again that you describe everything very thoroughly!

    83. How about having clickable facebook button on the wordpress header image?

      • I’m not sure what you mean. If you want to link an image to a Facebook page or profile, that’s just simple hyperlinking. If you want to create a custom graphic for a Like button, you can’t.

    84. Thank you so much for sharing this to us. Very informative and well-written.

    85. JoeyJGarcia says:

      Nice job of the article.

      I have a question though, why do you have Facebook (FB) namespace attributes in your HTML tag?  Is that something that is required too?

    86. Yes, Facebook requires that you use that namespace. I believe it’s needed for Facebook Connect to work with Internet Explorer. https://developers.facebook.com/blog/post/198/

    87. nazarite says:

      Tim:  Thanks for the instructions, they have helped tremendously. I have the XFBML share button included in the Single.php file, on my blog at http://hillmanb2.com/nonprofit.  The button shows up on the post pages that includes the full body of the post. 

      I would also like to have the button on the pages which show the title and 1st paragraph excerpts of the post. For example, my home page includes an image and excerpts of the first five post…followed by a Read More button in article section.  I have attempted to duplicate the Like button and have it placed in the excerpt section as well, but that appears to trigger an entirely new button with a different count.  Is there a way to have an exact duplicate of the button so that readers may LIKE the article from the excerpt or full page?  Thanks in advance for your assistance.

    88. Tim

      Is there a responsive solution for showing a Facebook likebox?

      • We tried to figure out a way and couldn’t. The width had to be defined with a pixel value, not a percentage.
        So we had to create 6 DIVs, each with a Like box at one size, for each breakpoint.
        If you figure out a way, please share!

    Trackbacks

    1. [...] how-to-add-facebook-like-button-social-plugins-to-wordpress-posts [...]

    2. Add Facebook XFBML Like Button / Social Plugins to WordPress Blog Posts | HyperArts…

      この記事は以下サイトで紹介されています。 WordPressハッカーズ…

    3. [...] Multiple Facebook Like buttons on one page By Hillar Saare | Published: 6. May 2010 Today I played around with the new exiting Like button plugin. Got it working very easily by following a good tutorial on how to add XFBML Like button to a webpage. [...]

    4. [...] Facebook-specific Meta Tags on your site so Facebook properly attributes your site and description (details here). This will also serve as a great way to spread your content around through your visitors’ [...]

    5. [...] a more feature rich environment. More about this (where I found out about it) is at HyperArts How to Add Facebook’s XFBML Like Button & Social Plugins to Your WordPress Posts). So why don’t you see one of these on my page you may wonder? Well, for now I am still [...]