Written By: Owen Smithyman
As BARS+TONE continues to evolve as an agency, we thought we would document our efforts within the Social Media realm. Our current adventure: a customized Facebook landing page tab.
Using Facebook’s Static FBML (Facebook Markup Language) application, one of these tabs can be set as the first thing someone sees when visiting your fan page for the first time. This is a great way to make a good first impression on viewers because it’s one of few areas within Facebook in which you can place content that isn’t bound to Facebook’s color scheme and layout. Most importantly, having a custom landing page makes your brand stand out from the competition and allows people to interact differently than with the standard Facebook wall.
Here is what BARS+TONE‘s customized tab looks like:
Until you learn all the idiosyncrasies of the Static FBML application, making one of these custom tabs is not trivial. Here are some tips and tricks for making a custom landing tab.
First, you need to figure out how to navigate through the various menus necessary in order to create a new tab and edit its code.
1. Type “Static FBML” into the main search box and click the result (or click our link).
2. Under the profile image, click “Add to my Page”.
3. Choose the page you want to add it to.
Note: if you don’t see your fan page listed, it’s probably already added.
Also note that Static FBML only works with fan pages.
4. Go to your fan page.
5. Click “Edit Page” under the profile image.
6. Click “Applications” in the left pane.
7. Find “Static FBML” in the list of applications, and click “Go to Application”.
8. If you want to add another tab, click the “Add another FBML box” link at the bottom of the page.
9. Edit your code.
Your tab’s maximum width is 520 pixels.
If you’re using CSS (Cascading Style Sheets), you have to use external style sheets or else Internet Explorer won’t display your content properly.
Facebook caches your style sheet. This means that the first time you submit your content to the tab, Facebook will copy what’s on your external style sheet to itself. It only does this once. If you make changes to your style sheet, your tab will NOT reflect them unless you use a special bit of code in your style sheet link to denote the version number (see the “?v=1.7” underlined below). Every time you change your style sheet, you need to go into the code for your tab and increment that version number, or else you will be extremely frustrated when nothing changes.
<link href="http://yoursite.com/style.css?v=1.7" rel="stylesheet" type="text/css" />
If you want a background image, you can’t do it using CSS. Instead, you have to make a table the size of your background image and then set your image as the background image of the table:
<table height=1500 width=520 background='http://yoursite.com/images/bgimage.jpg' />
To embed video from YouTube, you can’t use YouTube’s embed code. Instead, you need to use the FBML embed tag as shown below. Furthermore, videos can’t play automatically – they require a click on the part of the user. However, if you don’t enable autoplay in your video source URL, then the user has to click twice! So make sure to put &autoplay=1 in your YouTube URL:
<div>
<fb:swf
swfsrc='http://www.youtube.com/v/fIj060p-7LA?version=3&autoplay=1'
imgsrc='http://yoursite.com/images/thumbnail.jpg' width='368' height='222' />
</div>
It took some time to get BARS+TONE’s page working, so hopefully this helps you skip some of the hassle of tracking down this information.
Tags: BARS+TONE, css, custom landing page, facebook, How to, Marketing, Online Media, Public Relations, static FBML, YouTube
HOW TO: Customize a Facebook Landing Tab