How to create an iframe tab for your Facebook Page with content from WordPress

Perhaps you have seen great looking Facebook pages like that of Coca-Cola, and want to have the same customized page for your own business.

It was fairly easy to do something similar using Facebook static fbml apps and a smattering of html knowledge (or with the help of html editors). But recently, Facebook announced that they are discontinuing support for static fbml and developers are instructed to use iframe tabs instead. By March 11, 2011 you will no longer be able to add static fbml apps to your Facebook pages.

So what are you to do?

Well, the quickest way is to head on to online services that offer custom Facebook Pages for a monthly subscription fee, or hire a web developer-- ehem! :-) --to do the dirty work. But if you want to save precious dollars, you don't really need all the features in paid Facebook apps maker, AND you're smart enough to follow simple step-by-step instructions, let me show you how to make a custom Facebook page using iframe tabs, with content that you can easily add/edit/update using WordPress.

Now obviously, there are a few requirements for this to work:

• You must already have your own WordPress site and know how to create posts and pages in WordPress.
• You know how to upload a new page template to the server hosting your WordPress site.
• You know how to create images using Photoshop or any image editing software.

1. The content area in a Facebook page is limited to a 520px width. The first step, therefore, is to create a WordPress page template that fits inside a 520px wide content area. If you don't know how to create a template, you can download the basic template I used for this tutorial from this link.
2. Upload the template I created (page-iframe.php) to your WordPress theme folder. In WordPress admin, it will show up in your template options as "FB iFrame".
3. Create the page that will go into the Facebook iframe. Here are a two things to remember when creating your page:
   1. Images must fit inside 520px width.
   2. Links must open in a new window (target="_blank") or reload the entire page (target="_top"), otherwise your links will load inside the Facebook frame.
4. In my example, I created an image 520px wide and 600px high using Photoshop, uploaded the image to my WordPress site (using Wordpress' media uploader) then embedded it on the page thru the page editor.
   
5. Publish your page, view your new page in a browser and copy the url of your page.
   

1. Login to your Facebook account then go to http://www.facebook.com/pages/create.php
2. Select the type of Page you want to create and fill in the required information.
3. Edit you Page settings if you like by adding profile picture, company information, etc.

1. Log in to your Facebook account, then head on to http://developers.facebook.com/.
2. If this is your first time to access the developers page, Facebook will ask you to allow access to your account information.
3. Click on "My Apps".
4. Click on "Set Up New App".
5. Fill in "App Name" and Agree to terms.
6. Answer the captcha security check.
7. Your app is created and you are taken to the app settings page. The important section is "Facebook Integration" shown below.
8. Fill in the following information:
   1. Under "Canvas Page" place a base url for you app, in my example "custombizapp".
   2. Under "Canvas URL" place the url of you website, in my example "http://www.yoursite.com/". Don't forget the trailing slash.
   3. Under "Tab Name" put a label that will appear on you Facebook Page menu. In my example "Welcome".
   4. Now refer to the url of the page you published in WordPress (Part 1 - step 5) and take the subdirectory name. In my example, the subdirectory is underlined in red. Enter the subdirectory name under "Tab URL".
9. Save your settings and your new app is added to the "My Apps" list.
10. Now click on "Application Profile Page".
11. Click on "Add to My Page" and from the list of pages that pops up, select the page you created in Part 2.
12. Browse to your Facebook Page and you will see the custom app "Welcome" added to your Page navigation. Click on the link and you should see the page you created in WordPress inside you Facebook Page.
13. If you want Facebook users to go directly to your welcome app when visiting your page, edit your Page settings by clicking on "Edit info", select "Manage Permissions" and under "Default Landing Tab" select your welcome app.

Here is a demo of a Facebook page I created with content from WordPress.

You can easily update your Facebook Page from WordPress. If you are not an expert with html, the WordPress editor will take care of creating the html page for you. Wordpress plugins (but most likely not all plugins) will work inside your Facebook page so you can add more cool stuff to your page, like in my example, I used Post Tabs, Google Fonts and NextGen Gallery plugins. I have not tested this but I would think other plugins like shopping carts would also work so now you can extend your online store from your site into Facebook.

I'm a freelance website designer from the Philippines. Visit my portfolio site and learn more about my design services.