Here at Paramore|Redd, we’ve been accustomed to creating our page tabs using Facebook Markup Language, or FBML. However, since FBML is currently in the process of being depreciated, we’ve began creating our page tabs using iframes.
There are a few advantages to developing page tabs with iframes. For one, you can code your tab however you want; use JavaScript or PHP, embed Flash/videos, utilize a tableless layout, whatever. For example, some of our client’s tabs feature eNews sign up forms that were built with PHP and use jQuery for validation.
Facebook allows you to create page tabs that are 520 pixels wide. However, when creating my page tabs, sometimes I have run into a little problem where a horizontal scroll bar appears. To resolve this, I usually design my tabs to be 500 pixels wide. I don’t think Facebook mentions that the width of the scroll bar of your iframe accounts for 10-20 pixels of your page tab width. Your results may vary, but I think it’s worth keeping in mind.
Let’s assume you have developed your page tab and uploaded it to your web server. In a few simple steps, you can integrate it into Facebook and onto your profile page. Here’s how…
First, go to http://developers.facebook.com/, click on the “My Apps” link at the top, and log in with your Facebook account. You may have to set up your personal account as a developer account and get it verified. Facebook will walk you through this process, it’s pretty simple.
Now that you’re a registered Facebook Application Developer, and after you’ve logged in, you can begin creating your page tabs and applications. At this point, you should be on the Facebook Developer home page, and if you had any previously developed applications, you would see them here. For the purposes of this article, we’re assuming you have not created an application yet. To get started, click on the “Set Up New App” button (located at the top right).
Name Your App and Agree to the Terms
The first step is pretty simple; give your application a name, agree to the terms, and then click the “Create App” button. As an example, I’ll be using a page tab that I recently developed for the Tennessee Department of Tourist Development.
Basic Information for Your App
The next step brings us to the application settings page where we’ll be adding some basic information about the application. First, enter a brief description for the application (Facebook limits this to 250 characters). Next, upload an icon (16x16) and a logo (75x75). It’s not required that you upload either of these images, but I recommend it. They’ll make your app easily recognizable and give it a touch of professionalism. The User Support Email and Contact Email fields should default to your email address, but you can change it if you’d like. I usually leave the rest of the fields blank.
Page Tab Settings
After you’ve added the basic information for your app, you can now integrate it into Facebook. Click on the “Facebook Integration” link on the left.
Since we’re only focusing on creating a page tab, jump down to the Page Tabs section. There are really only two things of concern here: tab name and tab URL. The tab name is limited to 16 characters and can actually be left blank (as you see in the screenshot below). If you leave it blank, the name of the tab will default to the application name we set at the very beginning. The tab URL is where your tab lives on the web (Facebook limits the URL to 100 characters). After you’ve added the tab name and URL, click the “Save Changes” button. Now your tab is ready to be added to your profile page.
Note: When you initially create your page tab, you won’t see the Page Tab Type option, however, it will default to “iframe.” The option will appear after your app has been created and you go back to edit its settings, which is why you see it in the screenshot above.
Adding the Page Tab to a Profile Page
After you’ve saved your application’s settings, you should be on the My Apps overview page. Here you’ll see the app you’ve just created. Now, to add the page tab to your profile page, click on the “Application Profile Page” link. On the application profile page, click the “Add to My Page” link (on the left), find the page you wish to add your tab to, and then click the “Add to Page” button. Now your tab is accessible on your profile page.
Pretty simple, right?
I’ll be honest, it took me a little while before I fully understood the process of getting my page tabs into Facebook and then onto my profile pages. I hope that this article has been helpful if you were having trouble making the switch from FBML to iframes. If you need some additional help, Facebook has great documentation on creating applications, and they go a little more in depth by explaining the different types of applications you can create.
Share Article
2 comments