How to add Facebook LIKE button to your site via XFBML tag

16 comments

Lori's picture
by Lori
on 25 April 2010 - 8:15pm

I tried using the XFBML version of the Like button, but had problems with the comment box. The button itself appeared but the comment box is clipped off - only the first couple of lines appear.

I had the button in a table to line it up with other items and then I tried using divs, but neither approach allowed the comment box to be displayed. Any ideas?

boydchan's picture
by boydchan
on 26 April 2010 - 6:48am

ผมขอเวอร์ชั่น WP ด้วยได้ไหมครับ เอาแบบง่ายๆ แต่ feature เยอะๆ อย่างที่คุณทำกับ siwalee.com เว็บอู่อะไร เมพชัดๆ!!!

Francesco Martino's picture
by Francesco Martino
on 30 April 2010 - 8:52am

Hello there. Very nice post, I have been looking for something like this in the last week. Could you please suggest me where exactly should I add the XFBML schema, Metadata, and JavaScript in order to implement it in a Wordpress blog?!

Thanks for your help..

PangPond's picture
by PangPond
on 5 May 2010 - 5:07pm

Easy!! please check this entry how to add facebook like to wordpress blog

Anonymous's picture
by Anonymous
on 30 April 2010 - 8:35pm

hi

i used your example to put flike into my page, but it doesn't work when i click i have an error "The application ID specified within the "fb:app_id" meta tag is not allowed on this domain. You must setup the Connect Base Domains for your application to include this domain."

do you have any idea why this is happen ?

thank's

PangPond's picture
by PangPond
on 5 May 2010 - 5:12pm

Re-check your application id in Step 3 and 4.
note : the domain name that you use in facebook application must be the same as your render domain
(www and non-www is different)

Eric Di Bari's picture
by Eric Di Bari
on 30 April 2010 - 9:15pm

This was one of the most straight-forward tutorials I've found on this topic. I did notice though that in the 'FB.init' function, it was missing the variables: status: true, cookie: true. My like button wasn't working at first, but seemed fine after I added those variables. It may be just some latency caused through the Facebook API though. Do you know if these are necessary variables?

PangPond's picture
by PangPond
on 5 May 2010 - 5:20pm

Sorry Eric, status: true, cookie: true is necessary variables that I forgot to add in this article :P

Andrey Stefanenko's picture
by Andrey Stefanenko
on 1 May 2010 - 7:50pm

Thanx, helpful post, it works fine.
Seems like XFBML is more andvanced and technically savvy than iframe ;-)

Anonymous's picture
by Anonymous
on 3 May 2010 - 4:05pm

i have an error when i click the button like "The application ID specified within the "fb:app_id" meta tag is not allowed on this domain. You must setup the Connect Base Domains for your application to include this domain."
do you have any idea ? if i don't put the fb:app_id tag it works, but i don't sea the comment box neither.
thanks !!

PangPond's picture
by PangPond
on 5 May 2010 - 5:17pm

re-check your domain in facefooc app (www and non-www is different)

Edward's picture
by Edward
on 6 June 2010 - 5:24am

This is a great tutorial but I'm having issues. Here are the three problems that I'm having with the like button:

1. It's pulling and posting the page title instead of the defined meta property="og:title".
2. It's pulling and posting a random image off of the page instead of the defined meta property="og:image".
3. It's not posting the description from the meta property="og:description".

I added this to my html tag:

xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">

Here's my meta tags code:

meta property="og:title" content="My sites title."/>
meta property="og:description" content="My webpage's description."/>
meta property="og:type" content="website"/>
meta property="og:url" content="http://www.domain.com"/>
meta property="og:image" content="http://www.domain.com/images/picture.gif"/>
meta property="fb:app_id" content="xxxxxxxxxxxxxxx"/>
meta property="fb:admins" content="xxxxxxxxx"/>

Immediately after the body tag I have the following:

div id="fb-root">
script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: "xxxxxxxxxxxxxxx",
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>

And finally, where the like button is displayed I have this:

fb:like width="300" height="35" layout="standard" show_faces="true" href="http://www.domain.com" colorscheme="light">

The code looks correct to me. Why is it not pulling and posting the correct information from the meta tags?

Thanks.

Note: I removed all of the <'s from the post so that the code would post correctly.

nitin's picture
by nitin
on 10 October 2011 - 10:43am

I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept. Thank you for the post.
<a href="http://www.abhealthinsurance.com/">health insurance company</a>

nitin's picture
by nitin
on 10 October 2011 - 10:56am

I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept. Thank you for the post.
<a href="http://www.abhealthinsurance.com/">health insurance company</a>

Howie's picture
by Howie
on 9 November 2011 - 4:59pm

Remove the trailing / after your domain name in the Facebook settings page.

Howie
http://www.speechesforwedding.info

auto diagnostic tool's picture
by auto diagnostic tool
on 6 February 2012 - 7:35am

In 1996 the EPA(Environmental Protection Agency) mandated that the computer interface for all vehicles sold in the United States should meet a common standard. This means that consumers could go to an auto parts store and pick up an inexpensive scanner to pull the codes from the ECM themselves.

Post new comment

© 2010 Pangpond.. Theme by Kiwi Themes.