Practical Ecommerce

3 Tools to Create New Facebook iFrame Pages

March 10 was a big day for Facebook Page owners. On that day, Facebook upgraded Pages to a new layout and removed FBML — Facebook Markup Language — as the custom-tab-creation code, replacing it with iframes. The latter action spelled trouble for do-it-yourselfers because it required them to learn how to create Facebook apps, which are required for iframes.

The switch to iframes created another problem. Many page owners used a function called “fangating,” which required visitors to “Like” the page before they could take advantage of certain features. For example, the page owner could offer free downloadable ebooks or discount coupons only when the visitor Liked the page. Through the use of a few FBML tags, creating fangated content was a relatively easy procedure. The switch to iframes makes using this function much more difficult, as knowledge of PHP is required. (Here’s a a tutorial from Hyperarts, a web development company, that explains the procedure.)

In response, two popular Facebook app development companies, Wildfire and Involver, have each created a free, easy-to-use interface, which makes iframe app creation simpler. Both versions offer “fangating,” as well. In addition, an independent Facebook app developer, Jason Padvorac, has created a similar tool. Wildfire refers to its tool as “iFrames for Pages,” while both Involver and Padvorac refer to theirs as “Static HTML.” Let’s take a look at what each has to offer.

Wildfire

To install Wildfire’s app, go to iframes.wildfireapp.com. Once there, you will see a large button that says, “Install this app.” Click the button and you are taken to Facebook, where you are asked on which Page you wish to install the app.

Wildfire offers free iframe creation tool.

Wildfire offers free iframe creation tool.

Once you have chosen the page, you are asked to complete a simple form, and then are transferred to a “settings” page.

Wildfire's iframes app offers the ability to use either images or HTML.

Wildfire’s iframes app offers the ability to use either images or HTML.

This page offers two options:

  1. Fangate – You can choose to turn fangating on or off.

  2. Image or HTML – You can either use an image in GIF, JPG or PNG form, or embed your own HTML.

The next step is to agree to the terms of service, then click the preview button. That’s all there is to it.

Here’s a video I recorded that explains the Wildfire process.


Involver

To use Involver’s version, go to Involver’s website and look for the phrase, “Static HTML For Pages” on the home page. Underneath the phrase you will see a button that says, “Learn More.” Click that button and you are taken to a page where you can install the app. The installation procedure is very similar to Wildfire’s version.

Involver calls its iframe app tool Static HTML.

Involver calls its iframe app tool Static HTML.

Involver’s Static HTML settings page looks slightly different than Wildfire’s. First, there are three radio buttons to choose from: Custom Image, Custom HTML, and Custom SML. (The latter is Involver’s proprietary coding language.) Unless you have paid for a license to use SML, choose either the image or HTML option.

Involver's iframe app settings page.

Involver’s iframe app settings page.

Involver offers a “Syndication & Accessibility” feature, which gives the option to allow everyone to see the content or only Fans (fangating). If the “only Fans” button is selected, Involver presents another option to upload a custom image for non-Fans to see. Unlike Wildfire, there is no HTML option for non-Fans.

Involver's "fangate" option allows use of image for non-Fans, not HTML.

Involver’s "fangate" option allows use of image for non-Fans, not HTML.

Click the “Save Changes” button and you’re done.

Padvorac’s Static HTML

The last option is a little more difficult to get to. The only URL I can find is one inside Facebook itself. It is too long and convoluted to remember easily, so you may wish to bookmark it. You can access the app by clicking here on Facebook’s site.

To install the app, click the “Add to My Page” link located in the left-hand column. A box will pop up with your page name and a button that says “Add to Page.” Click the button and the app is added.

Click "Add to My Page" to add Static HTML iframe app.

Click "Add to My Page" to add Static HTML iframe app.

You will have to go to your Fan page in order to access the app, which you can do by clicking on its link in the list of menu items in the left-hand column. Static HTML is the link that says “Welcome” and has a star icon located next to it.

Static HTML menu list item.

Static HTML menu list item.

Click the link and you are taken to a page with two form fields, one for HTML content that everyone can see and one for fangated content. There are no options for uploading images only.

Static HTML iframe app settings page.

Static HTML iframe app settings page.

You will also notice two checkboxes: One that gives the option to remove scroll bars and one that enables a limited set of FBML tags that Facebook still supports. Once the HTML has been embedded, click the “Save and view tab” button to complete the process.

One feature this particular app provides that is missing in the other two is an “FAQ & Help Center,” which is a series of drop-down boxes with explanations of how the app works.

Conclusion

We will likely see more apps that make iframe page creation much easier. Those presented here are first-generation attempts that — for Wildfire and Involver — aim, perhaps, to introduce users to other products from those companies.

If you use one of the many third-party page-creation apps — such as those from Splashtab and Tabsite — you will notice little difference from the way you have been creating custom tabs. If, on the other hand, you are making the transition from pages created using FBML to those that use iframes, these three tools can come in handy.

Tags:    

