04 May 2010

Use XFBML tags instead of Iframes with new Facebook “Like” buttons

How to Facebook 20 Comments

If you use XFBML tags in your website versus the iframe option, you can have much more control over how they act and also iFrames are not always compatible with browsers

After several hours of trying to figure out how to get these new Facebook Social Plug-ins to work in both Firefox and Internet Explorer, I figured it out.

You must include the code below in between your <HEAD></HEAD> tags.

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<script src=”/xfbml/xfbml.js”></script>

Let us know if you get stuck and we can help you implement it into your site.

Meet The Author

Jarrett Gucci also know as Mr. Internet Tips is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 300 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

Facebook Twitter LinkedIn YouTube 

Did you enjoy this article?
"Subscribe & Get my FREE Ultimate YouTube User Guide & Secrets"
Subscribe to our Blog and get an instant download to the Ultimate YouTube Guide & Secrets complete with special tips and tricks to make your videos more visible online.



Post comment as twitter logo facebook logo
Sort: Newest | Oldest

Thanks for clearing that up. I'm guessing that the XFBML version is the newer format to use?

XFBML is meant to work on more browsers but I have just found that the XFBML version does not work on older versions of Internet Explorer whereas Iframe does so will be switching ours to iframe.

I have been trying to implement the like button for a while, with limited success. Using the iframe, does not allow the use of the send button, and its overall usefullness and automation is limited. Looking the what type of page it is ( ), it appears that is is above the head, not in the head. The meta tage go in the head. I think most people will need to have the site developer inplement these tages above the head, and most users could probably add the meta tags that are required in the head. If the page type specified will work if put in the head, that would be nice... I still have not had success with that. Looking at the source code for this page, the face type is also above the head, not in the head,.

Try this page for full details on install with Send button. http://developers.facebook.com/docs/reference/plugins/like/

Hi, will it be possible to hide something from within a blog post in blogger? Not from the template but for each entry. thanks

This is not possible in Blogger.

Jarrett - will the March 1st changes I've been reading about effect this code? sorry for the duplicate, the Disqus system didn't take the 1st time around.

This will not effect it at all.

Jarrett - will the changes coming March 1st effect this code?

Pasted the above code into my Joomla index.php file between the head tags and am having no luck. Any thoughts? Thank you in advance, Donna

Put it in your header file not the index file.

I am working with DreamWeaver CS5. HTML, and I cannot get the Like button to drop into my page. Quite frankly I do not have the desire to study this so I am hoping you can just explain this better to me. I dont really care about the iframe or XFBML, I just want the button that links the website with the FB. When i drop the iframe I get a giant green block with no writing. When I drop the XFBML i get literally no change whatsoever. Am I missing something here?

This post contains absolutely no useful information - what on Earth are you trying to say? There aren't even any links to useful resources.

What exactly are you looking for?

What does Youtube use for its comment system? There is no page refresh when commenting or navigating through the comments.

Not sure what they use.

I don't understand how we are supposed to "bellow" the code between the tags. I spent hours reading through other documentation available online about "bellows" (ex, http://en.wikipedia.org/wiki/Bellows). Unfortunately I was fruitless in my search. On a more serious note. This is some good information. :)

Thanks for the sharp eye and nice comment. Hope you share with your friends.

Facebook

Twitter

YouTube