Facebook offers great opportunities for businesses and organizations to market themselves through Facebook Pages. If you haven't yet set up a Facebook Page for your organization, it's definitely worth checking into.
If you have a Facebook page, you may have realized that Facebook doesn't give you a lot of control over the look and feel of the content on your page. You can add a lot of information, but only within the structure that Facebook has set up for you. What if you want to have a unique page on Facebook -- something that can express your brand and identity to those who visit your Facebook page? You can do this through the use of custom Facebook page tabs.
What is a Custom Facebook Page Tab?
When you look at any Facebook Page, you'll see a list of tabs at the upper left. Facebook includes several tabs that are available by default, such as "Wall," "Info," "Photos" ... etc. But you can also create custom tabs that house content that is unique to your business or organization.
We've done this on the Radium3 Facebook page. We have a custom tab called "Welcome." This tab contains content we've put together to provide an overview of our product. We use this tab as the default tab for new visitors to the page, so they are introduced to our product and our brand on their first visit.
Custom tabs like this can be a powerful addition to your Facebook pages. While creating them requires a bit of technical know-how, we've tried to demystify the process as much as possible in the steps below.
Create Your Content
Facebook page tabs make use of iFrames. An iFrame is a website element that basically shows content located on another website to the visitors of the current website. So, you can set up the content for your Facebook page tab on your Radium3 website and then tell Facebook to show that content on your Facebook page.
The only trick is that the content on your Radium3 website needs to be formatted to fit into the space Facebook provides for it, which means it must be no wider than 520px. Since the templates used on your Radium3 website are likely wider than 520px, you'll need to set up a special template to create the content that Radium3 will show through to your Facebook page tab. This requires a little HTML and CSS know-how. You can create a new template or modify one of the existing templates on your Radium3 site.
Once you have an appropriate template set up, you can apply that template to a hidden page on your Radium3 website and configure the content on that page using Radium3's built-in tools.
Set Up Your Facebook App
Once you have the content set up on your Radium3 website, you're ready to configure Facebook to use that content on your Facebook page. To set up a simple page tab, Facebook requires you to create a custom Facebook App. Fortunately, this is actually much easier than it sounds. Here's a quick rundown of the process:
Go to the Facebook Developer Website
Visit https://developers.facebook.com/apps. You must be logged in to Facebook to continue. If this is your first time to create a Facebook app, Facebook will ask you to authorize the developer tools, which you will need to do.
Click "Create a New App"
You'll be asked to provide a name for your app. The name can be anything just to help you remember what the app is for. You don't need to put anything in the "App Namespace" box.
Fill in the Details
Facebook Apps have tons of settings, but there are only a few you need to worry about. When you edit the settings on your app, look for the section called "Page Tab." Click to enable that and you'll see four fields. You only need to fill in the following three fields:
- Page Tab Name - put the words you want to show up on the actual tab. For example, on the Radium3 Welcome Tab, we put "Welcome."
- Page Tab URL - put the publishpath address of the page you set up on your Radium3 website with your Facebook tab content. For example - http://[yoursite].publishpath.com/facebook-welcome-tab
- Secure Page Tab URL - this is the secure version of your content. Radium3 has SSL security built into the publishpath domain, so you can use the same address you used above, but simply add an "s" to the "http" as such -- https://[yoursite].publishpath.com/facebook-welcome-tab
That's it! Now you can save your changes. What you've essentially done here is create a simple Facebook Application that, when added to a Facebook Page, will create a custom tab on that page and will display the content located at the address you provided on that custom tab.
Add the Tab App to Your Page
Now that your app is set up you need to add it to your Facebook page. To do this, you need to visit the app's profile page. You can find the app's profile page by editing the settings of your app and looking to the lower left for the "View App Profile Page" link. Once on the profile page, look to the lower left for the "Add to My Page" link. This will bring up a box of all the pages you administrate and you can add the app to the page(s) you choose.
Final Tweaks
Visit your Facebook page and you should see the new tab added to the list of tabs on the left. Click the tab and you should see the content you created showing through to your Facebook page. Now that this is set up, any changes you make to the source page should be immediately reflected on the Facebook tab.
You will notice that the icon used for the tab is quite generic by default. If you want to customize the icon, you can do so back on the settings screen for your app (look at the very top). You can also reorder the tabs on your Facebook page by clicking the "EDIT" button below the tab list. And, if you want to make your new tab the default tab for new visitors, click the "Edit Page" button at the upper right and look for the "Default Landing Tab" selector.
I hope you've found this tutorial helpful. If you have any additional thoughts, questions, or insights to share, please leave us a comment below.