Build Facebook Pages with Custom Tabs

All the big brands including Coca-Cola, Starbucks, Nokia and Apple maintain fan pages on Facebook that are “liked” by millions of Facebook users worldwide. These pages are designed professionally, they are customized and offer certain useful features.

For instance, the Apple iTunes page lets you search for apps right inside Facebook. In the case of Threadless, you can comment on your favorite T-Shirt designs without leaving Facebook while CNN's Facebook page offer news on their landing page.

How do they create such interesting Facebook pages? Do you really need to hire designers or skilled programmers who understand the ins-and-outs of Facebook APIs in order to build interactive and beautiful fan pages? Well, the answer is no.

Update: Facebook has dropped support for Static FBML tags. Please watch my updated tutorial on creating custom Facebook Pages.

Build a Customized Facebook Fan Page

As an example, see this customized Facebook page that includes a welcome page (also known as custom landing tab) for new visitors, presentations, a live RSS feed, videos and more. And it doesn’t take lot of effort to build such a page. Let’s see how:

Step 1: Assuming that you’ve already created a basic Facebook Page, open the Static FBML application and add it to your Facebook page.

Step 2: Go back to your Facebook Page, click the “Edit Page” link in the sidebar and again click “Edit” under the FBML section.

Step 3: This is your playground - anything that you insert into this FBML text box will be visible on your Facebook Page. It accepts standard HTML tags so you may insert images, tables, paragraphs and more into your Facebook Page with simple markup.

Step 4: Now click “Edit” under Wall Settings and set the “Default Landing Tab for Everyone Else” to one of your new FBML boxes.

Feeling confused? The following video will walk you through the steps required to create a custom landing page on Facebook using Static FBML. You can add multiple FBML boxes to your Facebook page and they’ll show up as separate tabs.

Add Elements to your Facebook Page

Now that your basic Facebook Page with the Static FBML app is in place, here are some ideas / code-snippets that you may add to your Page:

1. A Better Landing Page

If you want to show a different landing page to fans and non-fans, use the visible-to-connection tag as in the following example.

Fans will see a link to download a PDF book while non-fans will see a welcome image. Remember that the width of this image should not exceed 520px.

 1: <fb:visible-to-connection>
  2: // This is visible to fans only
  3:  <h2>Welcome back!</h2>
  4:  <p>Please <a href="book.pdf">download</a> your gift</p>.
  5: <fb:else>
  6: // This is visible to people who are not fans yet
  7:  <img src="http://example.com/like-me.jpg">
  8: </fb:else>
  9: </fb:visible-to-connection>

2. Embed a YouTube Video

If you would like to embed a YouTube video into one of the tabs of your Facebook Page, copy-paste the following code into the FBML box.

Remember to replace ID_HERE with the actual ID of the YouTube video.

 1: <fb:swf swfsrc="http://www.youtube.com/v/ID_HERE"
 2:     imgsrc="http://img.youtube.com/vi/ID_HERE/default.jpg"
 3:     width="480" height="360" />

3. Add your RSS Feed

If you have an RSS feed for your website /blog, you can easily show the most recently published stories on your Facebook Page as well in a separate tab.

Simply open RSS Feed for Pages and add the app to your Facebook Page.

4. Add a Comments Box

You can easily add a section on your Facebook Page where fans can leave their comments, ask you something or even talk to each other – see example.

 1: <fb:comments xid="user_comments" canpost="true" showform="true">
 2:  <fb:title>Leave a Comment!</fb:title>
 3: </fb:comments>

5. Add Forms and Dialog Boxes

The semi-transparent pop-up dialogs are unique to Facebook and you can easily bring them to your Facebook pages with a simple snippet.

For instance, the following code, when added to your FBML box, will create an “About Us” link on your Facebook Page. When people click on the link, they’ll be shown a dialog as in the above screenshot.

You may also insert HTML forms in Facebook dialogs to collect user preference or even for email based newsletter subscriptions.

1: <fb:dialog id="dialog" cancel_button=1>
2:  <fb:dialog-title>About Us</fb:dialog-title>
3:  <fb:dialog-content>Digital Inspiration is a technology blog.
4:           Would you like to learn more?</fb:dialog-content>
5: <fb:dialog-button type="button" value="Yes" href="http://labnol.org" />
6: </fb:dialog>
7: <a href="#" clicktoshowdialog="dialog">Click here</a> to learn more.

6. Embed a Slideshare Presentation

Like your YouTube video clips, you can easily add any of your Slideshare slideshows to your Facebook Pages using the fb:swf tag. Here’s an example:

 1: <fb:swf swfsrc='http://slideshare.net/swf/ssplayer2.swf?doc=ID_HERE'
 2:           width='515' height='425' imgsrc="thumbnail.jpg" />

Replace thumbnail.jpg with the URL of the actual thumbnail image of your presentation.

7. Add a Chat Room

You can use your Facebook page to chat with your fans live while they are on your page. To get started, simply create a Flash based chat widget for your Facebook page using Meebo Me and then embed it into your Facebook FBML box using the code below:

 1: <fb:swf swfsrc='http://widget.meebo.com/mm.swf?ID_HERE'
 2:           width='515' height='425' imgsrc="chat-thumbnail.jpg" />

Replace ID_HERE with the ID of the chat widget supplied to you by MeeboMe. This will let you chat with your Facebook fans but they won’t be able to chat with each other.

8. Add Podcasts and other MP3 Audio

Facebook makes it extremely easy for you to embed MP3 audio files in Facebook Pages. You need to host them online (see options) and Facebook will wrap them in their own player as show in the above animation.

To add an MP3, use the following code.

 1: <fb:mp3 src="http://example.com/podcast.mp3"
 2:   title="Episode 12" artist="This Week in Facebook" />

You may also use custom MP3 players but then you’ll have to rely on the fb:swf tag.

9. Add Polls to your Facebook Page

While there are quite a few Facebook apps for polls, I prefer a solution that would let people vote directly without requiring them to add the Facebook App to their profile.

So here’s a simple workaround. PollDaddy, which is one of the best polling softwarearound, offers a Flash based widget for embedding polls in websites. You can grab theirwidget code and insert it into your Facebook Page via FBML as shown here:

 1: <fb:swf swfsrc='http://i.polldaddy.com/poll.swf?p=ID_HERE'
 2:           width='250' height='500' imgsrc="poll-thumbnail.jpg" />

Now fans of your Facebook page will be able to vote with a click. Do replace the ID_HERE with your own Poll ID.

10. Surprise your fans

A lesser-known but very interesting feature of Facebook Pages is that you can randomize content with the help of FBML (visit this page and hit F5 to see it in action).

The idea is that you create multiple blocks of content and show them randomly to your visitors. For instance, the following code will pick one random image from the available pool and, if you put this code on the landing page, your visitors will probably see something new and refreshing on every visit.

 1: <fb:random pick="1">
     2:   <fb:random-option>
     3:     <img src="http://example.com/image-1.jpg" />
     4:   </fb:random-option>
     5:   <fb:random-option>
     6:     <img src="http://example.com/image-2.jpg" />
     7:   </fb:random-option>
     8:   <fb:random-option>
     9:     <img src="http://example.com/image-3.jpg" />
     10:   </fb:random-option>
     11:   <fb:random-option>
     12:     <img src="http://example.com/image-4.jpg" />
     13:   </fb:random-option>
     14:   <fb:random-option>
     15:     <img src="http://example.com/image-5.jpg" />
     16:   </fb:random-option>
     17: </fb:random>

You can extend this idea to showcase your popular content in a self-rotating manner.