How many of you have a ghost town Facebook page for your business? You know, the page with only 14 Likes and the last status update was from 3 weeks ago.
We’ve all been there. In fact, I’m still in that boat as we speak. Don’t worry about me, though.
I’m here to show you how to take your Facebook page to the next level by adding apps that allow your visitors to interact with your page as if it was your website.
Take a look.
Static HTML: iframes tabs
The first thing you’ll want to do is log into your Facebook account and prep your page to handle the HTML apps.
In the Facebook search form, type in the keyword phrase “Static HTML.” You should immediately see the following options.
Select the first option, Static HTML: iframe tabs. When the new page loads, you will see basic information about the app. Look for the following section and select to Add Static HTML to a Page.
Next, you’ll face a page with a drop down menu listing all of your pages. Select the page you would like to add the app to. Immediately, you will be prompted to confirm that you’d like to Add Static HTML: iframe tabs. Select to do so.
Now we’re in business.
Edit Your Blank Canvas
If your browser doesn’t automatically redirect you to the page that you’ve elected to install the app on, go there now.
Beneath your cover photo area, you will see a number of tabs to include your new tab. It will look like the image to the right. If you don’t see it, select the down arrow to display additional tabs and it should appear.
Hover over the tab and you will see a little edit icon in the upper right hand corner. If you don’t see it, select the down arrow on the right to display additional tabs and hover over the tab again.
As long as the edit icon appears, click anywhere on the tab (except for the edit icon) and it will bring you to a blank canvas ready for coding.
In the box titled “Public Content,” you will create your page. You are allowed to type the typical languages you would use to build your webpages from scratch. HTML, CSS, and Javascript are all welcome. I wouldn’t get too fancy, though. HTML and CSS should do.
I like to create full HTML layouts with CSS included in the head element when I create tabs.
Here’s a template for you to use to see how it works.
<html>
<head>
<style type="text/css">
#wrap {
background: #ccc;
border: 1px solid #666;
padding: 1em;
margin: 0 auto;
width: 500px;
}
p {
color: #00f;
}
h2 {
color: #666;
margin-top: 0;
}
input {
border-radius: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<h2>This is your headline!</h2>
<p>How about a nice paragraph to go with that headline. Deal?</p>
<form>
<input type="text">
<input type="submit">
</form>
</div>
</body>
</html>Simply paste that code into the “Public Content” box and select the preview tab.
Understand that you only have about 760 horizontal pixels to play with on this canvas. So, don’t get out of hand.
Once you are satisfied with your page, save the changes.
All content in the “Public Content” box will be display to everyone, regardless of if they have “Liked” your page or not. If you want to display content that is only for fans, place that content in the text area titled “[Optional] Fans-Only Content.”
Once your content has been saved, your page is ready to go.
Edit Your Tab Icon
Now that your page is live, you’ll probably want to get away from that ugly tab with the star and upload your own image.
Remember earlier when we hovered over the tab (or selected the down arrowed so that we could) in order to display the edit icon? Well, now it’s time to click that icon.
When you do so, you will see multiple options as shown on the right. Select the option to edit your settings.
You will have the option to change the tab name (currently set as “Welcome”). And you will also have the option to change the tab image by clicking the “Change” link beside Custom Tab Image.
I would highly suggest an image no bigger than 100px by 75px. If you use anything bigger, it’ll be too much for the tab size.
Adding Additional Tabs
Believe it or not, you’ll need to install another app to add each additional Static HTML app to your page. Remember this view from the first app?
As you can see, each additional app can be found with the same keyword phrase, “Static HTML.” Simply repeat the process in this article to install additional Static HTML apps on your Facebook page.
How many different ways can you use this tool? Email optin straight from the app? How about a contact form? You tell me.
Or better yet, use a WordPress plugin like WP4FB 2.0 and add a bunch of cool features to the custom tabs
Kudos to those guys! I know they’re making bank with WP4FB… top quality product there. I prefer to keep things simple and only use the code I need, though.