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&layout=standard&show-faces=true&width=450&action=like&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)); ?>&layout=standard&show-faces=true&width=500&action=like&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”
[…] This post was mentioned on Twitter by dotdean, Andreas Jacob. Andreas Jacob said: Integrate Facebook Like Button with Worpress – http://bit.ly/9LPypi […]
Yeah! Sehr cool – gleich eingebaut! Danke Dir!
[…] Wer’s nachmachen will – hier gibt’s den Code für WordPress. […]
Thank you for this tip, but i dont understand why it needs a so large height… Do you have an answer ?
Bravo! Nice post. Working easily on my site.
Und alle haben den tollen Bug des Code-Generators uebernommen:
“height:px;”
Bitte mal durch einen richtigen Wert ersetzen, ansonsten nimmt das Plugin einfach zu viel Platz weg (zumindest bei mir im Chrome, andere Browser nicht getestet)…
Danke für den Hinweis, habs korrigiert.
Die Originalhoehe ist uebrigens 80 Pixel, wie man in der Doku dazu sehen kann :)
Any tips for making this work in a widget? I tried your suggestion, as well as some other ideas, and when I click on the like button, the number appears briefly and then disappears.
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
I added the same code to index.php to add the like button below each post in the main view. Worked perfectly.
Thanks for the feedback, good to know ;)
I’ll give it a try and post the code here.
Nice. Thanks for this!
Is there any way I can add the like button at the end of every single post, but on the main page?
[…] page. If you like a universal WordPress implementation you can use this code (which I found here):<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo […]