Facebook now makes it easier than ever to make custom tabs for your Facebook Page. After avoiding them like the plague for a while, I decided to jump in and see what they hype is about.
No more FBML code knowledge needed. Now it’s all based on iFrames.
End result? I’m sold.
I recently put together a Facebook Page for The Chapel’s children ministry – TGA Parent Connection. It’s a page that serves as a hub for parents to connect, find out what we’re teaching their kids, and see resource suggestions.
Our children’s ministry leadership wanted to be on Facebook, for the social aspect, but also wanted to be able to share a ton of resources. In order to keep these organized, I suggested custom tabs.
Check it out: TGA Parent Connection
Here’s the steps to follow to create your own custom Facebook Tabs.
1. Create your custom html webpage, and upload it to your server.
This will be the page that will be displayed within your custom FB tab.
- Here’s an example of one of ours: http://chapel.org/themes/fb-pages/tga-pc/entertainment-resources.html
- Design for a maximum width of 520px wide.
- Can also be PHP
- Also, in order to get rid of the ugly scrollbars iFrames are good at, here’s a handy script to place at the bottom of your html, before the </body> tag:
2. Create a new app on the Facebook Dev’s site.
- Go to https://developers.facebook.com/apps
- Click on “Create New App.”
- Name the app. Click “continue.”
- Once on the “Basic Info” page, provide a description. You can also upload an icon and a logo. The icon is important because it’s the image found in the list of tabs on your Facebook page. This should be all you have to fill out.
- Click “Save Changes,” and then look at the tab on the left side of the page that says, “On Facebook,” and click it.
- You are now on the Facebook integration part of this process. Fill out the form using the following guidelines, and click “Save Changes.”
Canvas URL: The directory where the file you uploaded is located, NOT the name of the file. The URL must have a trailing slash. iFrame size:Auto-resize unless you want scrollbars. Tab Name: This is what you want the tab to be called.
Tab URL: The name of the file you uploaded, NOT the path.
3. Add your new tab to your Facebook Page
- Click on the tab, in the left column, that says “View App Profile Page.”
- Add the application you created to your Facebook Page. This is just like adding any Facebook application. Click on the link on the left under the profile image that says “Add to My Page.”
4. Go to your Facebook Page and see your new tab!
Check out your Facebook Page and see the new tab in the list under the Page photo – complete with the icon you uploaded.
Some more goodies:
- Click the “Edit” link at the bottom of your Page’s tab list, on the left, and you can move the tab higher up in the list, but not higher than “Wall” and “Info.”
- You can also make your custom tab the default landing tab when folks come to your Page by going to Edit Page > Manage Permissions > Default Landing Tab.
- Bring attention to your new tabs by adding a tease to your Page’s profile pic. See our example.
- I used Google Webfonts for some fonts on my custom pages. Really easy.
What do you think? Are you already doing this? Share your examples, below.