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.
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.
<fb:visible-to-connection>
// This is visible to fans
only
<h2>Welcome back!</h2>
<p>Please
<a href="book.pdf">download</a> your
gift</p>.
<fb:else>
// This is visible to people
who are not fans yet
<img src="http://example.com/like-me.jpg">
</fb:else>
</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.
<fb:swf swfsrc="http://www.youtube.com/v/ID_HERE"
imgsrc="http://img.youtube.com/vi/ID_HERE/default.jpg"
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
<fb:comments xid="user_comments" canpost="true" showform="true">
<fb:title>Leave a Comment!</fb:title>
</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.
<fb:dialog id="dialog" cancel_button=1>
<fb:dialog-title>About Us</fb:dialog-title>
<fb:dialog-content>Digital
Inspiration is a technology blog.
Would you like to learn more?</fb:dialog-content>
<fb:dialog-button type="button" value="Yes" href="http://labnol.org" />
</fb:dialog>
<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:
<fb:swf swfsrc='http://slideshare.net/swf/ssplayer2.swf?doc=ID_HERE'
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 MeeboMe and then embed it into
your Facebook FBML box using the code below:
<fb:swf swfsrc='http://widget.meebo.com/mm.swf?ID_HERE'
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 and Facebook
will wrap them in their own player as show in the above animation.
To add an MP3, use the following code.
<fb:mp3 src="http://example.com/podcast.mp3"
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 their widget code and insert it into
your Facebook Page via FBML as shown here:
<fb:swf swfsrc='http://i.polldaddy.com/poll.swf?p=ID_HERE'
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
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.
<fb:random pick="1">
<fb:random-option>
<img src="http://example.com/image-1.jpg" />
</fb:random-option>
<fb:random-option>
<img src="http://example.com/image-2.jpg" />
</fb:random-option>
<fb:random-option>
<img src="http://example.com/image-3.jpg" />
</fb:random-option>
<fb:random-option>
<img src="http://example.com/image-4.jpg" />
</fb:random-option>
<fb:random-option>
<img src="http://example.com/image-5.jpg" />
</fb:random-option>
</fb:random>
You can extend this idea to showcase your popular
content in a self-rotating manner.
