How to add an iframe tabs to facebook fan pages

This entry was posted by on Monday, 14 February, 2011 at

March 11th, facebook will disable FBML Static application to use on your facebook fan page. In this case, they are replace iframe for adding your fan page tabs. In this post we will show you how to add an iframe tabs to facebook fan pages.

Before you start, you need a domain and hosting. If you don’t have a domain and hosting, we recommend you get it at http://techofsoft.com/hostgator/ because it has 99.9% uptime guarantee.

If you already have it, let’s move on..

  1. You need to login and go to http://facebook.com/developers/ then click “Set Up New App” button.
    Set Up New App
  2. Write your App Name and tic Agree and click “Create App”
    App Name
  3. Enter the security check.
    Security Check
  4. Click on Facebook Integration
    Facebook Integration
  5. Enter the Canvas Page and Canvas URL.
    Canvas Name and URL
  6. Scroll to bottom, enter Tab Name and Tab URL and change Page Tab Type from FBML to IFrame. Then click Save Changes.
    Tab Name and URL
  7. Click on Application Profile Page
    Application Profile Page
  8. Click Add To My Page
    Add to my page
  9. Choose which page you like to add and click Add To Page and close.
    How to create a facebook fan page
  10. 10.  Now open your FTP program. And upload your design index.php file to your hosting (get filezilla here http://filezilla-project.org/download.php )
  11. 11.  After finish upload you can go to your page and you will see your new tab.
    Fan Page

Watch video below if you not clear.

We hope this post will help you to add an iframe tabs to facebook fan page.

Be Sociable, Share!

8 Responses to “How to add an iframe tabs to facebook fan pages”

  1. Hi,

    I don’t get the part where you add the index.php, are you actually linking the page to the url – http://techofsoft.com/demo/index.php?

  2. admin

    yes.. just link to your website..
    for example http://yourname.com/fanpage/index.php?
    if you set it like this, you need to create a “fanpage” folder in your hosting..
    then upload index.php to your fanpage folder..
    Note: make sure save your file in .php format.. do not save in .html

  3. Thanks, I will give this a try

  4. Noha

    Thanks a lot, I tried it and it worked.

    But does this mean that each tab = setting a new FB application or am i misunderstanding something?

    Also can I write FBML there? or is it totally deprecated? if not how can i have the functionality of fb-visible-to-connection?

    Thanks

  5. Noha

    Also how can i now add a comments box or a discussion board?
    lots of questions that need to be clarfied specially that even if it were to be developed like a fb applicatio using fb api, the new fb c# sdk is not well documented at all and developing an app now is very hard so i wish fanpage developement doesnt turn out to be the same difficulty :(.
    Please advise if you have more tutorials for the new fanpage development

    Thankss

  6. Michal

    I also didn’t get the part with the php. Do all sites have php files?
    How do I save a php file?
    Thanks

  7. admin

    @Noha – Yes.. Each tab we need to set a new application.. About FBML deprecated, we need to wait until march 11th to get confirm from facebook..

    We all wish fanpage development will be more easy and can give all of us have a chance to have a fanpage.

    @Michal – To save a php file, you just have to paste your code in notepad and save as index.php by select “All Files” at Save as type list box. Then you should upload to your hosting. Thats all..

  8. Michael S

    Thanks for doing this! Greatly appreciated!


Leave a Reply