jQuery Facebook Like Plugin
The Facebook Like button has become very popular with the recent release of the Open Graph API. This plugin allows you to add the Facebook Like button to any website and use all of the options associated with the Facebook Like API and JavaScript SDK.
Features:
- Can add meta data to your pages to be included on Facebook
- If already logged in, will allow you post favorites to site – if not logged in, will prompt you to log in.
- Works with all FB Like options
Demonstration:
- Facebook Like Demo
- Or just look at the top of this post, you will see a Like Button – which is being added by this plugin.
Requirements:
- jQuery – Requires 1.4.1
- Facebook Application ID – Get one here.
- Its important that you put the plugin and function at the bottom of your page.
Download:
How it Works:
Once the script has been setup on the page, it will automagically pull in the page URL and page Title – and allow you to like on on facebook. If your friends also like it, you will see their names/faces show up. If you are not logged in, you will only see the number of people who like it and if you click “like” – it will prompt you to login.
Code Example:
<script type="text/javascript" src="../js/jquery.onefblikev1.0.js"></script>
<div id="fb-like-example"></div>
$(document).ready(function () {
$('#fb-like-example').oneFBLike({appID:'XXXXXXXXXXXXXXX'});
});
Options:
The following options can be passed into the plugin and if they are not, the default values below will be shown:
appID: 'XXXXXXXXXXXXXXX', // This is mandatory, if you dont enter a Facebook Application ID - the plugin will not work siteTitle: ' ', // Optional Meta siteName: ' ', // Optional Meta siteImage: ' ', buttonWidth: 450, buttonHeight: 80, showfaces: true, font: 'lucida grande', layout: 'normal', action: 'like', colorscheme: 'light'
Useful Resources:
Update 11/11/2010
I just made some updates to the plugin and released v1.1 on Google Code to address some issues with IE8.
Comments
Got to implement this one very soon :) I do not like that iframe stuff
Yes, I didnt like the iframe option either – their JavaScript SDK is actually very slick!
Implementing it! I like that one, good work and thanks for sharing :-)
I had implemented this in the right section of my webpage, but content of the meta tags is not loaded(If I like my page then on Facebook will appear the same info that exists in Linter, not the one that I changed using customized OpenGraph tags)…. Please help me.
Can you post your code? Thanks.
Sick!
Thanks a lot for this!
Just a question if possible:
Is it possible to change the language? It’s in English right now, but I’m planning to make a multilingual website, that’s why I’m curious. :)
Thanks again for the great script!
Yes is possible to change language. Just change in jquery.onefblikev1.0.js in line '//connect.facebook.net/en_US/all.js' en_US with your prefered language code (de_DE for Deutsch, fi_FI ….)
Don't work in IE, only bad point to an otherwise fantastic piece of kit. FB markup SUCKS!
haven't tried yet, but it seems really cool. good work. thank you for sharing your codes!
Hey man I totally love your plugin but I'm having trouble with it. It sometimes just fails to work properly in Firefox. The button will render but nothing happens when clicked, but when I disable any addons it works for the first refresh after the disabling.
With no addons whatsoever though it still won't work – I tried it in safe mode.
Any reason why this might be happening, and how it could be solved?
i dont know what im doing wrong but ive implemented the code into my website but nothing is appearing, i have even made a test page and followed the instructions but nothing ? anyone else had this problem???
Which browser are you using?
I have encountered an issue with IE8, where the plugin is not showing up. I will be working on this bug and posting updated code in the weeks to come.
Hi Jake,
Is there any fix with the ie 8 issue just noticed it works on here in ie8
I havent changed anything, not sure.
As looking into this it appeas that in ie8 its not loading any of the facebook html into the dom, at moment i am using the iframe if the user is using ie.
Hi Jake,
My bad i was using an older version of JQuery, was using 1.3.2 i have upgraded to 1.4.1 and its working fine in ie8 now.
Hi,
I can't seem to get the siteTitle correct, even though I set this parameter correctly.
Check http://www.bikeproject.be/fixed/modules/custom/20…
I set the title to "custom bikes", but it always shows bikeproject in facebook…
Thanks for your advise!
Kr,
Wim
I removed the parameters sitetitle, site_name and image and placed them in the head myself and now it works.
Kr,
Wim
Great – but is it possible to have multiple Likes on the same page?
That is very handy plugin.
But what is appId used for? AFAIK, there is no need in appId when you generate code for Like button on developers.facebook.com. Thanks
appId allows you you to track your like button thru facebook.
The code that is generated for the button on developers.facebook.com does not included advanced features, it is the basic implementation.
This is excellent… only thing is that I'm having problems using the v1.1 (jquery.onefblikev1.1.js). All works well with the v1.0 though.
Slightly off topic, but I'm using the FB code for the Like button and I cannot get the text + button to align to the right.
I have tried style = "text-align:right; float: right;"
The container around the button will respond correctly, the but button + number of likes refuse to render from the right. Any help would be appreciated.
Have you tried using Firebug in Firefox to determine the class or id that is wrapped around that piece of text?
is there any way to track the click event, as I need to track that in google analytics, and also do something on the page if this was clicked. The page will be served from three different locations:
1. facebook iframe
2. my web site
3. smart phone device.
Yes, you can track click event using the following code, it will need to be adjusted to your implementation.
$('a').click(function() {
_gaq.push(['_trackEvent', 'Facebook Like', 'Click', 'Page Title Goes Here']);
return true;
});
I had an issue with this using jquery 1.5.1 and jquery.onefblikev1.1.js. The error read: "Uncaught TypeError: Object [object Object] has no method 'oneFBLike'"
The issue is that the method name is case-sensitive and should be lowercase. To fix use 'onefblike()', eg:
$('#fb-like-example').onefblike({appID:'XXXXXXXXXXXXXXX'});
Yes, case is important when using this plugin.
You can also apply this to multiple buttons in a page by assigning it as a class, eg:
HTML:
<div id="facebook_like_1" class'facebook_like'></div>
<div id="facebook_like_2" class'facebook_like'></div>
<div id="facebook_like_3" class'facebook_like'></div>
JS:
$(document).ready(
function(){
$(".facebook_like").each( function()
{
$(this).onefblike( {appID:'XXXXXXXXXXXX'} );
}
);
}
);
how do I call the site images when I have multipe buttons which each entry have its own images.
You will need to create separate instances of the like button – where are you trying to do this? On WordPress?
how to get the appID?
I have included the link where to get a Facebook App ID in the tutorial.
You will have to go to facebook developer link and the set up new app…
cant call a External function online or onunlike any got an idea ?
onlike:function(response){
$('.fbjlike-uncontent:visible').hide('fade');
$('.fbjlike-content').show();
$.cookie('liked','liked');
alert('this doesnt work ?');
},
You can unlike using the current implementation, you do not need to add another function. Not sure what you are trying to achieve here.
How can i set the siteImage option?
I do something like this:
siteImage: 'http://www.mysite.com/image.gif',
but it doesn't work…
Any idea ?