Facebook just announced that they are launching the “like” plugin for any page around the web.
There’s an easy solution to utilize this on your site:
Generate your own code here, which will look something like this:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2F&layout=standard&show-faces=true&width=450&action=recommend&font=verdana&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe>
The portion where it has href= and then shows the URL, that part is where you need to edit particular to WordPress.
To achieve this for WordPress, do this for the href=:
<?php echo urlencode(get_permalink()); ?>
So it will look something like this…
.../like.php?href=<?php echo urlencode(get_permalink()); ?>&...
This will ensure that your link is URL encoded properly and you can share that page with your visitors.
Any questions, please leave them in the comments.
Enjoy!
you should create a plugin for this so users dont have to modify anything just activate it. wouldnt be had really i can slap it together in 5 minutes if you want. i like it though, i’m definitely going to use it on my park website.
that would be a great idea!
also maybe be able to include a shortcode, maybe.. [fblike] so people can include it anywhere, that would be nice too.
And maybe offer an optional “before content” or “after content” hook or option, so it’s easy to configure
Travis,
Could you please help me implement these new features into my wordpress blog. I current;y am running wordpress 2.9.2 with the simple facebook connect plugin from Otto, and I’m not sure if I need to download a new facebook connect zip file from the facebook website or just enter some code or what to do, to get this working. Can you help me please.
Remy
Remy,
add the code above anywhere within the loop on your single.php page and it should work just fine
How do i get this thing to align to the right?
I would throw the iframe into a div and then style the div to text-align:right; probably
Plugin is finished. you can download it here for now: http://www.travisballard.com/fblike.tar.gz until it gets added to the repository.
The Plugin solved my problem, thanks!
When I throw it in the loop between content and tags it ends up below plugins like related posts and sociable. I notice that you have it above such plugins, did this take some trick? Any advice?
you can use the shortcode [fblike] in your content and it will appear where you insert it. By default the plugin adds it before the post you can configure this by going to settings > FBLike Options and changing it to display before or after the post. Since you’re inserting in the post content yuo might want to disable the automatic appending/prepending as it will show it twice.
Just tried setting this up as a widget. Ran into problem on homepage, it appears to pull the last blog link as the current url.
i could add a widget to the plugin but it would submit the blog url itself and not the post. though it’s a bit wider than most sidebars so i’m not sure how well it would work as a widget.
On some posts the Like button doesn’t show up. Other posts it shows up for a second then disappears. On different posts it’s there. What am I doing wrong?
I had that issue for a bit too, I had to make sure it was showing the correct URL and that it wasn’t on a preview page or cached page (or at least a fresh cache). basically, facebook needs to be able to “see” the page to be able to offer the button. make sure you don’t meet any of those conditions for it.
it shouldn’t be a specific problem to thesis.
Sidenote, I’m using thesis 1.7
Is there a way to do this for a blog on wordpress.com?
I imagine not, since it’s either javascript or an iframe, of which neither wordpress.com allows. it would have to be something they offer at a network level, not something you can implement yourself.
Thanks Jonathan! This is great.
Any reason why I’m getting that huge space between the like button and the start of the post? I even tried removing the tweetmeme button and changing the iframe height to auto, to no avail. I also moved the iframe to the bottom of the post. Same issue. Perhaps it’s theme related?
http://freerommy.com/the-best-opening-to-any-set-ever/
I would set the iframe height to something static, like 25px or such, I found that worked for me. I had similar issues when I first installed it as well.
When you enable show pictures it reserves the huge space for the pictures. I created a plugin that automatically re-sizes depending on your settings: http://bit.ly/awqa5C
Thanks for this, works perfectly!
I don’t know if it was because of this, but as soon as I installed the fblike plugin, intensedebate comment system was disabled..
the fblike plugin shouldn’t effect intensedebate at all, they are completely separate and have no overlap whatsoever.
did you try disabling the fblike plugin to see if intense was re-enabled? I highly doubt that was the root cause.
I’ve got both currently installed and working fine, http://wearegr.com
Awesome! Glad everything is working for you now
I found out that in most of the websites the counter doesn’t work, it only shows me myself and my friends who liked the post but not the total number of people who liked it. If you visit “facebook developers” page you will see something like this: “yourname, and 3,166 others like this” while in your website and mine it doesn’t do that. Any idea how to get this to work?
Talal,
I noticed that the iframe they are using on the developer page itself is different than the iframe they generate for you. The iframe they use has the widget and other options inline for the src, rather than setting it as a style. There’s also an API key and something related to the SDK, sdk=joey.
It might work if you use the FXBML version instead, but I haven’t tested that yet.
If any of you are using my plugin as i know a few are you might want to update it as i’ve added a couple more useful features. There does however seem to be a bug blogs that are running on Thesis. While i do not personally support Thesis i am going to have a buddy look into it who is familiar with it. If you are running Thesis and the plugin is working fine for you please let me know.
Anyway on to the new features:
Full shortcode support. you can now define attributes in the shortcode such as layout_style, font, verb to use, width, etc. To make remembering these easier and to make using the shortcode much more user friendly i have added a button to the visual editor with the Facebook icon. click it and you will have a window where you can configure the options for your shortcode.
Added support to output XFBML instead of just the default IFrame. To use this feature you will have to register your site with Facebook to obtain a valid App ID that you can enter on the plugin options page. directions can be found on the options page as well.
@Travis
Are we supposed to see how many people “liked” because I tested it and it always stays at “be the first of your friends to like this”…
I’ve noticed that as well on my own site. After adding the XFBML method and switching to that on my site at http://www.visitfloridastateparks.com it seems to be working better and listing others who have ‘liked’ it was well. I’m not 100% sure that the IFrame method works as it should. The one in this post only says that I Recommend it and i’m sure others have clicked it as well not just me and that is the behavior i was experiencing before switching to XFBML output in the updated plugin.
Is there anything else I need to do to support XFBML? I got an app ID and put it there but I can’t see any thing different from the iframe method, I still don’t have the option to post a comment from the like button and I still have a problem with the counter saying there is only one person liked this while I’m sure there are many others.
I’m not sure it has the ability to post a comment. when you click ‘like’ there will be a notice on your profile showing that you ‘liked’ the post. you may have to scroll down some to see it though.
As for enabling XFBML, all you should have to do is check the box that says use XFBML and then add your App ID and save your settings. it will still look the same but in my experience seems to work better. I’ve been getting mixed results on how many people liked a postl on my site ( mentioned above ) it shows me that i and another person who is a friend on facebook as liking a couple of the posts. but I checked in Google Chrome and for most of them it says be the first person to like this, but for one it says “One person likes this.” where as before when was using the iframe method it only showed me as liking it.
It does have the comment ability, there was a bug causing it not to work correctly and has been fixed. if you update your version of the plugin by downloading it again from my site. let me know how it works out for you.
Still showing me only 2 likes though on my site. and then when i like it, all it says is Travis Ballard and Other Person like this. instead of somethng like ‘You and 2 other people like this.’
Just what I was looking for. I saw another site implement this yesterday and was hunting down the code.
awesome! glad you were able to get it then.
Hi. I’m also getting the “one person likes this” message, even though I know for 100% sure that more than one person has liked it. Anyone else still getting this – is it just a temp problem with the whole concept, as it is still very new, or are we doing something wrong…? Any help would be muchos appreciated. Cheers.
Thank you. With your guide I was able to implement the like button without the need to install the plugin.
Other than seeing the numbers, is there any way to see who has clicked the link?
Share anything with your Friends on FACEBOOK!. We offer Like it simple solution!
I love this idea. When I last looked on the main WordPress plugin zone there were 15 or so plugins trying to do a like button.
http://wordpress.org/extend/plugins/search.php?q=Facebook+Like
How to pick the best one and why wont any of those people talk to each other to get just one of two good ones up there.
This is a real issue for everyone and especially newer users trying to pick one.
I tried http://wordpress.org/extend/plugins/facebook-like-button/stats/ mostly because at 22,000+ downloads it probably works but no it doesn’t.
Ironically I think its a Facebook problem for that plugin but even for someone who has been using Wp for 3+ years this is still confusing.
I have since installed the plugin on half a dozen sites including http://wordcamp.org.nz which uses thematic – no issues so far. Thanks to Travis Ballardfor the plugin & update.
FYI I believe its still the old version on the download referred to above but auto update works works fine.
Hey Jason,
Thanks for taking the time to comment. Yes the download mentioned on this page is old and does need updated. The version of the plugin in the WordPress plugin repository is up-to-date though. I am currently at a design conference but i will update the download or redirect it to the plugin download page when I get home.
Thanks,
Travis Ballard
that was so easy…love it!