How to Create a Featured Facebook Timeline App with Static HTML

26 Shares Facebook 9 Twitter 13 Buffer 0 Google+ 0 LinkedIn 1 Pin It Share 3 26 Shares ×

This is part of a series of posts about getting set up on Facebook Timeline for Pages.

[Note: Since writing this post, I have moved to creating all of my Facebook tabs with a great tool called ShortStack. You can read more about ShortStack here.]

During the past few weeks, I’ve written extensive tutorials about the importance of Timeline Featured Apps for Pages. I’ve covered how to edit the app icon and I’ve highlighted how some of the big brands are using that real estate. I even provided you with 72 icons to choose from to help brand your featured apps area.

As a result, though, the question I keep getting is this: So how do I create a Facebook Timeline Featured App?

Good question. It’s not an easy question to answer since there are numerous ways you can go about it.

You could build your own app form scratch. But most people don’t have the programming knowledge to pull that off.

You could use a third party app designed for a specific purpose, like a contact form or email subscription form.

But the purpose of this tutorial is to explain how you could create a basic Facebook Timeline app for your Page using the Static HTML application.

What is Static HTML?

Static HTML effectively provides the back-end structure of a Facebook application so that you don’t have to go to the trouble of registering an app or setting up a secure URL (if that means nothing to you, don’t worry about it — you don’t need to know!).

First, go here and add the Static HTML app to your Page.

addstatichtml How to Create a Featured Facebook Timeline App with Static HTML

Next, choose the Page that you want to add this application to:

choosepagestatichtml How to Create a Featured Facebook Timeline App with Static HTML

Your new app will now be displayed with a star icon with your other apps. You may need to expand the featured apps view to see it. It’ll be labeled as “Welcome” (remember Welcome tabs?):

welcomeapp How to Create a Featured Facebook Timeline App with Static HTML

Click on the big star to access the app. This is the admin view of the app that only you can see:

Statichtmladmin 560x277 How to Create a Featured Facebook Timeline App with Static HTML

Notice that the app provides you an option to enter separate content for fans only. This was more relevant when you could create a landing page (though it still applies for driving ads), but I am going to focus only on the top box. This will allow us to create an app that anyone can see.

That top box is a blank canvas. Whatever you enter into it is your app. It could just be an image. It could be a form. It could be a list of links. Whatever you want! Sometimes I’ll create a page on my site without a header or sidebars and pull it in with an iFrame.

The app supports HTML, CSS and Javascript languages. While you don’t need to be a programmer, it does help if you know at least some basic HTML to insert links, images and text formatting (or pull in an iFrame).

For fun, I’m just going to type “This is my awesome app!” without any HTML. Then I click Save and Preview. This is how my app will look:

awesomeapp 560x116 How to Create a Featured Facebook Timeline App with Static HTML

Not surprisingly, our app looks pretty plain. But it’s awesome!

Note that the horizontal line and Public/Fans links are only viewable by admins.

Now that we have our awesome app, let’s do some basic editing. Go back to your Timeline and back to your Featured Apps area. Click the Edit icon for this app and go to Edit Settings.

timelineappeditsettings How to Create a Featured Facebook Timeline App with Static HTML

Here you can edit the name of the app. Let’s call it “Awesome App.” Click Save. Then click “Change” for “Custom Tab Image.”

editappname How to Create a Featured Facebook Timeline App with Static HTML

From here, you upload your new icon. If you don’t have one, I have 72 free app icons that you can choose from.

[Keep in mind that there has been a widespread bug that Facebook is working on where a random image will be pulled in at this step. It should clear up soon.]

Finally, go back to your apps again and click the Edit icon as you did before. You can then choose an app to swap with to move your new, Awesome App to a prime location.

And there it is. Awesome!

awesomeapp1 How to Create a Featured Facebook Timeline App with Static HTML

26 Shares Facebook 9 Twitter 13 Buffer 0 Google+ 0 LinkedIn 1 Pin It Share 3 26 Shares ×
About Jon Loomer

