HOW TO: Design & Program a Facebook Landing Page for Your Business

Jonathan Goldford is a partner at JG Visual, an Internet strategy company that works with organizations to develop and implement their online presence. You can connect with Jonathan on the JG Visual Facebook Page.

Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million “Likes” and are growing rapidly.

While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example.

Designing Your Company’s Facebook Page

Actually designing a Facebook Page is very similar to designing any website, except for a few considerations:

Design for a 520px Width — Facebook Pages must fit within a width of 520px. Since we can’t use a body tag in our Facebook Page, we’re going build our entire page in a container div set to a width of 520px.
Design for Any Height — We can make our Facebook Page any height, but we have to remember that most people interact above the fold and at the time of writing this, our Facebook landing page will start 135px from the top if the person viewing is logged in. If they aren’t logged in to Facebook, that increases to roughly 250px from the top of the page to allow space to log in or sign up.
Account for the Width of the Company’s Name — Since we’re interested in creating a call to action for our Like button, we must take into account our company’s name. The Like button appears just right of the company name at the top of the landing page. If we’re going to point to the Like button, we need to figure out the pixel width from the left of our landing page to the start of our Facebook Like button.

To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Once you take a screenshot of your Facebook Page, pull it into a design program like Photoshop and design over it. Here is a look at a piece of our final Facebook Page design.

Programming Your Company’s Facebook Page

Now that we have a design we’ll walk through how to program our landing page to use on Facebook.

Begin Programming Outside of Facebook

There are a number of reasons why we should start programming our Facebook landing page outside of Facebook.

Facebook Offers No Coding Support — Facebook provides only a small box for you to code in, and provides no syntax coloring or syntax checking.

Facebook Caches External Files — Facebook caches every external file causing changes to external CSS, images, Flash, or other external files to not show up without changing the version query string on the end of each file.

You’ll Publish Untested Code — Once you save changes, those changes will be live on your Facebook Page. You probably don’t want users seeing an unfinished or broken landing page.

Program the Page Without FBML

Since we aren’t going to be using Facebook to start programming, we can’t use Facebook’s Markup Language (FBML). In order to account for how Facebook will handle our code, we will adjust our code to follow these rules as we build our page.

Use Plain Old HTML and CSS — Program your Facebook Page like you would any page using HTML and CSS. 90% of the code will act exactly the same way. The rest you can adjust when you move the code onto Facebook.
Load CSS Externally — CSS should be loaded using an external style sheet file instead of using an internal style sheet. Internet Explorer 6, 7, and 8 can’t read internal style sheets on Facebook Pages.
Host Files on Another Server — Every image, CSS file, Flash video, or other external file needs to be hosted elsewhere. Facebook will not host any files for you.
Make All Paths Absolute — All paths to external files must be absolute. Write an image link like http://www.example.com/images/picture.jpg. Don’t write images/pictures.jpg.
Remove Firefox’s 1 Pixel Gap — Mozilla Firefox creates a 1-pixel space between images on Facebook landing pages. Use a class with the style display:block to remove the space. In our code, we use the class “nospace” to implement this style.

To start, create one HTML and one CSS file. The HTML file will hold the HTML and eventually the FBML. The CSS file will hold all of your styles. We’ll call them facebook.html and facebook-styles.css.

Start by linking to the CSS file and creating a div with an ID of container. Give the container a width of 520px in the CSS. Also, if you want to brand your landing page a little better, you can choose a font. To override Facebook’s default paragraph style, we added a font-family style for #container p. Finally, Facebook uses a default font size of 11px and a font color of #333. To best imitate Facebook while testing, we included the 11px font size and also set the container text color to black to match our company colors.

facebook.html

facebook-styles.css

Create the remaining HTML and CSS for your Facebook landing page. Here is the code we have after finishing our page. At this point our landing page should look exactly how we presented it in the design instructions before.

facebook.html

facebook-styles.css

Test the landing page in all the browsers at this point to make sure it appears correctly. You really should test the page throughout building, but this serves as a good reminder.

Add in the Necessary FBML

The page looks exactly as we expected it to, but right now if someone already Likes our page, they will still see the call to action for them to Like at the top. Let’s put in a conditional statement using FBML that only shows the action image when you aren’t logged in or haven’t Liked the page. This way, once someone Likes the page, they won’t be prompted to do so again.

Regular HTML

HTML with the FBML Conditional Statement

Let me explain the code:

fb:visible-connection — This code checks to see if the user has Liked the page before. If the user has Liked the page then the content inside will appear.
fb:else — In this case fb:else will display only to users who haven’t Liked the page. That is why we put the call to action inside the else statement. Also, unlike typical else statements, fb:else is placed inside the other conditional.

In case you want to add something else besides a call to action for your Like button, below are some examples of other commonly used FBML items.

Adding the User’s Name — fb:name

Fb:name will display the full name of the logged in user. For example, if a user named John Smith comes to your page the code below will display “John Smith”. This can be used to greet a user by name when they come to your landing page.

Adding the User’s Profile Picture — fb:profile-pic

Fb:profile-pic will display a user’s profile picture if they come to your landing page. For example, the code below will display the current user’s profile picture at 64px by 64px.

Adding a Share Button — fb:share-button

Fb:share-button will display a share button that allows users to share a link on their own profiles. For example, the code below will display a basic share button for Mashable.

Adding a YouTube Video or SWF File — fb:swf

