Posted 8/Sep 2011 at 14:14
by in Science & Tech read by 481 people

Official; Facebook now supports a new HTML5 implementation method for social plugins

I maintain a number of websites, and basically every website I maintain does something with Facebook. A bit scary, in a way actually, to realize how much control I give away to one entity. Well, not just one - a whole set of entities. Facebook, Google and often also GetSatisfaction or Woopra. And then some to Twitter. Anyway, that's not the point.

Update: I just noticed on the Facebook social plugin code generate tool, that they now indeed officially support a new HTML5 embed method.

Yesterday I opened Ilikealot and noticed that suddenly it there were two Like buttons rendered in the header instead of one. And it looked weird too. So I went digging in the code. Inspecting the rendered source, and could only come to the conclusion that one <fb:like /> button tag was rendering two buttons. So I removed it. I refreshed. And the weird looking Like button was still there.

Then I wondered if perhaps I had changed something in the javascript myself that parses an element with a classname starting with fb- into something from Facebook. But no, I did that somewhere else. But not here. I checked some other sites I maintain, and they all suddenly had the same problem. So, I concluded that it must have been Facebook applying some kind of change to the social button integration code. And that they apparently are starting to support embedding their social buttons without the <fb:* prefixed tags, but with class names instead.

Good thought, but I would have liked to be informed beforehand. The <fb: prefixed tags are hard to get through an HTML validator, sometimes mess things up a bit in IE and don't offer friendly support for graceful degradation.

In the end, the solution was simple. Wherever I used to wrap a <fb:* tag inside a <div class="fb-like> .. </div> I changed the classname to xfb-like and that got rid of the problem.

And now I'm just waiting for documentation on how I can fully take advantage of the fb-like classname. 

You might also want to explore these likealots