jQuery Facebook Like Plugin

40
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:

  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:

<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.

  1. 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.

  2. 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 ….)

    • 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…

  3. 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?

  4. 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???

  5. 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

  6. 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.

  7. 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.

  8. 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;
      });

  9. 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'});

  10. 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'} );
    }
    );
    }
    );

  11. 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.

LEAVE A REPLY