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 – Compatible up to 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:

• Download from code.google.com
• Download from plugins.jquery.com

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:

• Facebook Linter
• Facebook Like Button Developers Reference