Integrate Facebook’s “Like” Plugin into WordPress

Facebook recently announced the take-over of the internet with the introduction of the yet infamous “like”-button. Nevertheless, here is how you can add your own dynamic like-button for WordPress.

If you use Facebook’s generator here, you’ll get some content very similar to mine:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcordobo.com%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>

Note: I highlighted the parts I replace in the next step

This would be fine, if you had only one page on your website, as the plugin only shows the url you have entered in the generator – no dynamic pages. So here’s how you can add some dynamic flavour to your new button:

Replace the following code

[…]like.php?href=http%3A%2F%2Fcordobo.com%2F

with

[…]like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>

insert it into your theme’s single.php and upload it to your server.

The final code, ready for copy & paste

This is the final code you can use in your own WordPress installation without further modifications (except the width and height). Insert it into your single.php and upload the modified file to your server.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>

Note: I highlighted the parts I replaced

In case you use some caching plugin, clear the cache and see the magic as it happens.

If you like it, click on “like” ;-)

Comments

72 responses to “Integrate Facebook’s “Like” Plugin into WordPress”

  1. Vbulletin 3 Facebook Like Button » Armchair General

    […] I found a really nice explanation of the raw Facebook Like code here. […]

  2. Godisgris.se » Gilla mig

    […] borde gå att fixa det själv utan plugin. Lat som jag är googlade jag först och hittade detta blogginlägg som enkelt förklarar hur man […]

  3. Nicolas Avatar
    Nicolas

    Maybe helpful: Kouguu FB Like wraps the Facebook Like Button into a customizable WP plugin.

  4. Pat Yuen Avatar
    Pat Yuen

    There is a WP plug in now
    No coding required. Works great .

  5. The new Facebook like feature

    […] took less than a minute thanks to this informative post I found via @BlogHighEd (http://www.bloghighed.org/) VN:F [1.8.8_1072]Rating: 0 (from 0 […]

  6. Joe Avatar
    Joe

    This is great! Except it only shows on the post page, and not on the blog front page. Could there be an easy fix for this?

  7. Amy Avatar
    Amy

    This is great! Except it only shows on the post page, and not on the blog front page. Could there be an easy fix for this?

  8. Holy Moly » Blog Archive » Facebook.me is a simple way to create a custom appearance for your Facebook profile

    […] Bisweilen existiert kein offizielles WordPress plugin im Sinne dessen, doch was waere das Internetz, wenn es nicht hier schnelle Abhilfe boete. Somit geht der Dank der Gemeinde an A. Jacob aka @Cordobo und seinem Blogbeitrag:   Integrate Facebook’s “Like” Plugin into WordPress […]

  9. Ef. Avatar
    Ef.

    Am I the only one having trouble with the “Like” counts. Numerous people have liked posts on my website but “Be the first of you friends to like this” is still showing. It actually sends a link to Facebook profile, but the count stays the same.

    I see yours (for this post) is up to 3 now so I guess there might me something wrong… but I double-checked the code and everything seems to be at the right place so I’m kinda puzzled.

    It would be really nice if 2-3 from you guys could give it a test-drive.

    Thank you

  10. martone » 1 Milliarde Likes oder Deutschland du alter Late Adopter!

    […] jedenfalls. Sonst fällt mir nichts ein, warum “one line of html” nicht in jedes Script passen sollte? Einzig bild.de nutzt bereits ein anderes neues Feature, dass bei der f8 beworben […]