Experimenting with Facebook Landing Pages

Back in February, I saw a great post from Mashable on how to build a landing page for Facebook and instantly thought of it as a great way to promote our upcoming fundraising event, Powerful Connections, coming up on April 30th. Here, I will walk you through the basics of setting up a landing page for your organization, and share some things that I learned while setting up ours. In this process, you will essentially be creating a simple Facebook application for your page, and you can do this with some HTML knowledge or a tool like Dreamweaver.

Facebook landing pages can be relatively complicated, mini-websites like the page for Microsoft Office, or they can be simple, like our recent page displaying the invitation to our event. Landing pages are going to be the first thing that non-fans see when they visit your site, so they can be a good tool for welcoming them and letting them know what they can expect as a fan – Walgreens’ page is a great example of this. People who are already your fan will not see this page by default, but it will be visible and accessible as an extra tab on your regular page.

While setting up the app in Facebook has several steps, the biggest piece of this project is to create the HTML that you want displayed. If you know HTML, you could build this page by hand. You can also use tools like Dreamweaver to create the code for this new page. In our case of building a page based off of the e-invitation to our upcoming event, I created the invitation in Vertical Response, our e-marketing tool, and copied the code over from there. That worked out well, since, as with an e-newsletter, building a Facebook landing page doesn’t require any CSS. There are many options for creating the code, but no matter what, you may have to make some adjustments as not all HTML tags are usable in Facebook.

You will also need to host all the pictures that you use for your landing page somewhere, and only reference their location in your code. It does not work to upload the pictures to your Facebook page, as then all of your fans and visitors will see this album of disjointed images – you can’t hide pictures that you upload to your Facebook page. Assuming that you have a website for your organization, it will well to host the pictures there. Most websites will have an images folder that you can use to host these pictures without them being visible to the public.

Once you have your code created, you need to set up the Static FBML application, which will give you a place to put it on Facebook. (There are a few other applications you can use, but this is what we used and what the following blog post recommends.) Mashable’s article has great, step-by-step instructions for how to set up this application and finish setting up the landing page. Here are a couple of additional helpful hints that I noticed while going through the process:

• Facebook limits the length of your tab’s title to approximately 12 characters – it seems to be a width measurement rather than a firm number of characters. Even when that tab is selected, the title does not expand completely. This is why I named our tab “Annual Event” rather than “Powerful Connections”.
• Even if you are not setting up a landing page, you can use the  “Wall Settings” step of the process to direct new visitors to important information, such as your information page or your cause.
• I decided to include a link at the bottom directing visitors to our regular wall.  To access the address of your wall tab to provide a link, click on the wall tab, and copy the contents of the address bar. (Do not just enter your page’s address, as that will bring them back to the landing page.) Alternatively, you could just include a sentence directing visitors to click the “wall” tab to the top.
• As this will not be obviously visible to fans, you may consider posting to your wall to let them know that you have something special going on.
• If you would like to see what this page looks like to someone who isn’t a fan, you can type in your page’s address while you are logged out of Facebook, or you can look at it using a different browser (i.e. if you use Firefox, open up and view your page in a new Internet Explorer window).

This is just an overview, but hopefully, you have a good idea of how to add these tabs to your Facebook page. Feel free to leave us any questions in the comments section. You may also want to visit some of our upcoming classes to learn more. Roughly once each month, we offer Dreamweaver Foundations and Intermediate classes which can help you learn how to use that tool to generate HTML for Facebook Pages, e-Newsletters, and websites. We also offer our Social Media for Building Community class regularly. This is a basic, intro-level class on how nonprofits can use Social Media, and is intended for nonprofits who are just getting started (no landing pages covered). Learn more about these classes and all of our offerings on our class calendar.

UPDATE:

Since our original writing, Facebook has implemented some changes to Pages. In relation to this post, the most important change to note is that there is now a restriction to pages being no more than 520 pixels in width, so make that you build any new pages with that in mind. You can read more about the recent changes in our follow-up blog post, “Changes Coming to Facebook Pages”