Posted by Ching Ya | Posted in Facebook, How To, Social Media Tool, Social Networking |
[UPDATED 25/12/2011] If you want to Insert your external Web Page as one of your Page tabs, now this can be done easily with ready–made custom iframe apps. This will also solve the Secure Hosting requirement for your custom apps to display properly in ‘secure browsing’ on Facebook.
Below method is ONLY useful for those who wish to create iframe application for other Facebook users to add to their Facebook Pages:
Since no more NEW static fbml applications can be added to our managed pages, it’s important to know exactly how to work from creating the app to adding it to your facebook page successfully. I will try to be as thorough as I manage:
How to Create and Add Custom iFrame Tab to Facebook Page
Firstly, you need to prepare a html page to be inserted into your facebook page. You may use Dreamweaver for the job and upload the html file to your web server so to be pulled into your fan page later. Or, we can do this the easy way with less complication via a wordpress plugin named Facebook Tab Manager. What I love about this tab editor is that it saves time and keeps the custom tab size limit of 520px wide so no resizing is needed afterward.
Add Facebook Tab Manager to your WordPress Blog
1. Login to your blog and add Facebook Tab Manager to your plugins.
2. Activate it and look for ‘Facebook Tabs’ at your sidebar -> click ‘Add New’. Notice that to create the iframe tab content is as easy as how you normally write a new post.
3. When done, hit ‘publish’. New instructions will appear at the bottom of the post on configurations to register your content on facebook:
Customize Facebook Tab with iframe App
4. Go to Facebook Developer and start setting up your new iframe app.
[UPDATED Image: 25/12/2011]
Some of you who are creating your facebook application for the first time, verification process may be required. If you had already verified your facebook account before this, you can bypass this step. Otherwise, you need to go ahead and select to verify your account with mobile phone or credit card. Or, if you are not comfortable with this step, add an admin who is already done the verification to work on the new iframe application.
The ‘About’ section consists of some necessary fields besides filling in your app name. Add image to your icon and logo so it’s recognizable.
[UPDATED Image 25/12/2011]
Edit your app icon: Settings -> Basic -> Edit icon:
Tips: Why icon/logo image is important?
‘Icon’ image will show up next to your app name when added as a new tab to your facebook page. ‘Logo’ image will appear in app directory, for example: you can have a look at your ‘Edit Page -> App after you added it to your page :
6. At ‘Facebook Integration’ section is where all the hard work landed. Here are some important fields that required to be filled correctly:
In Canvas Section:
- Canvas Page – the base URL of your application on facebook.
- Canvas URL – this is the URL where facebook pulls in your iframe content.
- Secure Canvas URL – the secure version of Canvas URL with ‘https’. Basically the same info you entered in your ‘Canvas URL’.
Complicated? No worries. Refer back to step #3 above and locate the ‘Facebook Integration Tab’ in your blog and copy/paste the links given to you, for example:
[UPDATED Image/Instructions 25/12/2011]
Go to Settings -> Basic -> Select how your app integrates with Facebook -> Save Changes:
To create and associate a new (community) page with your app, go to Settings ->Advanced ->Contact Info ->App Page (Create Facebook Page) (optional) :
Below is the example of how Canvas section is filled:
If you are unable to see the iframe app after installed to your page (regardless if you’re in ‘http’ or ‘https’), leave the ‘Secure Canvas URL’ field BLANK. Your iframe tab should be able to work in ‘http’ (non-secured browsing) and in order to view that, you need to go to Account -> Account Settings -> Account Security -> UNCHECK Secure Browsing. This is believed to be caused by a known issue on how our custom app is not visible when viewed in secured browser (https) as described in this bug report.
The bug occurred in February and was said to be fixed in mid March, however it seems that the bug is back again recently and affecting some of my pages. Will follow up on this issue and if you know how to fix this, do share.
In Page Tabs Section:
The important parts are ‘Tab URL’ and ‘Secure Tab URL’. Both links are referring to the html file location including its file name -> Save Changes:
Again, if your app tab is not viewable, leave the ‘Secure Canvas URL’ field BLANK until the bug issue for secured browsing (‘https’) is fixed.
So now, your new iframe app is created!
Add Your iFrame App to your Facebook Page
Refer to the documentation on how you can add a page tab dialog, or the one near to the end of this post. Clearly there is no longer a view app profile page link available in Developers apps section. No idea why though. [END]
7. Now go back to your ‘My Apps’ page and select ‘Application Profile Page’.
8. Then as how you normally add application to your page, click ‘Add to My Page’ -> then Add to the page you want:
9. See that a new tab is added at your page sidebar. Rearrange the tab [#2(c)] to a preferred location or set it as your landing tab.
10. You can rename your custom tab by going to Edit Page -> App -> your app name -> Custom Tab Name -> after edit, click Save:
So whenever you wish to create a new custom tab, you need to go through all the steps again to get it done. Time consuming isn’t it?
To make things easier, if I could I will try to find other alternatives or ready-apps so even facebook beginners could enjoy as much privilege without having to go through the lengthy steps. Be sure to follow close and don’t miss upcoming posts!
Updated Post to check out:
7 Free iFrame Applications to Create Welcome Tab (Custom Tabs) for Your Facebook Page.
Now Is Your Turn…
How is your experience with iframe app so far? Has it been more useful for your page or not? Do you have any special tips to add? Feel free to do so in the comments.
Like what you’re reading ? Subscribe via RSS Feed or email so you won’t miss a thing: