Facebook has made some significant changes to the layout of Facebook Pages in recent months. The custom landing tabs are gone and all Facebook Pages are now rendered using the new Timeline view. Page owners can add cover photos and they can also highlight important stories by pinning them to the top.
Facebook Pages, by default, include apps for Events, Photos, Videos and Notes. However, if you would like to include custom information on your Facebook Page - maybe a Google Map of your business or YouTube videos or maybe a calendar of events - you need to create an app for that. Let me share a few good examples.
The official Facebook Page for Nokia has a Welcome Tab that highlights some of their recent phones. The Nike page has a Locations Tab that highlights the location of Nokia stores in the country. Apple's App Store page has a Featured Tab where they have put a list of their top-selling apps and games. The Al Jazeera Page on Facebook has a "Watch Live" Tab where you can watch news right inside Facebook.
Have you ever wondered how do big brands create such interesting Facebook pages? They may have big marketing budgets but do you really need to hire skilled designers or programmers to build such fan pages? Well the answer is obviously no. You can create beautiful custom apps for your Facebook Page without writing a single line of code and all you need are few minutes.
Building Custom Tabs (Apps) for Facebook Pages
Facebook Apps for Pages, in simple English, are like regular web pages that are embedded inside Facebook using the IFRAME tag. Thus, any object that can be embedded in a HTML web page - like audio MP3s, Google Maps, YouTube videos, presentations, Google Calender, jQuery Carousels, photo slideshows, etc. - can be easily added to your Facebook Pages.
Before we get into the actual process of creating custom tabs (or apps) for Facebook Pages, we need a find a place to host the HTML, CSS, Images, JavaScript and other files associated with our web pages. I prefer using Google Sites to host pages because they are free, you get a WYSIWYG editor to create pages and Google Sites can be integrated with Google Analytics so you more easily track visits to your Facebook pages.
The other big reason is that Google Sites can serve pages over secure (https) and regular (http) connections. This is an extremely important point because a majority of Facebook users may have turned on "secure browsing" in their security settings. If your Facebook app serves content from a regular (http) URL, all these users will see is a warning message and you definitely don’t want this to happen. Google Sites is thus a recommended option.
How to Create a Facebook App for your Page
Enough theory, let's get our hands dirty and create a custom app for our Facebook Page. If you get stuck, follow this video tutorial.
Step 1: Open Google Sites and create a new site. Choose "Blank Slate" for the theme and, under Site Settings, set the width as 100% so your content occupies the entire width of the Facebook Canvas. Also disable the Header and Sidebar since we don’t want this stuff to appear on our Facebook Page.
Step 2: Compose a new page in Google Sites and add some content to this page using the built-in WYSIWYG editor. If you are an experienced coder / designer, switch to the HTML view and add HTML code directly to your page. You may insert images, maps, videos, spreadsheets, gadgets, tables and everything else just like a regular HTML page.
Step 3: Open the Facebook Developers page at developers.facebook.com and, if this is your first Facebook App, click "Go to App" to add the Developer app to your Facebook Profile. Next click on the button that says "Create a new App" and give your app a name (you can skip the other fields).
Step 4: Expand the "Page Tab" option under Basic Settings and set the URLs for "Page Tab" and "Secure Page Tab" the same as your URL of your Google Site's page. The Page Tab URL should point to the http version of the Google Sites page while the Secure Page Tab URL should use the https version.
Step 5: You should also upload a 111×74 pixels thumbnail image with your Page Tab as it will show up in the header of your Facebook Page. Use bigger fonts inside the image for better readability. Save the changes and your Facebook App is now ready.
Step 6: Now we need to add this custom Page Tab to our Facebook Page. That's easy. Copy the App ID of your Facebook App that you just created and replace XZY in the following URL with that App ID. Open the modified URL in your browser and you should see an option to add the app to your Facebook Pages.
https://www.facebook.com/dialog/pagetab?next=http://facebook.com&app_id=XYZ
That's it. You can add more apps /tabs to your Facebook Page using the same technique and it is also possible to alter the order of these tabs in the header.
If you ever need to update the content of a Facebook tab, just update the corresponding Google Sites page and your Facebook tab will update automatically because internally, you are just serving the same Google Sites Page to your Facebook Fans.
