Cordobo

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” ;-)

Andreas Jacob

,
, , ,

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

« Older Comments
Newer Comments »

  1. Thanks for documenting this, very helpful, I’ve added it to my site. But I notice it doesn’t add the like button on each post from the main page view, just when you drill into a single post. Any idea how to add some code to add the like button for each post in the main view?

    Thanks a lot,
    Scott

  3. Thank you for posting this so soon after “Facebook like” was launched. Very helpful in adding it to my blog.

    For my blog I also added it to index.php so that it would appear after each entry on the main page of the blog. I also found that setting “height:30px” was necessary to resolve spacing issues.

    • Yupp, like mthie mentioned in an earlier comment, the facvebook generator comes without any height, so I fixed this in the above code to 60px, which might be too much for most of you.

  4. Thank you so much. I got the Facebook code and thought, “Oh shit! How do I get it to recognize the post and not the whole website?”

    You are awesome.

  5. Thanks, that worked very well. But I noticed that in your website and mine it doesn’t show the total number of people who liked the post. On Facebook developer’s page it shows me myself, my friends who liked the post, and “1,723 others like this”. Do you know how get that to work?

  8. […] 早上在indise.com.tw上看到「如何安裝Facebook Like按鈕在自己的網站上，讓網友們「讚」一下？」這篇文章，得知臉書新增了「Like Button」的Social Plugin功能，覺得相當有趣，因此也依樣畫葫蘆研究了一下。不過因為此篇文章並沒有很詳細的使用說明，再加上原本提供的外嵌程式碼，只能針對單一網址進行「按讚」的功能，因此阿祥Google了一下，在Cordobo這個網站上找到了支援動態網址的修改方式，下面就分享給大家。 […]

  10. Since I´m no coder I´m so happy to have your code just to copy and paste. But there´s one problem left: How can I increase the distance between the postmetadata (like your “postet by .. tagged …) to the like-button?
    thanks for your help!

« Older Comments
Newer Comments »