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>
[js]
$(document).ready(function () {
$(‘#fb-like-example’).oneFBLike({appID:’XXXXXXXXXXXXXXX’});
});
[/js]
Options:
The following options can be passed into the plugin and if they are not, the default values below will be shown:
[js]
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’
[/js]
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.
Category jQuery, Open Source
You can follow any responses to this entry through the RSS 2.0 feed.
@invocoes
June 30th, 2010 at 3:02 pm
Got to implement this one very soon :) I do not like that iframe stuff
jrutter
June 30th, 2010 at 10:50 pm
Yes, I didnt like the iframe option either – their JavaScript SDK is actually very slick!
Michael Pehl
July 20th, 2010 at 7:35 am
Implementing it! I like that one, good work and thanks for sharing :-)
MissScript
July 30th, 2010 at 2:08 am
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.
jrutter
August 1st, 2010 at 12:57 pm
Can you post your code? Thanks.
Moonwalker
August 22nd, 2010 at 12:23 am
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!
UserXXX
September 2nd, 2010 at 4:47 am
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 ….)
Bryn
September 8th, 2010 at 7:50 am
Don't work in IE, only bad point to an otherwise fantastic piece of kit. FB markup SUCKS!
csjthomas
October 4th, 2010 at 8:30 am
haven't tried yet, but it seems really cool. good work. thank you for sharing your codes!
Daniel
October 5th, 2010 at 9:24 am
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?
alex
October 7th, 2010 at 7:52 pm
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???
jrutter
October 10th, 2010 at 10:31 pm
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.
paul
October 14th, 2010 at 10:39 am
Hi Jake,
Is there any fix with the ie 8 issue just noticed it works on here in ie8
jrutter
October 14th, 2010 at 7:43 pm
I havent changed anything, not sure.
paul
October 15th, 2010 at 3:32 am
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.
paul
October 15th, 2010 at 3:39 am
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.
Wim
October 15th, 2010 at 9:39 am
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
Wim
October 20th, 2010 at 3:52 am
I removed the parameters sitetitle, site_name and image and placed them in the head myself and now it works.
Kr,
Wim
RzSwede
November 21st, 2010 at 8:47 am
Great – but is it possible to have multiple Likes on the same page?
Stas
December 31st, 2010 at 3:55 am
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
jrutter
January 7th, 2011 at 7:29 am
appId allows you you to track your like button thru facebook.
Terence
January 12th, 2011 at 12:41 pm
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.
Roman
January 23rd, 2011 at 10:56 am
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.
IrishManinUSA
March 23rd, 2011 at 10:45 am
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.
@nebrekab
March 30th, 2011 at 11:18 am
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'});
@nebrekab
March 30th, 2011 at 11:28 am
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'} );
}
);
}
);
tanya
April 12th, 2011 at 10:19 am
how do I call the site images when I have multipe buttons which each entry have its own images.
Kira
May 1st, 2011 at 7:59 pm
how to get the appID?
Ruchi
August 16th, 2011 at 9:41 am
You will have to go to facebook developer link and the set up new app…
Haab Naseem
August 26th, 2011 at 10:15 am
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 ?');
},
jrutter
August 27th, 2011 at 8:18 am
You can unlike using the current implementation, you do not need to add another function. Not sure what you are trying to achieve here.
jrutter
August 27th, 2011 at 8:19 am
I have included the link where to get a Facebook App ID in the tutorial.
jrutter
August 27th, 2011 at 8:19 am
You will need to create separate instances of the like button – where are you trying to do this? On WordPress?
jrutter
August 27th, 2011 at 8:20 am
Yes, case is important when using this plugin.
jrutter
August 27th, 2011 at 8:21 am
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;
});
jrutter
August 27th, 2011 at 8:22 am
Have you tried using Firebug in Firefox to determine the class or id that is wrapped around that piece of text?
jrutter
August 27th, 2011 at 8:24 am
The code that is generated for the button on developers.facebook.com does not included advanced features, it is the basic implementation.
Ioa Gia
September 15th, 2011 at 2:28 am
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 ?