If you manage a Facebook Fan page, chances are you spend most of your time and energy on the wall. It’s where you interact with fans, but it’s also where first-time visitors land. Why not greet them with a custom Facebook landing page? A stylish, branded splash page provides full control over the message and helps boost conversion of fans.
I’ve provided a downloadable Facebook landing page PSD template that will help you get started. In this post, I’ll walk you through customizing the design and setting up your own landing page. Here’s a look at what we’ll be creating.
The design conveys the necessary information without being too cluttered. The elements of a good landing page are as follows:
- Call to action tells me what you want me to do.
- Three list points tell me why I should do it.
- Secondary call to action makes me aware of your other social media efforts.
I’ve included a layered PSD, so you won’t have to build this from scratch. You can swap in your own logos and text. We’ll build the social media links in basic HTML, so you can link wherever you please. Here’s how it’s done.
Download the files
First, download the files and open the PSD in Photoshop. You’ll notice it looks slightly different than the image above. That’s because the social media icons and text will be done in HTML to allow for links.
Add in your logo and change the text as you please and use Photoshop’s save for web feature to create a JPEG.
Download some slick social media icons
In this example, I used Rogie King’s social media icon set, but there are dozens of other sets out there. Size them all to 29px by 29px and use Photoshop’s save for web feature to create a JPEG.
Put all images on a server
Sounds scary if you don’t own a website, but fear not! You can simply create a flickr account and upload your images there. Once you’ve done that, you’ll need the URL for each image. Open the first image, and click “Actions,” then “Grab the HTML/BB Code.” Copy the URL after <img src=”
Or, if you do have access to a server, upload each image to a URL that you’ll be able to reference later.
Set up the tab on Facebook
Now, we’re ready to start uploading the image onto Facebook. Log on, then add the static FBML app. This will create a tab that will hold our image.
Next, click “Edit Page” beneath your fan page profile image. You’ll see a page with all of your apps. Find the FBML app and click the “Edit Settings” link.
Add your code
Give your tab a name, like “Welcome,” then paste the code from fbmlcode.html into the FBML field. Make sure to change the links to point to your Twitter account, RSS Feed, etc. Finally, change the image sources to point to where your top image and social media icons live online. (Note that all versions of Internet Explorer do not support inline styles, hence the embedded styles. An external stylesheet would also work.) Save the tab and go back to your wall.
Make this tab the default landing tab
Now we want to make sure new visitors land on your new tab. Go to your Facebook wall. In the upper right corner, (beneath where you compose a status update) click the “Settings” link. For “Default Landing Tab for Everyone Else, choose the welcome tab you just created.
Conclusion
Now, new visitors will be greeted by your custom landing page. Since you’re the page admin, you won’t be able to see this unless you log out of Facebook then visit your URL. Here are some additional resources and inspiration for custom Facebook landing pages.
- Mashable: 5 Fantastic Facebook Fan Page Ideas to Learn From
- Mashable: HOW TO: Design & Program a Facebook Landing Page for your Business
- Standoutblogger: Tutorial: Facebook Landing Page Template (PSD included)
- Smashing Magazine: Designing A Facebook Fan Page: Showcase, Tutorials, Resources
Share this post:
