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

Facebook LikeUpdate: As you know Facebook no longer supports FBML for its tabs, which is what this post was based on, but there is an updated post about How to build a Facebook Landing Page with iFrames – Don’t miss it!

Building a Facebook Landing Page is easier than you think, even if you are not a programmer.

This week we’ll look at a topic that might seem basic for some. For other people, specially new visitors, this might feel like “been there done that”. Yes, there are too many blog posts out there that have discussed the topic but I’ll promise you this: In the usual SocialMouths style, we’ll go over the why, the what and the hows of building a landing page for your Facebook Page. Why is it important? What do we need to consider? and…

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.

image-maps.com

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!

Let Me Hand It To You…

As usual, you’re invited to share your thoughts, share your secret formula or simply ask questions. Seriously, use the comments to ask whatever you want.

I hope you liked this post. If you did, as a token of appreciation (to me…) consider visiting the SocialMouths Facebook Page, check out the landing page and… LIKE IT!

Ciao!

Credits: Thanks to the guinea pig on the images, my wife Andrea, that lets me run all kinds of experiments on her personal brand =)

Related Posts Plugin for WordPress, Blogger...

10 Mistakes People Make on Facebook Pages and How to Fix Them

Join 10,000+ subscribers and get FREE access to my online course...

  • https://www.facebook.com/transsportmx Abeval

    Thanks, it works excellent!

  • Zombiebutcher

    it worrrrrked! I finally invented something that worked! – Doc Brown

  • Anonymous

    Thanks Francisco, this is what I was desperately looking for. ;-)

  • http://stephaniebetesh.com Wedding Videography San Diego

    FBML is a suitable option i guess ..images can be edited on any freeware utility 

  • http://twitter.com/toddlertricks Toddler Tricks

    This was fantastic!

  • Joey

    Hmmm! I can’t get this right. Seems it does not work in South Africa. Sigh

  • Pharrison05

    Thank you for the post, it was extremely helpful. Here is the finished product http://www.facebook.com/BullyMaxSupplements

  • Anonymous

    i did all, except step 10. mine doesnt have “default landing tab” ?

  • bryancale24

    thanks a lot for this tut !! more power to the admin :>

  • http://www.1financialadvisor.com/ World Financial Group Company

    This is really interesting.I would ldefinately  try this .Thank you so much for sharing, I have been looking for ages to find a blog like this!

  • Anonymous

    Perfect! These articles written too great,they rich contents and data accurately.they are help to me.I expect to see your new share

    laser toner
    Accounting Firms Waukesha

  • http://www.facebook.com/people/Dave-Dittmar/100003274638778 Dave Dittmar

    You guys are amazing! Thank you for all that you do.

  • Anonymous

    Superb article mate but how do get your rss feed? Please sending us an e-mail with instructions? Ta

  • Anonymous

    I wish I’d discovered this site before I started my business. I would have avoided a lot of mistaks.

  • Amy Wing

    This was awesomely helpful.  Thanks for taking the time!!

  • SchPN

    Hi. Nice tutorial…

    But does anyone maybe know, how to change welcome icon? Thanks

  • Iemke Becker

    Hmmm i got this message:

  • http://www.younglivingoillady.com Carrie Raab

    Wow! That’s a mouth ful! Thanks for the tutorial. It will be a miracle if I can figure this one out..haha! I will try! :)

  • Vestorach

    Thank you very much for your post. I tried hard and I success but I found a little problem: Facebook doesn’t not accept any more Static FBML App and now we should use iframes. Is it more complicated to do with iframes than with FBML App?

  • SocialGoodGuy

    Thanks for this! Helped the nonprofit organization I work for get our landing page rocking! You’ve done more good than you’ll ever know! All the best.

  • Darlp

    I can’t find FBML. I’ve read somewhere taht FbB is not supporting FBML anymore. Any suggestion?

  • http://www.stonetouch.net/ stonetouch

    Thanks so much! I used your instructions to create my Facebook landing page! (
    http://www.facebook.com/stonetouch)

  • S-d-m

    Here’s a pathetic question. I have a fan page. I have a personal profile, as well.  Neither gives me the option to ‘like’ someon else’s fan page. I type a name in the search bar but I don’t get a ‘like’ choice.  Help!

  • http://www.icanadaimmigration.com/ Tosha Leone

    Why is it important? What do we need to consider? and…

  • http://www.home-security-plus.com/security-camera-systems.html Shante Seward

     content and email marketing to generate traffic and convert to leads and sales. 

  • http://www.localsfagents.com/CA/Long-Beach/auto-insurance Long Beach CA insurance agency

    The landing page is usually setup as the “Welcome” tab for people that has not “Liked” the page.

  • http://www.bellerivedental.com/ bellerivedental

    We are going to keep it simple so we won’t be adding any email signup boxes or embedding video players.

  • http://attuverse.devhub.com/blog/860552-ultimate-entertainment-with-att-uverse/ Sharon Thomas

    Wah, this article has made me a programmer. Landing page is important because it is the “Welcome” page. As the saying goes, first impression is the best impression, the landing page must be maintained well. I have not tracked the results so far. But I am going to do it from now on.

  • Shane

    Hi Francisco,
    Have you got any resources that will step me through this I want to build an iframe that is a webform. 

  • Deandra Valerio

    I will land on the Welcome tab every time until the day I click on the freakin’ button.

    http://www.apbsinc.net/human-resource-services/

  • http://peter.reginald.mobi Peter Reginald

    Christina, I’m curious: I just checked out your fb page and it looks like you’ve removed the landing page. Why?

  • Angela

    Hi—

    This is my second visit here! I love this site, thanks for the information :-)

  • Tricia Koh

    Great tips, thank you.

  • http://www.facebook.com/katalin.huppannedeak Katalin Huppánné Deák

    Hola Fransisco! Tienes algo en espanol ? Mi ingles es tan malo!!

  • http://www.facebook.com/muhammad.alwaeli Muhammad Al-Waeli

    Either you are awesome..or awesome. Thanks for this great tutorials.

  • Suzettes

    It’s a great tutorial. Thanks, I really enjoyed the help.
    http://holidaybookings.co

  • SocialMediaQueen