Update! I have created a new script called Multiple W3C Valid Facebook Like buttons that can be used as an alternative to the script below. Please try both scripts to evaluate the best one for your site.
Having spent the past couple of weeks creating new tools for my freelance user interface design work, I thought I would share some of my work amongst my blog followers and those struggling with the Facebook like button.
Although it's a great feature to have a Facebook like button on your website, the standard files provided by Facebook are not W3C valid, which if you are like me and you strive for perfection; will make you annoyed and wishing for coherent web standards. Well don't stress! I have created a simple Facebook like button that is W3C valid and sits nicely within the page, allowing for asynchronous transfer of the Facebook JavaScript files so your site won't feel the impact of downloading the script from Facebook.
Try it for yourself and download the facebook-like-button.zip at the bottom of this page. And please give me some credit or at least click my Facebook like button at the top of this website - I need the love too you know...
Enjoy!
| Attachment | Size |
|---|---|
| facebook-like-button.zip | 4.7 KB |
9 Comments so far | Add new comment
Justin,
This is exactly what I've been looking for. I'm only just getting into this and could really do with some instruction as to how to install it...
any pointers?
Hi Thomas,
1. Open the facebook.js file and edit the API details within the fbAsyncInit function:
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
To get new Facebook API details you should visit the Facebook developers page at: http://www.facebook.com/developers/ and sign up to the service. After this is complete, you should be at your developer profile page, if so click the 'Set Up New Application' button. Alternatively Facebook may ask you to create your first app. Follow the instructions for both options and create a new Facebook application by providing a name such as 'My Website Like Button' and agree to the Facebook terms, then click 'Create Application'.
You will now have an App ID to use when editing the fbAsyncInit function. Copy the provided Application ID numerical string paste it into the fbAsyncInit function, overwriting the text 'your app id'.
Next edit the text:
document.write('<fb:like href="http://www.jnorton.co.uk/'
Replace my domain name with yours.
Finally, go back to the Facebook page and click the 'Connect' tab on the application edit screen of your newly create FB app. Enter your website URL in the text field labeled 'Connect URL'.
2. The provided JavaScript (facebook.js) should be included within the BODY of your HTML document using the folllowing markup:
<div id="fb-root"></div>
<script language="javascript" type="text/javascript" src="/js/facebook.js">
</script>
This will include the facebook.js JavaScript file that is located within the js directory on your server's public HTML root. If you don't have a folder called this, create one using an FTP client and upload the facebook.js file to this folder.
That takes care of web page integration.
If you need more help then let me know. As it stands the Facebook like button is great to use but could be improved technically as it makes a web page behave strangely at times.
Cool work! I'm using your script and pushed the LIKE button...
To be really valid you have to delete language="javascript" in the script tag.
Thanks so much for sharing your wisdom, it's helped a treat! I've been getting so frustrated with social networking apps like Facebook's wigits not being W3C compliant, this works perfectly! Well done!
Thanks again,
James.
Many thanks for this script!! it works perfect even in IE! I tried a similar script for the +1 google button, but didn't work in IE, but in this case you made it perfect. And very easy configuration too! i recommend it to everyone
Hi and thanks for that Button,
but i get another Validation Error ,
I like to use the button on a blog with more than 1 Article. The Problem is the fb-root id. With more than 1 Article it isn't valid anymore. Do you have an idea ?
Thx 4 answers
Hello, I have created a new script that is available here: http://www.jnorton.co.uk/blog/multiple-w3c-valid-facebook-buttons - enjoy!
First of all, thanks for your work and for sharing it.
I'm completely new to script, java and so on, so I have no idea how to install all. I did all in changes, I put after the body tag the " <div id="fb-root">......</script> ". My questions are:
<div class="fb-like" data-href=http://www.facebook.com/pages/***/data-send=..............."false"></div> ) or do I have to change something here?
Please help an old ma'am :)
Thanks in advance
Lio
Hi Lio,
You are probably best learning some HTML and JavaScript as I can't (don't have enough waking hours) help everyone to get up to speed. Sorry about that and good luck with getting the script set up. :)