Grow your CSS skills. Land your dream job.

Last updated on:

Facebook “Like” Button for WordPress

Some very easy copy-and-paste code here to add to the template for blog posts to allow for Facebook "liking" of the article. Probably best in the single.php template underneath where it outputs the content of the post.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" id="facebook-like"></iframe>

Comments

  1. HarnHog
    Permalink to comment#

    Consider the possibility of Deceiving users with the Facebook “Like” button: http://bit.ly/cUafIz – by @arnabdotorg

  2. Here’s the WordPress plugin:
    http://wordpress.org/extend/plugins/like
    An honest one that does not deceive users.

  3. Thanks for this article. I like this :D
    I found official docs here http://developers.facebook.com/docs/reference/plugins/like

  4. I recently updates the information on the Reference URL. It contains a link to a great WP plugin and here’s how to add FB comments w/ the like button: http://media-sprout.com/add-facebook-comments/

  5. Trying to use the Facebook Javascript SDK (as opposed to iframe) and at first everything seemed fine….

    Then today had a a friendly heads-up from somebody using IE 7 or 8… who couldn’t even load up my site without browser crash.

    Fixed some issues loading the SDK after the opening body tag but the facebook code doesn’t validate and crashes IE6.. seems so crummy, is iframe a better way to go?

  6. Permalink to comment#

    short and simple just as I like it! :)

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".