Add Facebook Like Button Like The Pros do (No iframe)
I am very impressed with Facebook Like buttons in certain sites that partnered with f8 team. A site like Flixster.com allows the user to like a movie and add comments on the spot which will be published to the user profile wall.
So here’s how you do it like the pros do.
Inside header.php, you need to add this:
xml:lang="en" xmlns:fb="http://developers.facebook.com/schema/" xmlns:og="http://opengraphprotocol.org/schema/"
right after this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
After that, add this to any location in the loop inside single.php:<div id=”facebooklike”>
<fb:like href="<?php echo rawurlencode(get_permalink()); ?>" layout="standard"
show_faces="true" width="400" action="like" font="verdana" colorscheme="light" />
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'insert your app id here', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</div>
And for the css tweak :
#facebooklike { margin: 10px 0px -25px 0px; }
That’s about it! Hope this helps! =D
Unfortunately this code does result in the generation of an iFrame around the Facebook Like button.
doc4
May 24, 2010 at 1:31 pm
Yeah, you’re right. When you firebug the button, you can see there’s iframe coding inside even if you use the FBML and javascript option.
But in general as in the eyes of users and bloggers and for the sake of simplicity, Facebook named the 2 options as iframe / fbml, thus the 2 different codes as in iframe coding and the fbml+javascript coding.
The purpose of this post is to show the simplicity of using either one of them and my recommendation is to use the FBML+javascript because of the extra box comment feature.
Yahya Ayob
May 24, 2010 at 1:55 pm
Nice tip here. Exactly what I needed. Thanks
Thomas Chai
May 25, 2010 at 1:38 am
Yr welcome. Glad this was found useful. =)
Yahya Ayob
May 26, 2010 at 10:02 am
i just restored a back up sql for my site… after it was sabotage a couple of days ago… i had the like button…using this code in my single.php:
<iframe src="http://www.facebook.com/plugins/like.php?href=ID)); ?>&layout=standard&show-faces=true&width=500&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:500px; height:60px”>
but now it seems that only my older post articles before the restorations will appear on my facebook profile when i click the like button… my new posts articles dont seem to appear anywhere… do you by any chance know whats goin on?
Thanks a bunch
Min
June 5, 2010 at 3:29 am