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” ;-)
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?
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?
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
Great Tuto’ !
But what if i wanted to use the XFBML version to allow “Likers” to post a comment after they like a post? ( I know it needs Java Script SDK )
Any way to add it to the Blogger pages? I am not very computer savvy so if this all meant you can also use it on Blogger, I def missed it…Thanks!
Thanks a lot for great tutorial.
I have install it.!
Added the code – works like a dream, and it only took a couple of minutes. Thanks for the post.
Hi there! Thank you, Andreas for the code. I have tried it. I have this website that I am working on and I am trying to put the facebook plugin on the website. It works, if the user who is online on facebook, then I see the thumbnail picture. If I am not logged in to facebook, I cannot see the thumbnail picture.
And secondly, when I go to my client’s facebook, I am not accounted for.
Actually, it defeats the purpose.
Thanks anyway.
Hi eve,
that’s exactly how facebook’s “like”-button is intended to work – you have to be logged in and you see your friends pictures only (at least by now).
There are although an issue with the correct amount of people who clicked the “like” button, which is an issue FB is working on.
Sorry if I’m repeating myself, but my iphone is giving me static when I try to post …
… anyway, you can ditch other comments.
Mostly I wanted to say that I liked your caching suggestion very much.
It makes me think I want to add that capability to my FaceBook Like Button Plugin for WordPress I released last week.
Hi, Im new working with all this stuff and Im really struggling to get this working. I’d really much appreciate some help!
In my case, Im copying and pasting the “final code” you suggest on the post i want to enter next. However, when I see the blog, it only appears an URL but not the FBlike button. I guess this is because I dont know what “single.php” is and therefore Im just directly copying and paying the link on the text of the post.
Sorry for my ignorance.
Thanks a million in advance.
You need to add the code to the file single.php in your themes folder. On Windows you can use an editor like pspad or notepad++ and insert the code.
No way to find a folder called themes in my wordpress screen…
:/