Bloody hell this was more cryptic than it should have been. You have two options.
Easy way
First option is the deprecated (but still used on YouTube) "share" button.
You simply just create a link in a new window like:
<a rel="nofollow" href=http://www.facebook.com/sharer.php?u=encodedURL&t=encodedTitle">Facebook</a> It's easy because you can style it whatever way you want.
Drawback is you can't display the number of shares/likes.
Hard way
OK, don't say I didn't warn you.
- Sign up for a Facebook developers account.
- Once you're done, click on "Create new App" (umm yeah "App", right... wtf?)
- When you fill in the "App Domain", be sure to tick "Website" below and fill that in too. It's stupid, I know. Otherwise you'll get an error:
Error
You have specified an App Domain but have not specified a Site URL or a Mobile Web URL
thatawesomeshirt.com must be derived from your Site URL or your Mobile Web URL.
- Now in your page HTML, add "og" and "fb" namespaces:
<html
lang="en" xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"> - In the HTML <head> tag, add in the following properties:
<meta property="og:title" content="That Awesome Shirt!" />
<meta property="og:description" content="The best shirts from a collection of online stores rolled into one site for you to browse, add to your wishlist and rate." />
<meta property="og:image" content="http://www.thatawesomeshirt.com/media/images/logo75.png"/>
<meta property="og:url" content="http://www.thatawesomeshirt.com/ "/>
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="That Awesome Shirt" />
<meta property="fb:admins" content="00000xxx" />
<meta property="fb:app_id" content="00000xxx" /> - Remember to change fb:admins and fb:app_id to your IDs. It's on the app dashboard.
- Man, what a face full of crap. Good thing is the OpenGraph meta tags seem to be used by a bunch of other services now so the hard work won't be only for Facebook.
- Bad news is when you realise all those tags change dynamically on each page...
- Finally, to add the "Like" button... go to the Like Button page and generate the HTML.
- Paste the script at the top of the <body> tag.
- Paste the <div> where you want the share button to appear.
- Finally, you're done.
Extra reading
If you want to detect when the user has Liked or Un-Liked your content, you can modify the script a little.
<script type="text/javascript">
function fb_callback(add_or_remove) {
alert(add_or_remove);
}
// This allows you to detect when the button is clicked.
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
fb_callback(true);
});
FB.Event.subscribe('edge.remove', function(response) {
fb_callback(false);
});
};
// Normal loading of the SDK asynchronously below
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=00000xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script> 
Facebook, making you do things the hard way.
See my other posts about sharing buttons for Twitter and GooglePlus.
Sources