Fb:swf will display an image that when clicked will show a video. For example, the code below will display the thumbnail used for The Social Network movie trailer. When that image is clicked, the trailer’s YouTube video will automatically play.

Unfortunately, Facebook requires that the image be clicked before the video will play. You can create your own image to show through the imgsrc parameter. We wrapped the FBML in a container div to allow us to style it and added ?autoplay=1 to the end of swfsrc so the user won’t have to click twice to play the video.

If you want to add your own YouTube video, replace the text in the parameters swfsrc and imgsrc where it says “1B95KLmpLR4” with the ID of the YouTube video you want. You can find the ID in the URL of any YouTube video after the text http://www.youtube.com/watch?v=.

Adding an FLV file — fb:flv

Fb:flv will display a video player for FLV files. For example, the code below will display a play button that you click to play the FLV video. fb:flv provides the player and all the controls. All you need is the FLV file.

Adding an MP3 File — fb:mp3

Fb:mp3 will display and play an MP3 music file. For example, the code below will display a music player that users can click to play. The player will then rotate through a display of the song title, song artist, and the album name.

Adding a Form

While adding a form is not FBML, people are often curious to learn how to place them on their Facebook landing pages. To do this, copy and paste your form code into the FBML submission box. Make sure you use the following code to start your form:

Adding target="_blank" will open a new window when the form is submitted so the user isn’t taken away from Facebook.

If you want to add a newsletter signup form to Facebook, both MailChimp and CampaignMonitor have tutorials that explain the process. If you don’t use one of those services, you can usually drop in the code from your e-mail marketing company to make this work.

Adding JavaScript

Adding JavaScript is outside the scope of this article, but you can learn more about Facebook JavaScript at developers.facebook.com/docs/fbjs. As of right now, you should remember that JavaScript will not be activated on your landing page until the user has taken action.

If you haven’t found the FBML you’re looking for, visit Facebook’s Official FBML page.

Publishing Your Company’s New Facebook Page

After adding all of our FBML, we’re ready to add those final touches and publish our finished Facebook landing page.

Uploading External Content, Adjusting Links, and Adding a Version Query String

Once we’re done adding all the necessary FBML we need to move all the CSS, images, videos, and other external files to a server. To host your files, we recommend using your website’s server if possible.

Once all of our files are located on a public server, we need to adjust our HTML to make all of our paths absolute and add a version query string. Previously I mentioned that Facebook caches all of your external files. This means that once you publish your Facebook Page, any changes you make to external files will not show on your landing page. This happens because Facebook doesn’t know the file has changed and is loading its older saved version. To trick Facebook, we use a query string at the end of our filenames and increase the number whenever we make a change to that external file. Facebook then thinks we’re using a different file and loads it up.

Old Relative Path with No Version Query String

New Absolute Path with the Version Query String

Test Your Page Using the JavaScript Test Console

One of the biggest disadvantages of Facebook landing pages is that Facebook provides no place for you to test your code. We have to use the Facebook JavaScript Test Console.

Copy and paste your HTML into the JavaScript Test Console and click “Run Code.” You’ll get to see your code in action. If everything looks good, you’re ready to publish your finished Facebook landing page. If not, make sure to check the links to your external content. Also, I noticed that the Facebook JavaScript Test Console has trouble loading videos, so you may be forced to test that code directly on your landing page.

Publish Your Finished Facebook Landing Page

Finally, you are ready to publish your HTML file to the Edit FBML screen. Follow these steps:

Click “Edit Page” on your Facebook Page.
Click “Apps” on the left side of the page.
Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page.
Copy and paste your HTML code into the FBML box.
Title your FBML. This will show up in the tab at the top of the landing page. While you may want to use “Welcome,” remember that those who Like you will not land on this tab. Instead they will land on your wall and will see another tab that says “Welcome” at the top. We used “Who We Are.” Hopefully you can think of something more creative.
Click “Save Changes.”
Go view your Facebook landing page.

Make Your New Landing Page the Default Landing Tab

Now that you’ve put in all of this time programming your custom landing page, you probably want to make it your default landing page. This way, when someone that has not Liked your page comes to it, they will be taken to your custom landing page instead of your wall. Here’s how to do it:

Click “Edit Page” on your Facebook Page.
Click “Manage Permissions” on the left side of the page.
Beside “Default Landing Tab,” use the drop-down menu to select the title of your new landing page.
Click “Save Changes.”

Note that as an admin you will always see the content that you only want shown to those who haven’t Liked your page. Check with someone who has Liked your page and is not an admin to make sure they only see the content that’s meant for them.

Congrats, You’re Finished!

Nice work. You’re done. In case you need it, here are the final HTML, FBML, and CSS we used for our Facebook landing page.

HTML and FBML

CSS

Since there is no one correct way to program a landing page, we would love to hear what you think. Have you ever designed or programmed a Facebook landing page? How did it go? Did you run into any issues? Do you have any additional tips we didn’t cover here? Let us know in the comments.

More Dev & Design Resources from Mashable:

– How App-Like Design Can Turn Your Site Visitors Into Customers
– 4 Predictions for Web Design in 2011
– HOW TO: Get the Most From Crowdsourced Design Competitions
– HOW TO: Get More Out of Your Fonts
– 10 Predictions for Web Development in 2011

Image courtesy of Flickr, smemon87

More About: business, design, facebook, landing page how to, marketing lists, web design, Web Development

For more Dev & Design coverage: