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:

  1. jQuery – Requires 1.4.1
  2. Facebook Application ID – Get one here.
  3. 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:

[html]
<script type="text/javascript" src="../js/jquery.onefblikev1.0.js"></script>
[/html]
[html]
<div id="fb-like-example"></div>
[/html]
[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.

Categories: jQueryOpen Source

40 thoughts on “jQuery Facebook Like Plugin”

@invocoes · June 30, 2010 at 3:02 pm

Got to implement this one very soon 🙂 I do not like that iframe stuff

    jrutter · June 30, 2010 at 10:50 pm

    Yes, I didnt like the iframe option either – their JavaScript SDK is actually very slick!

Michael Pehl · July 20, 2010 at 7:35 am

Implementing it! I like that one, good work and thanks for sharing 🙂

MissScript · July 30, 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 1, 2010 at 12:57 pm

    Can you post your code? Thanks.

Moonwalker · August 22, 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 2, 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 ….)

    wing_man · November 9, 2012 at 4:28 am

    hi

    can you help me…
    where am i going to include the code: code example 1,2,3 and the Options:
    i had already a facebook app id..
    tnx..
    pls help me…

Bryn · September 8, 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 4, 2010 at 8:30 am

haven't tried yet, but it seems really cool. good work. thank you for sharing your codes!

Daniel · October 5, 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 7, 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 10, 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 14, 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 14, 2010 at 7:43 pm

        I havent changed anything, not sure.

          paul · October 15, 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 15, 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 15, 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 20, 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 21, 2010 at 8:47 am

Great – but is it possible to have multiple Likes on the same page?

Stas · December 31, 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 7, 2011 at 7:29 am

    appId allows you you to track your like button thru facebook.

    jrutter · August 27, 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.

Terence · January 12, 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 23, 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.

    jrutter · August 27, 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?

IrishManinUSA · March 23, 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.

    jrutter · August 27, 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;
    });

@nebrekab · March 30, 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'});

    jrutter · August 27, 2011 at 8:20 am

    Yes, case is important when using this plugin.

@nebrekab · March 30, 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 12, 2011 at 10:19 am

how do I call the site images when I have multipe buttons which each entry have its own images.

    jrutter · August 27, 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?

Kira · May 1, 2011 at 7:59 pm

how to get the appID?

    jrutter · August 27, 2011 at 8:19 am

    I have included the link where to get a Facebook App ID in the tutorial.

Ruchi · August 16, 2011 at 9:41 am

You will have to go to facebook developer link and the set up new app…

Haab Naseem · August 26, 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 27, 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.

Ioa Gia · September 15, 2011 at 2:28 am

How can i set the siteImage option?

I do something like this:
siteImage: 'http://www.mysite.com/image.gif&#039;,
but it doesn't work…

Any idea ?

HexColor · June 12, 2012 at 8:43 pm

I have bookmarked this article because these jQuery tools are going to help me on my future projects saving me from coding from scratch

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

HTML5

HTML5 Local Storage and Web Personalization

I have just finished doing some research on using HTML5 Local storage instead of Cookies for website personalization and have come to the conclusion that everyone should be using HTML5 local storage in place of Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…