FaceBook Like Button
FaceBook says - the Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user’s friends’ News Feed with a link back to your website.
We say - When someone clicks on the Like button, a post appeares on their Wall on FaceBook.
To get a FaceBook Like Button go developers.facebook.com/docs/reference/plugins/like/
Get Like Button Code
One possible set of options -
The Width field, if you don’t want to show your lousy score of likes (any count below 10,000), set the width exactly the buttons’ width: 86px (button Recommend) or 46 px (button Like), the count window gets cut off then.
Before FaceBook reveals you the code, you have to verify yourself. You enter your mobile number, FaceBook texts you a PIN. You enter this PIN on the same popup window. Done. After few seconds you get another SMS on your mobile device asking to enter the PIN and text it to somewhere in USA. Discard this, it’s a pure scam.
Copy/paste the code.
Note: Facebook grabs the next image above in the code of front page to show it in your post on the Wall.
Test FaceBook Like Button
If you yourself click on Like/Recommend button, nothing much happens. To test the FaceBook Like Button create a test account or ask a friend to click on your FaceBook Like Button. The last is more appreciated as you get one more inbound link as well.
When checking out on other web sites how the FaceBook Like Button works do not be surprised if you do not see any posts appearing on your FaceBook Wall. We went through many authority sites and the only one that worked properly was the BBC "Post to Your Wall". And the second functioning one is ours on Jiddu-Krishnamurti.net now. Even the FaceBook Like Button on Sky.co.uk was somehow sick - it triggered an infinite fire of popups on Firefox. F5 to kill them. IE however behaved bit more peacefully.
So, FaceBook Like Button IFRAME code is implemented. Bye-bye valid web site...
FaceBook Like Button Samples
There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK.
IFRAME code for FaceBook Like Button
<iframe src="http://www.facebook.com/plugins/like.php?app_id=151901738215676&href=http%3A%2F%2Fwww.tuljo.com%2F&send=false&layout=button_count&width=90&show_faces=false&action=recommend&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:140px; height:21px;" allowTransparency="true"></iframe>
XFBML code for FaceBook Like Button
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=151901738215676&xfbml=1"></script> <fb:like href="http://www.tuljo.com/" send="false" layout="button_count" width="140" show_faces="false" action="recommend" font="arial"></fb:like>
Implementing XFBML FaceBook Like Button.
In order to use XFBML on your webpage, you must add an XML namespace attribute to the root <html> element of your page. Without this declaration, XFBML tags will not render in Internet Explorer.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Loading the SDK Asynchronously
The most efficient way to load the SDK in your site is to load it asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots/spiders. Below outlines an example:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({appId: 'your app id', status: true, cookie: true,xfbml: true});
};
(function(){
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Testing FaceBook Like Button
Test with IE (or some other browser) because Firefox reacts erratically to FaceBook Like Button. When you click on your brand new FaceBook Like Button a dialog box appeares even on Internet Explorer 6.0:
Somewhat user unfriendly is FaceBook navigation as well. To see the result of your test click, you log in to Facebook, click Home, then on your avatar and then Wall. From the user point of view the Wall should be accessible with fewer clicks. Assuming FaceBook knows what it does, this mess must serve some of FaceBook's clever business interests...
Social media is bazooka in hands of an SEO ninja!
Facebook Like Button Flickers
SEO ninjas fail. Facebook is technically crap. Facebook’s Open Graph is in direct conflict with w3c validation requirements.
Facebook Scrape and Open Graph
One possible reason why Facebook Like button flickers is that Facebook is unable to scrape the site for details. Use the Object Debugger to see whether Facebook scrapes the site successfully - developers.facebook.com/tools/lint/.
You might have to append some random url parameters to your URL to force Facebook to check your page again, and not use a cached version, like so: example.com?randomstring
Facebook Open Graph tags are not a must, however, as soon you use one you must use all six tags.
After inserting Facebook Open Graph tags into the head section Facebook test-lint will tell you: “Errors that must be fixed. Meta Tags In Body. You have tags ouside of your . This is either because your was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.” Facebook is funny. Forget about the Open Graph tags.
Facebook Cookies
A quite probable reason for Facebook Like button flicker is third party cookies. Enable the third party cookies in your browser and Facebook Like button works! How to make your privacy concious users to allow the third party cookies is another story.
Problems on Facebook Side
Few months later Facebook Like button did not flicker any more regardless whether the third party cookies were accepted or not. This allows to assume that something was wonky on Facebook's side. No more Facebook flickering problem.
If cookies are used in a site, the Privacy and Electronic Communications (EC Directive) (Amendment) Regulations 2011 (Cookie Law) provide that certain information must be given to that site's visitors and the user must give his or her consent before the cookie is placed.
2011 2012
Facebook like button goes along with many social media marketing and search engine optimisation aspects.