[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.
Next, choose the Page that you want to add this application to:
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?):
Click on the big star to access the app. This is the admin view of the app that only you can see:
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:
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.
Here you can edit the name of the app. Let’s call it “Awesome App.” Click Save. Then click “Change” for “Custom Tab Image.”
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!
