SIVANANDA REDDY GANGIREDDY: Tutorial: How to Create a Custom Facebook Page

Monday, February 6, 2012

Tutorial: How to Create a Custom Facebook Page

My previous guide on creating custom Facebook Pages is no longer relevant since it made use of Static FBML (Facebook Markup Language) and Facebook recently dropped support for FBML tags in favor of IFRAME based tabs.

This is actually good news for businesses and individuals who maintain Facebook Pages because you can now customize the design of your Pages without writing any code. You can create custom apps (or ‘tabs’) for your Facebook Page in any WYSIWYG editor and thus, anything that can be embedded in a HTML page can be easily added to your Facebook Pages.

Building Custom Tabs (Apps) for Facebook Pages

Before we get into the actual process of creating custom tabs for Facebook Pages, we need to decide a place where we’ll host the HTML, CSS and other associated files. If you already have a web host, you can use that to host your Facebook Pages but an even better, and simpler, option is Google Sites.

[*] The Digital Inspiration page on Facebook also uses Google Sites.

There are several reasons why you may want to use Google Sites. Google Sites are easy to maintain, offer WYSIWGY editing tools and can be integrated with Google Analytics so you more easily track visitors to your Facebook pages.

The other big reason is that Google Sites support both secure (https) and regular (http) connections. This is extremely essential because some users may have turned on “secure browsing” in their Facebook security settings. If you service your Page content from a regular (http) connection, all they’ll see is a “turn off secure browsing” warning messages.

You can easily avoid this issue with the help of Google Sites.

How to Create a Facebook App for your Page

Enough of theory, let’s now get our hands dirty and build a custom tab app for our Facebook Page.

Step 1: Open Google Sites and create a new site. Choose “Blank Slate” for the theme and set the width as 500px (the Facebook Pages canvas can be 520px wide). [#]

Step 2: Create a new page in Google Sites and add some content to this page using either the built-in WYSIWYG editor or switch to the HTML view for any custom code. You may insert images, maps, videos, and everything else just like a regular HTML page. [#]

Step 3: Switch to Facebook and search for the “Developer” app. Add this to your Facebook Profile and then click on the button that says “Create a new App”. Give your app a name and also add an icon since it will show up in your Facebook page. [#]

Step 4: Under Facebook –> Canvas Settings, set the URLs for Canvas and Tab the same as your Google Site’s URL. The regular Canvas /Tab URL should point to the http version of the Google Sites while the Secure Canvas /Tab URL should use the https version. [#]

Step 5: We are almost done. On the “Canvas Settings” page itself, click “View App Profile Page” followed by “Add to My Page” to add that app to any of your Facebook Pages as a new “tab.” If you wish to create more tabs for your custom Facebook Page, you just have to create new apps using the same steps.