Like button - XFBML or Iframe

Question

I'm about to incorporate Like buttons into my web site - it'll be the first time I've incorporated Facebook fubctionality - and would like some guidance on whether to use the XFBML option or the Iframe option. It seems as though XFBML offers more flexibilty for the future, but a) are there any disadvantages to this approach, and b) is the HTML5 compliant version better still? Thanks.

Answer 1

If you want it quick and non-intrusive code in your website use IFrame, but the SEO could be affected.

If you want to add more features use XFBML or HTML5. But that's required use ncluding the JS SDK, but IMHO it will be better in a long term

Answer 2

FBML is going away in the next 6 months, see https://developers.facebook.com/docs/reference/fbml/, so that won't be a good long-term option. (FBML and XFBML are not the same.) XFBML is a valid way to do it, but the syntax takes some getting used to. Requires running the parsing code on your webpage, not really a big deal, but it is to some web site owners.

HTML5 is the way I do it, but requires running the parsing code on your webpage, not really a big deal, but it is to some web site owners.

The iFrame option works great, but as with any other way, always be sure to check Facebook to see if they're going to deprecate it.

Answer 3

XFBML is not going away and is different than FBML. I too was confused about this since all of their social-plugin example code still gives you the xfbml option.

See https://developers.facebook.com/blog/post/568/

Please Note: Our deprecation of FBML does not impact XFBML (eXtended Facebook Markup Language). XFBML is a set of XML elements that can be included in your HTML pages to display Social Plugins. When your page is loaded, any XFBML elements found in the document are processed by the JavaScript SDK, resulting in the appropriate plugin being rendered on your page. The JavaScript SDK will continue to support XFBML after the deprecation of FBML (save for the fb:serverFbml element which is used to execute FBML on our servers).

HTML5 / XFBML / IFRAME? I don't think it makes much difference. Once the facebook api is initialized all of them end up as iframes. You can see this if you inspect the element with firebug or chrome. Maybe not as standards-compliant, the xfbml version is probably more peformant since getting a bunch of elements by tagname is faster than by classname.

Once caveat with the HTML5 version is that if you plan to subscribe to the plugin's events, you'll need to add a channel file when you initialize the api. The xfbml versions work fine without it (at least as of this writing).