How To Build Your Facebook Landing Page (If You’re Not A Programmer)

Credits: Social mouth Author Francisco.

A guide to building a basic Facebook landing page. Yes, step-by-step, with screenshots and everything! You already know how I love to be very visual. Also, we are going to keep it simple so we won’t be adding any email signup boxes or embedding video players.

Also as usual, let’s start at the beginning.

Why Is A Landing Page Important?

The landing page is usually setup as the “Welcome” tab for people that has not “Liked” the page. Saying that it is for first-time visitors is totally wrong, if I keep visiting your page every week without “Liking” it, I will land on the Welcome tab every time until the day I click on the freakin’ button.

But the Facebook Landing Page is important for two main reasons:

  • The Wall is generic, there is no distinction between one page or another. There is no way of standing out and creating a good first impression. There is nothing clear and obvious about who you are or what yo do or offer. There is no branding other than the profile pic (limited to 200 x 600 pixels). The landing page gives you those opportunities
  • The landing page, just like your website or blog, should focus on a strong CTA (Call-To-Action)

Just ask yourself this question: What about the Wall makes me click on the “Like” button? I’ll give you my answer: Nothing.

What Is The Main Goal?

There can be many goals for a Facebook landing page but there is one that has to be the first and most important one: Get your visitor to click on the “Like” button. The “Like” triggers everything. Now these people will get your content on their Facebook News Feed.

If you are trying to get traffic to your Facebook Page, perhaps you’re looking at this all wrong. Traffic to your Page has no value to you, you don’t own it, you don’t even own the domain. What you need is a simple “Like”. It’s like permission marketing. Think of a Twitter follower, you don’t need that person to go to your actual profile, you only need him/her to see your Tweet and for that you need that person to follow you.

The magic happens on the News Feed but first… you need a “Like”.

Facebook News Feed

What Else Can We Do?

Then we can have secondary goals, let’s look at some examples:

  • An image is worth a thousand words and Facebook lacks that, which is not completely a bad thing, we don’t need it to look like a flea market like MySpace. Use a good visual to express your message
  • The landing page can tell a story, tell people who you are or what your business does. Now your first-time visitor know where he/she landed and what they’re about to get from you
  • You can use it also to link to your site and other online properties. Use it as an external navigation to your main site
  • You can use it to integrate multimedia such as videos to better engage users

Be creative. We are not going to look at very complex design here but think that whatever you can do on HTML, you can do here.

But I’m Not A Designer… Or A Programmer

I think you should hire someone that can design and program a kick-ass landing page, one that’s focused on Facebook Like Conversion (Did I just invent a term there?) and here is exactly what I think, this goes for your site and everything you do online too. The Internet and the available technology of today allows us to pretty much do things on our own, that doesn’t mean we should. This is the most powerful marketing platform for small business and we should focus on design that converts, not just pretty looks.

But this post is about building a Facebook Landing Page on your own so, let’s do this!

Build Your Own

This is where the real juice of the post is, let’s do this as a step-by-step guide:

This can be as easy as displaying a simple image but we want to add some interactivity to the mix so we’ll add some linkage to that image. Again, we are not going to get into any complicated coding here.

1. Get some inspiration

First thing you should do is get some inspiration for your design, there are some great examples out there. Look for people and businesses in your industry. I’m not going to post a bunch of images for good practices because this is not an inspiration post but here is a good example from Mari Smith. And who are we kidding, Mari is the queen of Facebook. I say she should sit next to Mark Zuckerberg at board meetings!

Mari Smith Facebook Landing Page

One thing you should know before crafting your masterpiece is that the dimensions you have to play with are 520 pixels wide and it can be as tall as you want (don’t make it too tall).

2. Create your image

For this we’ll need an image editor, I use Photoshop but you can even use a web-based application such as Picnik. It will be enough to work with some images and text.

Design Your Own Facebook Landing Page by SocialMouths

Here is my image already design, optimized for web and saved on my computer. I’m keeping it simple, an image, some text and a couple of links I will need to give life to.

Facebook Landing Page Image

3. Upload to the internet

You can use services like Photobucket to host an image and get a unique URL for it but… call me old-fashioned but I rather host my images on my own server. No, I’m not going to ask you to get a FTP Client or anything like that.

This is as easy as uploading your image through your WordPress dashboard. Go to your Media Library > Add New

Wordpress Media Library

Now go to the Media Library, find the image you just uploaded (should be the first one on the list), click on edit and grab the “File URL”. Believe me, it doesn’t get any easier than this.

Image URL on WordPress Media Library

4. Create an Image Map

An “Image Map” is a simple image that contains more than one link in it, also known as “Hot Spots”. There are a few ways you can do this, if you have some basic programming knowledge a text pad such as TextEdit will be enough for you, then you have software like Dreamweaver that allows you to do stuff without knowing code. But I promised to keep it simple so we want this done for us, don’t we?

Good thing there are web-based tools for this, the one I like is Image-Maps. See how on the next image it gives you the option to work with an image on your computer or from a URL, since we are already hosting our image on our server and we also have the URL, go with the second option and click on the “Start Mapping Your Image” button.

This is what you’ll get. Click to continue…

Create An Image Map

Using the rectangle tool, select the area where you want to insert the link and add the URL where you want it to point. Repeat this action with as many links you want on your image.

Create An Image Map

Once you are done adding your links to the image, click on “Get Code”, you will get a few options. On the top navigation, select the CSS Code and copy it. We’re taking this puppy out of here for one last step before we head to Facebook.

Image Map CSS Code

5. Clean your code

There are a couple of lines of code here that we need to delete. Paste your piece of code into any text editor to get rid of them. They look like this:

a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;}

This line of code will create a dotted black line around our links (not pretty). For each link on your image you will find a line like this, just remove it. Now we are ready to go to Facebook.

6. Install the FBML Facebook Application

We need to install the FBML Application that will allow us to insert that piece of code. This is easy stuff.

Let’s go to your Facebook Page now. Click on the “Edit Page” right below your profile picture (you need to be logged in for this). This will take you to another page, on the left menu click on “Applications” and look for the FBML App to add it to your page.

Install the FBML Application

7. Bring your code in

Now that we have installed the application, open it by clicking on “Go To Application” and you will get an empty vase that looks like this. Give your application a name, it would usually be something like “Welcome” (this is going to the tab at the top of your page) and paste your chunk of code. We’re almost there!

Facebook FBML Application - Insert Code

8. Arrange your Tabs

Head back to your page and arrange your tabs so the new “Welcome” tab show on top. This is just drag-and-drop.

Facebook Page Tabs

9. We have a Landing Page!

Pray a couple of minutes and hit on the tab to see if your landing page is there. Uff… Luckily mine is, look at that beauty!

TheNakedElephant Facebook Landing Page by SocialMouths

10. Set as Default Landing Tab

Almost forgot. In order to show the landing page to visitors that have not yet “Liked” you, it needs to be set as the default landing tab so, go back to your admin and fix it under “Permissions”.

Facebook Permissions

Track The Results

I will be a good idea to see how your “Liking” performance has been to this point. I suggest you take a look at your Facebook Insights and remember the this date so you can measure the landing page impact. It is not guaranteed that you will immediately start getting loads of “Likes”, remember that this is a testing game and your work might need some tweaking to perform better. Keep testing.

Final Word

Yes, I’m tired after 1,870 words and 16 screenshots… but before you (and me…) go, I wanna leave you with this thought, as I mentioned before, there are many things you can do with your Facebook page but the first step is to get that precious “Like”. Once you got that taken care of, deliver tons of awesome value!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s