How To Make New Facebook Fanpages Using iframes App

There has been a lot of talk and excitement about the new iframe Facebook Fan Pages and how this change will effect facebook users. I am not writing about all of the changes as that has been covered elsewhere – an excellent article is Everything You Need To Know About Facebook’s Epic Upgrade To Pages by John Haydon.

It is know that FBML Facebook Fan Pages has now been depreciated and it is no longer  possible to add the Static FBML application to pages. Static FBML is what many of us have used to create custom Facebook tabs in the past. But have no fear,existing FBML tabs will still continue to work and it will be possible to edit them but you can no longer create new pages using this application. I don’t know how long Static FBML will work before Facebook takes it away completely but i believe they will in a few months once everyone has got used to using the iframe app and developer have produced dynamic ways of using iframe in facebook pages.

So how to you create a fan page using iframes? Read below.

Before we continue you should know that there are currently 2 ways to add iframe app to your facebook fan pages,
1. through facebook developers and
2. through the wildfire iframe app.

The wildfire app is easier to implement but it has some major compatibility issues and you cannot integrate normal html text into this app as it does not allow, align, cell spacing, cell padding, javascript, script or type html attributes which is quite poor. It does however allow you to easily create a landing page for non fans and hide content that only fans will see without having to input any fancy coding like before.

For more options and dynamic content it is best to use the facebook developers iframe app, as you can add whole html pages straight from your hosting as well as java, jQuery, flash and any other type of coding you can think of

Creating Dynamic Facebook Fan Pages Tab with iframe

  1. Make a html, php, flash or other type of web page and then upload the document to you server (make sure all the files sits within the same directory). Instead of pasting the code directly into the Static FBML app, the iframe application will be pulling or streaming if you like the page that sits on your server to Facebook. This page will still need to be the correct Facebook size limit of 520px wide.iframe facebook fanpage set up
  2. Go to the Facebook Developers website.
  3. Create a new app by clicking on the ‘Set Up New App’ button.
  4. Give the new 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.create facebook fan page image
  5. Now for the fun part – the security check with the  annoying unreadable captcha.
  6. Next fill in your application profile details.Facebook Fanpages
  7. Give your new application a description and upload your own icon or log if you choose to. 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 VERY important. This is integrating your application into Facebook Fan Pages.facebook_fanpage_integration_image
  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 Example:  http://www.creative-websolutions.com/creative-fanpage-template/
  10. Canvas Type – select,  iframe.
  11. Iframe Size – unless you want ugly scroll bars select auto re-size. Removing the scroll bars completely requires additional steps.
  12. Tab Name – this is the name you want your tab to be called, such as Welcome, About, Products, 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 page file you uploaded. In my example it is index.html
  14. The 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.
    final_facebook_fanpage_image
  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.
    add_new_iframes_app_to_facebook_fanpage
  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.new_facebook_iframes_tab
  19. 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.new_facebook_fanpages_with_iframes
  20. You can make this the default landing tab by going to Edit Page > Manage Permissions.

Negatives of New Facebook Fan Pages

  1. You will have to make one of these for every custom tab that you want to make – if your Facebook Fan Pages 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 iframe. This is not good for google searches that were locating our custom Facebook Fan Pages 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, if you know how to do this drop a comment for everyone below.

Benefits of New Facebook Fan Pages

  1. More code flexibility – pretty much anything that will work on your server will work on your iframe tab. For example, you can see that I added javascript and flash to mine that shows a mini website in effect. 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 facebook fan page tab I made here. I made a flash coded html page, which is only 60% finished but you can see the benefits of using iframe application.

If you would like assistance creating iframe tabs or transitioning your current tabs to iframe or would like a flash enable mini website as your facebook  fan pages landing tab, please contact me for prices.

  1. NickNick03-19-2011

    this is possibly the best and easiest to follow example I have seen of how to install and use the iframes app.

  2. Tom BuchananTom Buchanan04-01-2011

    Excellent tutorial and its good to see that I have done everything correctly.

    However…I was curious as to whether you have ever run across a situation like I am experiencing now. Take a look at the URL provided above and let me know if you’ve ever seen a co-mingling of the Facebook page layer with the user page layer, in this case, the Welcome tab.

    Tom

  3. John RegisJohn Regis04-01-2011

    Hi Tom, interesting situation you have encountered.
    Have not seen this before, but double check your:

    1. Canvas Type and
    2. iFrame Size

    within your settings for that app as you should not have scroll bars enabled.

  4. Jarrett GucciJarrett Gucci05-03-2011

    Hello John

    Love the post and I linked back to it form one of mine.
    http://mrinternettips.com/facebook-secret-hide-content-on-fan-page-until-someone-likes-it/

    Great content here man!

  5. John RegisJohn Regis05-04-2011

    Thanks Jarrett, glad you have found value in our blog post.

  6. jim mccloskeyjim mccloskey05-26-2011

    The following PHP code will do the hide/unhide based on the visitor’s “Like” status for the page:

    You are a fan.

    You are not a fan.

  7. BradBrad06-29-2011

    This doesn’t work anymore?

  8. Josh FialkoffJosh Fialkoff06-29-2011

    Hi John,
    This is a great post!
    Can you please explain how to show different content to people based on whether they already like the page?
    For instance, a lot of pages don’t show the Like call to action to people who already Like the page.
    How do they do that?
    Thanks,
    Josh

  9. John RegisJohn Regis07-08-2011

    It really depends on what app your using for your fanpage i.e. wildfire, or the coding in your html.

    In short once someone likes your page they will on see content within certain lines of code.

Leave a Reply