Jon Loomer is a digital marketing consultant with a unique perspective on social media. He was introduced to Facebook in 2007 while with the NBA (back before Pages) and has been using Facebook for business ever since. Stay in touch by liking his Facebook Page (Jon Loomer Digital).

  • http://www.printablepaperproducts.com/ Harry

    Hi Jon,

    Thanks for the quick tutorial. How do you add multiple static HTML’s to my facebook page.

    Many thanks, Harry.

    • http://jonloomer.com/blog Jon Loomer

      Good question, Harry. They changed this. Now you need to add a completely different app for your second, third, fourth, etc. Static HTML app. It’s confusing, but you’ll see what I mean when you search Static HTML. Here’s the link to the second app:

      https://www.facebook.com/apps/application.php?id=128953167177144

  • Bert Pauw

    Thanks you for this Jon! I’m pretty new to Facebook and managing pages in particular, and this just made everything a whole lot simpler!

    • http://jonloomer.com/blog Jon Loomer

      Great! Glad to help, Bert!

  • John O

    guys,
    Thanks for the great app. I got the first part (non-fan) working just fine. However for
    the 2nd part, I simply want to direct the fan to a webpage. I developed the page and it works just fine. Not sure how to direct the fans to it though. Tried the directive and that didnt work. Tehn I tried the directive and that didnt work. So what should go in here if I just want the new webpage to show up in the facebook space.

    • http://jonloomer.com/blog Jon Loomer

      Hey, John. I don’t believe this is possible. And I can’t imagine it is something that Facebook would want to happen. I would instead encourage you to put something in the fan-only view that encourages fans to check out your website, complete with links that will take them there.

  • Leighcausey

    Thank you so much! You just saved me hours of trying to figure this out….and Ive already spent hours as it is! I will be a frequent visitor of your site now & I have liked your Facebook page!!! Thanks again!!

    • http://jonloomer.com/blog Jon Loomer

      Woo hoo! Glad to help, Leigh. And thanks for liking my page!

  • http://www.facebook.com/people/Nicola-D-Seary/646661500 Nicola D Seary

    Excelent,Easy to understand information.I’ve been trying to get my heads around this for ages,now I feel more confident.

  • Nbrashear

    To upload images in your new app, you have to pay Facebook $7 a month?

    • http://jonloomer.com/blog Jon Loomer

      Do you have your own website? Host the images on your website and call the URL in the app.

  • Thomas Mikel Smith

    Hey Jon, is there any coding so you can use the app to show fans a facebook page photo album, complete with likes and comments etc?

  • Joshua

    Hi Jon,
    First off, thank you, huge, huge help.
    I do have one question:
    Have you heard of anyone having trouble in IE6-8?
    When I go to the tab admin page everything has been cut half in size, then when I preview the tab it also is cut in half (vertically).
    Since it’s on the admin page I figure it’s something inherent in the tab’s coding.
    Does any of this sound familiar, and if so, have you heard of any fixes? 
    Thanks,
    Joshua

    • http://jonloomer.com/blog Jon Loomer

      Hey, Josh. I haven’t heard of such an issue. Have you tried testing on multiple browsers to try and isolate the source of the problem? In general, I’d advise not using IE.

      • Joshua

        I totally agree about IE! :) 
        But it’s for a client, and I’m just trying to cover all bases.
        I’ll look into it further.
        Thanks Jon.

  • Pingback: How to Use Tabs as a Facebook Advertising Destination | JonLoomer

  • Pingback: Review: Create Custom Facebook Tabs With ShortStack | JonLoomer.com

  • http://www.facebook.com/osiris9FTV Osiris Nhine

    Jon, how do we customize the static iframe html for Fans?

    So that when a non-fans likes the page, they see a different page than before.

  • Allie

    Hi Jon,
    I got the the static html to download to our fb page, but when i click on the icon to start editing it shows up blank and nothing loads….Is there a reason for this?
    Appreciate it!

    • http://jonloomer.com/blog Jon Loomer

      I wish I could help, Allie, but I haven’t used that app in a while. It could be a bug with Static HTML or the content you’re serving into it. Is it just plain text or an iFrame?

  • http://patwist.com/ Patrik PATWIST Žec

    Thanks, Its very simple

  • Pingback: How to Create Multiple Facebook Timeline Apps with Static HTML - JonLoomer.com

  • Garry La

    Awesome Tab – HTML / WYSIWYG tab for your facebook pages – ITS FREE

    https://apps.facebook.com/awesome_tab_for_page/

26 Shares Facebook 9 Twitter 13 Buffer 0 Google+ 0 LinkedIn 1 Pin It Share 3 26 Shares ×