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.
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:visible-to-connection</span><span style="color: #0000ff;">></span> <span id="lnum2" style="color: #606060;"> 2:</span> // This is visible to fans only <span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Welcome back!<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span> <span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">>Please </span><span style="color: #0000ff;"><</span><span style="color: #800000;">a</span> <span style="color: #ff0000;">href</span><span style="color: #0000ff;">="book.pdf"</span><span style="color: #0000ff;">>d</span>ownload<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> your gift<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>. <span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:else</span><span style="color: #0000ff;">></span> <span id="lnum6" style="color: #606060;"> 6:</span> // This is visible to people who are not fans yet <span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/like-me.jpg"</span><span style="color: #0000ff;">></span> <span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:else</span><span style="color: #0000ff;">></span> <span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:visible-to-connection</span><span style="color: #0000ff;">></span>
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.
<span style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:swf</span> <span style="color: #ff0000;">swfsrc</span><span style="color: #0000ff;">="http://www.youtube.com/v/ID_HERE"</span> <span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #ff0000;">imgsrc</span><span style="color: #0000ff;">="http://img.youtube.com/vi/ID_HERE/default.jpg"</span> <span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #ff0000;">width</span><span style="color: #0000ff;">="480"</span> <span style="color: #ff0000;">height</span><span style="color: #0000ff;">="360"</span> <span style="color: #0000ff;">/></span>
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.
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:comments</span> <span style="color: #ff0000;">xid</span><span style="color: #0000ff;">="user_comments"</span> <span style="color: #ff0000;">canpost</span><span style="color: #0000ff;">="true"</span> <span style="color: #ff0000;">showform</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> <span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:title</span><span style="color: #0000ff;">></span>Leave a Comment!<span style="color: #0000ff;"></</span><span style="color: #800000;">fb:title</span><span style="color: #0000ff;">></span> <span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:comments</span><span style="color: #0000ff;">></span>
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.
<span id="lnum1" style="color: #606060;">1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:dialog</span> <span style="color: #ff0000;">id</span><span style="color: #0000ff;">="dialog"</span> <span style="color: #ff0000;">cancel_button</span>=<span style="color: #ff0000;">1</span><span style="color: #0000ff;">></span> <span id="lnum2" style="color: #606060;">2:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:dialog-title</span><span style="color: #0000ff;">></span>About Us<span style="color: #0000ff;"></</span><span style="color: #800000;">fb:dialog-title</span><span style="color: #0000ff;">></span> <span id="lnum3" style="color: #606060;">3:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:dialog-content</span><span style="color: #0000ff;">></span>Digital Inspiration is a technology blog. <span id="lnum4" style="color: #606060;">4:</span> Would you like to learn more?<span style="color: #0000ff;"></</span><span style="color: #800000;">fb:dialog-content</span><span style="color: #0000ff;">></span> <span id="lnum5" style="color: #606060;">5:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:dialog-button</span> <span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span> <span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Yes"</span> <span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://labnol.org"</span> <span style="color: #0000ff;">/></span> <span id="lnum6" style="color: #606060;">6:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:dialog</span><span style="color: #0000ff;">></span> <span id="lnum8" style="color: #606060;">7:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span> <span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span> <span style="color: #ff0000;">clicktoshowdialog</span><span style="color: #0000ff;">="dialog"</span><span style="color: #0000ff;">></span>Click here<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> 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:
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:swf</span> <span style="color: #ff0000;">swfsrc</span><span style="color: #0000ff;">='http://slideshare.net/swf/ssplayer2.swf?doc=ID_HERE'</span> <span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #ff0000;">width</span><span style="color: #0000ff;">='515'</span> <span style="color: #ff0000;">height</span><span style="color: #0000ff;">='425'</span> <span style="color: #ff0000;">imgsrc</span><span style="color: #0000ff;">="thumbnail.jpg"</span> <span style="color: #0000ff;">/></span>
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 MeeboMe and then embed it into your Facebook FBML box using the code below:
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:swf</span> <span style="color: #ff0000;">swfsrc</span><span style="color: #0000ff;">='http://widget.meebo.com/mm.swf?ID_HERE'</span> <span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #ff0000;">width</span><span style="color: #0000ff;">='515'</span> <span style="color: #ff0000;">height</span><span style="color: #0000ff;">='425'</span> <span style="color: #ff0000;">imgsrc</span><span style="color: #0000ff;">="chat-thumbnail.jpg"</span> <span style="color: #0000ff;">/></span>
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.
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:mp3</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/podcast.mp3"</span> <span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #ff0000;">title</span><span style="color: #0000ff;">="Episode 12"</span> <span style="color: #ff0000;">artist</span><span style="color: #0000ff;">="This Week in Facebook"</span> <span style="color: #0000ff;">/></span>
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 software around, offers a Flash based widget for embedding polls in websites. You can grab their widget code and insert it into your Facebook Page via FBML as shown here:
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:swf</span> <span style="color: #ff0000;">swfsrc</span><span style="color: #0000ff;">='http://i.polldaddy.com/poll.swf?p=ID_HERE'</span> <span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #ff0000;">width</span><span style="color: #0000ff;">='250'</span> <span style="color: #ff0000;">height</span><span style="color: #0000ff;">='500'</span> <span style="color: #ff0000;">imgsrc</span><span style="color: #0000ff;">="poll-thumbnail.jpg"</span> <span style="color: #0000ff;">/></span>
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.
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:random</span> <span style="color: #ff0000;">pick</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
<span id="lnum2" style="color: #606060;"> 2:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/image-1.jpg"</span> <span style="color: #0000ff;">/></span>
<span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum5" style="color: #606060;"> 5:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum6" style="color: #606060;"> 6:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/image-2.jpg"</span> <span style="color: #0000ff;">/></span>
<span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum8" style="color: #606060;"> 8:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum9" style="color: #606060;"> 9:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/image-3.jpg"</span> <span style="color: #0000ff;">/></span>
<span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum11" style="color: #606060;"> 11:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum12" style="color: #606060;"> 12:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/image-4.jpg"</span> <span style="color: #0000ff;">/></span>
<span id="lnum13" style="color: #606060;"> 13:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum14" style="color: #606060;"> 14:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum15" style="color: #606060;"> 15:</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img</span> <span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://example.com/image-5.jpg"</span> <span style="color: #0000ff;">/></span>
<span id="lnum16" style="color: #606060;"> 16:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:random-option</span><span style="color: #0000ff;">></span>
<span id="lnum17" style="color: #606060;"> 17:</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fb:random</span><span style="color: #0000ff;">></span>You can extend this idea to showcase your popular content in a self-rotating manner.
Related tutorial: How to Write a Facebook Application