Ah, Facebook – that oh-so-pervasive marketing tool. There are tons of ways that your business can use Facebook as a way to attract and connect with potential customers. A very simple yet very effective way is through the use of a landing page. What is a landing page, you may ask? It’s very simple: a landing page is simply the page that people land on when they first browse your Facebook fan page.
A good landing page, as Thomas Sinfield notes in his article, is “a page that gives new visitors a quick overview of who you are and what you do, and then directs them what to do next.” So, as you can imagine, an interesting and attention-grabbing landing page can help you gain more fans and therefore push your product or service out to a wider array of potential customers. Here’s an example from the fan page of a well-known cosmetics company:
Many landing pages (including this one) offer some perk to liking the fan page – here, you can join their program after liking the page. These perks can sway consumers even more heavily to become a fan. For some other great examples of well-designed landing pages, check this out.
You may be saying to yourself, “That’s all well and good, but it sounds kinda technical. I don’t know about designing a web page for my business – that HTML stuff is way over my head….”
Never fear! Creating a landing page is not as difficult as you think; a few easy steps and even the computer-challenged among us can proudly display their new landing page, attracting fans and helping to generate profit.
Facebook used to require landing pages to use an FBML format, which was a little trickier and more labor intensive, but has recently switched to the simpler iFrame application. Since iFrame isn’t hosted on Facebook, it acts pretty much like any other standard web page.
This means that to create your landing page, you’ll need a Web-accessible server where you store the files for your application. You’ll need to go into your server platform and create a folder for all of your iFrame files, to help keep everything organized in one spot! Hyperarts has a good description of how to do this if you’re not sure.
After creating a place on your server, the next step to designing your new landing page is to add a Facebook App to your developer account. You do that by going to http://www.facebook.com/developers/ and clicking the “Set Up New App” button in the upper right corner.
After naming your app and completing the security question, you’ll be taken to the administrator (admin) screen. There, you need to upload 6 things:
1) a 16 x16 graphic that will be the icon on your page’s tab
2) canvas page – name used to access the app
3) canvas URL – path to your web server
4) canvas type – set to iFrame!!
5) tab name – what the tab will be called when added to your Facebook page
6) tab URL – filename of the HTML page on your web server where you store the iFrame.
For more on this step, as well as screen shots of what the admin screen looks like, check out Social Media Charity. Brag Interactive also has a nice step-by-step overview of this process, complete with screen shots. Make sure you save your changes!
A note here on the tab URL. To enter this, you’ll need to have the graphics part of your landing page done and saved to your web server. So, here’s how…
An easy way to make the actual landing page is with Photoshop. Landing pages are designed to be 520 pixels wide, so keep that in mind as you start playing around with images. Another helpful tip, courtesy of Mashable’s design guide (check it out for more information!) is to take a screenshot of the top of your page, like this:
Then, you can open the screenshot with Photoshop and design around it – that way, you’ll know how far over the “Like” button is, so you can have an arrow on the landing page pointing potential fans right to it!
If you haven’t used Photoshop much before, never fear – it requires no HTML and Thomas Sinfield has a great guide to making landing pages in Photoshop on his blog! Another option is to “Like” Brag Interactive on Facebook, which will then allow you to use their free template.
This step might actually be the most fun – Photoshop is where you get to exercise all your creative license. You can customize colors and fonts to the best reflection of your business: girly colors and cutesy fonts for a women’s clothing store, earth tones and bold fonts for a landscape business, sleek lines and muted colors for an engineering firm…the possibilities are limitless! Let your imagination have fun with this step.
Once you’re satisfied with what the landing page will look like, you’ll want to save your template into your web server as the index.html page: the address should be something like:
http://servername.com/facebook/myapp/index.php
The server name part is whatever your server is called, and myapp is the name of your particular app. Then, you put this URL into the page tabs section as you set up your application – the graphic below from Hyperarts shows this process.
Once you’ve got the URL added to the page tabs, we need to add the iFrame tab to your profile page. Go to your Application Profile Page, then find the link on the left that says “Add to my page”. Clicking on that link will pop up a window with all the pages that have you listed as an admin. Find the page that you want this new landing page for, and click the “Add to Page” button. For some great screenshots on this, check out Social Media Charity or Hyperarts.
Following these steps should enable you to create an interesting and attention-grabbing landing page for your business. Once the page is up, it’s time to sit back and let the fans start ‘liking’ away!







Say hello !