WP LOGBOOK

Little adventures building sites with Wordpress…

Add Facebook Like Button Like The Pros do (No iframe)

with 5 comments

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

Advertisements

Written by Yahya Ayob

April 26, 2010 at 11:19 pm

5 Responses

Subscribe to comments with RSS.

  1. 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

  2. Nice tip here. Exactly what I needed. Thanks

    Thomas Chai

    May 25, 2010 at 1:38 am

  3. 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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: