Thursday, April 19, 2012

moving Facebook Social Plugins from IFrame to HTML5

This weekend, I migrated Facebook Social Plugins for the Naval Reactors History Database site from the legacy IFrame apps to HTML5 apps. I found this procedure to be helpful in accomplishing the migration. I'm embedding this JavaScript snippet into XTF's XSLT at appropriate points (the search and results pages code):

There are a number of benefits of moving from IFrame to HTML5 apps. As one example, I'm now including the Send button, along with the Like button, on the nrhdb site.

Note that you need to have claimed your Facebook e-mail account before the Send button will function. Here's a Facebook Developers discussion on this point; a poster describes this requirement in the thread.

This was a pretty easy upgrade and I like the result, though embedding the plugins in the context of XTF's structure made it more challenging.

Postscript: I obtained much better results for pulling in the comments stream for the Comments plug-in by mounting the information pages on an Apache server, instead of Tomcat 6. When the info pages were served by Tomcat, the comments stream pages were frequently truncated, with a status bar appearing on the screen indicating the content was being loaded.