How to create an iframe Facebook Page with content from WordPress

[box type=”note”]There’s an updated tutorial on creating custom Facebook Pages here.[/box]

It is fairly easy to create custom tabs for Facebook Pages using static FBML app and a few codes of html. Copy-and-paste FBML codes abound on the web and numerous services–both free and paid–have grown around this app. The popularity of static FBML rests on the fact that it is an easy and the ONLY way to put a unique brand/personal touch to a Facebook account; so you can imagine, everyone from big companies (Coke keeps cropping up as example) to small-time Filipino web designers ;-) have used static FBML app to brand their own Facebook Pages.

But recently, Facebook announced that they are going to deprecate the use of FBML in favor of iframe for Page tabs. Starting March 11, 2011, reports say you won’t be able to add static FBML apps as Page tabs. Although all existing FMBL tab and apps will continue to function, and will still be able to be edited for the immediate future, it is believed that Facebook will eventually remove FBML entirely.

So what does this mean to people who want a custom Facebook Page but are not html savvy?

I headed over to the Facebook developer area to assess the difficulty of creating a custom Page tab using the new iframe. The result of my first attempt ended with this: a Feedburner list of my latest blogs embedded right inside my own Facebook Page (view).

My verdict is that, yes, it will be quite difficult for non-web-savvy folks to deal with the new iframe compared to static FBML. Not only do you need to go thru the hassle of first connecting the developer app to your account before you can create an iframe tab; but you MUST also have a remotely hosted web page, then have to go thru several steps creating the apps settings, before you can finally add the app to your Page.

But it did hit me, one good thing about having an iframe–and probably the main reason why Facebook has decided to go down this route–is that now you can embed a remotely hosted website inside Facebook. And for many people who are not knowledgeable in html, there are already a host of online tools and services that help create a website without html know-how. And naturally, the first application to come to my mind is WordPress.

So I did another test. I created a WordPress page template that will fit inside the constrained layout of a Facebook Page and added an image (via WordPress’ built-in media uploader), a flash slideshow from flickr, javascript from feedburner, and a post tab plugin to the content. Then I created another iframe app in Facebook with the source pointing to the WordPress page I created earlier, and added the iframe app to a Facebook Page. The result is this sample demo page.

It works. And I see a lot of potential for this new way of connecting WordPress content and Facebook Pages.

The initial hurdle for many people will be the extra steps in creating the iframe app; but, if you already have a WordPress site for publishing html pages and you are not intimidated by the technical jargons while creating the Facebook apps settings, you will see it’s really not that hard to create a custom Facebook Page using the new iframe method.

Ok if you have read this far and are now wondering where the f#@!ck is the tutorial, it is not here! :-) I published the tutorial on my hubpage. Go take a look. If you can read and you are smart enough to follow step-by-step instructions, you can have your first iframe app in Facebook up in no time.

4 thoughts on “How to create an iframe Facebook Page with content from WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *