How to Make a Facebook Page Tabs With Iframes

Custom Facebook Tab with Iframes

  1. Make a html, php or other type of web page and upload it to your web server. Instead of the code going directly into the Static FBML application the iframe application will be pulling the page you made to Facebook. This page will still need to fit within the Facebook size limit of 520px wide.
  2. Go to the Facebook Developers site.
  3. Create a new app by clicking on the ‘Set Up New App’ button.
  4. Give the app a name. I recommend naming it what you want the name of the tab to be. Agree to the Terms of Service and click on the ‘Create App’ button.
  5. Now for the fun part – the security check with the unreadable captcha. (I despise captchas but I guess that’s a topic for another day.)
  6. You will now be on the About Tab for the new application.

  7. Give the application a description. You can also upload an icon and a logo. I recommend at least using the icon because in the list of tabs on your page, your icon will appear rather than the iframe or static fbml icon. This is all we *have* to fill in on the About Tab.
  8. The next tab we fill out is SUPER important. This is Facebook Integtration.
  9. Canvas URL – fill out the directory where the file you uploaded is located. This DOES NOT include the name of the file. The URL must have a trailing slash. In my exampleit is http://kimwoodbridge.com/facebook2/
  10. Canvas Type – select, you guessed it, iframe.
  11. Iframe size – select auto-resize unless you want ugly scrollbars. Removing the scrollbars completely requires additional steps, which I will be discussing next week.
  12. Tab Name – this is what you want the tab to be called, such as Welcome, About, Contest, etc. The first time I tested this my tab name was ignored and the name of the Application was used, which is why I recommended naming the application what you want the tab to be called. I’m not sure why this happened or if I did something wrong the first time so if someone can clarify this, please let me know.
  13. Tab URL – this is the name of the file you uploaded. In my example it is index.html
  14. Click on Save Changes.
  15. You will now be on the screen with information about your new application. You do not need to submit it to the directory. Actually, you probably don’t want to do this because than anyone could add you custom iframe tab to their page – I don’t know why anyone would want to do this but you just never know.
  16. Click on the link on the right of the application information page that says ‘Application Profile Page’.
  17. You now need to add the application you created to your page. This is like adding any Facebook application, such as Static FBML. Click on the link on the left under the profile image that says ‘Add to My Page’. If you are an admin for multiple pages, you will need to select the correct page to add the new iframe page application to.
  18. Go to your page and you will see the new tab in the list under the page photo and, if you uploaded your own icon, you will see that next to the name of the new iframe page tab.

    Click More> Edit at the bottom of the list and you can move the tab higher up the list but it can’t go higher than Wall and Info.
  19. You can make this the default landing tab by going to Edit Page > Manage Permissions.

Negatives

  1. You will have to make one of these for every custom tab that you want to make – if a page is going to have three custom tabs you will need to make three iframe apps for it.
  2. It is my understanding that if you are not logged into Facebook, you will not be able to see a custom tab created with iframes. This is not good for google searches that were locating our custom Facebook tabs. If I am wrong about this, please let me know.
  3. I have not yet figured out how to use code similar to visible to connection that is used to hide content from people who haven’t liked the page.

Benefits

  1. More code flexibility – pretty much anything that will work on a html page will work on your iframe tab. For example, you can see that I added javascript to mine that shows my last twitter tweet. You can also add a video with the embed code and don’t have to use the fbml code for video. Other scripts and widgets will work too.
  2. You can add your Google analytics tracking code just like you would to any web page!
  3. You could make different pages in advance and quickly swap them out by simply changing the Tab URL in the application settings.
  4. Other? – You tell me.

You can visit the iframe tab I made here. I made a couple of changes to the content but I do need to update the video and make other changes.

If you would like assistance creating iframe tabs or transitioning your current tabs to iframes, please contact me for rates and to get added to my schedule.

read also: Everything You Need To Know About Facebook’s Epic Upgrade To Pages

from: http://www.kimwoodbridge.com/how-to-make-a-custom-facebook-page-tab-with-iframes/

0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply

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