Cordobo

Integrate Facebook’s “Like” Plugin into WordPress

Written by

Andreas Jacob

in

,

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. Globales Mögen in WordPress dank Facebook

    […] im Code irgendwelche Fehler sein sollte, hier noch einmal das Blog, das den Code auch […]

  2. uberVU – social comments

    Social comments and analytics for this post…

    This post was mentioned on Twitter by SMLearner: @peterfletcher Did a quick search and found this to help integrate FB’s like button with WordPress…

  3. Facebook: Gefällt mir/Like/Empfehlen-Button in WordPress-Blog einbauen (ohne Plugin) – LoadBlog – Das Download-Magazin

    […] Beispiel übernehmen wir hier mal das Code-Snippet von cordobo.com. Der Code sieht folgendermaßen […]

  4. Peter Fletcher Avatar
    Peter Fletcher

    Gold. Been chasing this. Now to work out how ti integrate into Thesis so I don’t lose the customisation when I upgrade.

  5. Melinda Avatar
    Melinda

    Very cool. I tried it by “liking” the post :) Thanks for the tip.

  6. How to Add Facebook’s Like Button To Any Page On Your Site | HighEdWebTech

    […] widget only allows you to create a Like Widget for one page. If you are using PHP or WordPress, Andreas Jacob has come up with an easy way to dynamically have this widget get the current page URL. It’s […]

  7. Tobi Avatar
    Tobi

    Thanks for the code sample. Just implemented on my blog.

    Thanks a lot and cheers from Berlin
    Tobi

  8. Add A Facebook Like Button To Your Thesis Theme — Jim F Munro

    […] So if you generated code from Facebook, replace the url with the bold text above.  [Thanks to Andreas Jacob for this […]

  9. Kim Holmberg » Facebook owns the web

    […] and code on how to get a dynamic Like-button to your WordPress powered blog can be found at http://cordobo.com/1608-facebook-like-plugin-wordpress/. Share/Bookmark this var a2a_config = a2a_config || {}; a2a_localize = { Share: "Share", Save: […]

  10. Facebook Like -ominaisuus Wordpress-blogiin | Markus Ossi

    […] Cordobo) AKPC_IDS += "227,";Popularity: unranked [?] Artikkelin kirjoitti Markus Ossi Ei kategoriaa […]

More posts