Paul Chaney
Paul Chaney
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 14 )

  1. Maya Grinberg March 14, 2011 Reply

    Thanks for writing about the Wildfire iFrames app! We’re so glad you found it helpful and easy to use! Great coverage, Paul!

  2. Paul Chaney March 15, 2011 Reply

    Since writing the article, two new iframe app tools were released. Hyperarts just announced the release of Tabpress, which can be found here: http://apps.facebook.com/tabpress. Also, an independent developer has released iFrame App: http://www.iframe-app.com. These are very similar to the ones listed in the article. Again, I won’t be surprised to see more of this type of development take place, and I expect the sophistication of the tools will increase.

    Let me also mention that Facebook has pushed back the deadline to deprecate the use of FBML from March 11 to March 18. There is no clear explanation as to why they choose to reset the date.

  3. CaroleMay March 15, 2011 Reply

    Thanks so for your timely info.! I just installed the Wildfire app. on my FB page-very simple. I’m just starting out and don’t know much about HTML code. I just used Powerpoint to create a simple landing page, saved it as a jipeg image, then uploaded it to the Wildfire app., no fuss no muss. I’m pretty proud of myself! If you’d like to check it out, go to:

    http://www.facebook.com/pages/SerendipityDesigns50/115397781834731#!/pages/SerendipityDesigns50/115397781834731?sk=app_201143516562748

  4. tangtang March 16, 2011 Reply

    Really useful app.

    One question, though: With Wildfire, I have tried with sucess to add a picture for non-fans view but concerning the Fans view I want people to have the view of my normal FB page with posts and comments. How can I do to not have to insert an image or html in my fans view but leave it like it is?

    Thank you in advance.

  5. Sarah Worsham March 17, 2011 Reply

    Static HTML also has a free app that’s pretty easy to use:
    [http://www.facebook.com/apps/application.php?id=190322544333196&sk=wall](http://www.facebook.com/apps/application.php?id=190322544333196&sk=wall)

    Also, apparently, Facebook’s change that allows secure browsing by always using a https connection has broken a lot of iframes. Facebook has been made aware of the issue, but I haven’t heard anything about it being resolved yet…

  6. Louis Camassa March 19, 2011 Reply

    @ Sarah – I haven’t seen this feature on any of the FB Shop apps. I get the following error message when I try to change the URL to https:

    > Sorry! We can’t display this content while you’re viewing Facebook over a secure connection (https).

    To use this app, you’ll need to switch to a regular connection (http).

    I am sure they are scrambling to figure out a way to offer a secure browsing experience for apps. The alternative of using a secure iframe is rather unusual.

    Still, the shopping experience with these apps is horrible-can’t imagine them converting well.

  7. bbr13 April 4, 2011 Reply

    Hello,

    The connection with https does not allow application iframe non configured https to appear on the fan pages. The application iframe.apps allows to create an iframe without being facebook developer and avoid to purchase and configure the SSL certificate.

    iframe.apps allows to create an iframe on facebook page without being a developer and without obtaining a SSL certificate.

    The application iframe.apps proposes to:

    - add in an iframe tab an existing web page by simply inserting the URL;
    - or create a new iframe tab with the HTML editor integrated (same as what was managed Static FBML)

    Gauthier B.

  8. Barbara April 12, 2011 Reply

    Great post. I’m new to FB and was looking for a way to offer special coupons for our fans and these apps will fit the bill. Didn’t know it was called fangating, though. Hopefully, I’ll be able to implement this without too much fuss. Thanks.

  9. DeanCollins May 5, 2011 Reply

    my concern with using these "3rd party" iframe tools is that at any time in the future the code provider can "modify" the base code.

    There was an example of this on the new iframe software above, whilst it was an unintended mistake on the developers part (related to the Amazon EC2 outage), my question is if we already have to own servers as facebook iframe providers then why not give us/sell us the raw code to provide this iframe functionality.

    Cheers,
    Dean
    http://www.LiveFanChat.com

  10. Paul Chaney May 5, 2011 Reply

    Dean, your point is well-taken. However, it presumes that someone within the organization has the ability to know what to do with that code. These sites make it easy for the non-technie/non-coder to be able to have the ability to add an extra degree of richness and interactivity to his or her page.

  11. ChenevixTrench June 1, 2011 Reply

    Can anybody tell me whether I can put my checkout in an iFrame on FB? CC payment is via Hosted Order Page.
    Thanks in advance.

  12. Terry Lawton January 4, 2012 Reply

    Thanks for the post. Here’s an article that shows you how to create any type of business application and easily integrate it into your Facebook business page
    http://blog.caspio.com/integration/create-a-custom-facebook-application-for-your-business/

  13. Sebastian February 20, 2012 Reply

    Very informative post. Thanks for sharing. :)

  14. wboder December 10, 2012 Reply

    It looks like Wildfire doesn’t work anymore. I’ve tried with these apps: https://www.facebook.com/iframe.apps?fref=ts
    and it works well

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas