How To Use WordPress To Create Iframe Fan Page For Facebook

• Tweet

• Tweet

Facebook is soon going to discontinue FBML very soon and the option to add static FBML to new fan pages has already been removed. The solution is to use a WordPress blog and utilize the Facebook’s iframe app to create a Fan Page.

To do this first you have to install WordPress on a sub-domain or in a new folder on the existing domain. I have installed a fresh copy of WordPress on fanpage.promagz.info.

I am assuming that you already have a fan page and if you don’t have one; you can go to ‘Create a Facebook Fanpage‘ and create one. Just make sure that when creating a fan page you don’t select the ‘Cause or Community‘ option as this option doesn’t let you choose a custom landing tab for your fan page.

Next you need to create a Facebook app and for that just go to Facebook Developers and click the ‘+ Set Up New App‘ on the top right. On the next page enter an ‘App Name‘, choose ‘Agree‘ and hit ‘Create App‘.

On the next page write a short description for you app and if you want you can also choose an Icon and a Logo for you app.

Next click on the ‘Facebook Integration‘ tab you will be presented with the following screen.

Fill in the following fields:

• Canvas Page: Just give a name. This will be your app url.
• Canvas URL: Enter the URL of the new WordPress Blog that you have created for fan page. Make sure that you give a trailing slash [/] at the end of the url. For e.g. http://fanpage.yourdomain.com/ or http://yourdomain.com/fanpage/
• Canvas Type: Choose Iframe
• IFrame Size: Choose Auto-resize
• Tab Name: Give a Tab name, it will be the apps tab name when added to the sidebar
• Tab URL: Enter “index.php”

Next click ‘Save Changes”

On the next page click on the ‘Application Profile Page‘ on the right.

You will see a page that looks like the image below. Click on “Add to My Page” on the left.

A pop-up window will open with all the pages that you have created will open. See the image below. Click on the “Add to Page” button next to the page of you choice and your app will the added to the page.

After your newly created App has been added to the fan page it will look like this. Just go to your fan page.

Next you have to edit your fan page settings so that so that you can set your default landing tab. To do this just go to your fan page and click the “Edit Page” button on top right of the page. On the next page go to “Manage Permissions” tab and on the “Default Landing Tab” option select the tab name that you have just created and hit “Save Changes“.

That’s it. You will be able to see your newly created “WordPress” tab as the default landing tab when you visit your page. You can also check out the WordPress tab on the ProMagz Fan Page.

WordPress Themes For Facebook Fan Page:

The theme width for the WordPress Blog that you have created for the Facebook fan page should be 520 pixels wide because the Iframae width of the fan page is 520 px. If you cannot find a WordPress Theme for Facebook Fan Page you can use the themes that I have created with Artisteer.