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...

  • Pingback: 7 Signs Your Blog Is Going Somewhere, and Follow Friday

  • Pingback: cornerstone-works.com |

  • Pingback: Blogging - Learn tips, strategies and techniques from some of the best bloggers | Jimi Jones Dot Com

  • Pingback: Facebook

  • Pingback: 12 Days of Blogging 2010: 7 Facebook Users Updating — BlogWorld Expo Blog

  • Pingback: Best Internet Marketing Posts of 2010 » Techipedia | Tamar Weinberg

  • http://www.webuildyourblog.com Andrew @ Blogging Guide

    This is really a great tutorial with all the explanations. I’ve been looking for a tutorial like this and good thing I found it on your site. I will be checking this out this weekend, i will be learning it and I hope I can apply it as soon as possible. Thanks for sharing.

  • http://www.socialmouths.com Francisco Rosales

    Hey Andrew, let me know how it goes. Have a nice weekend!

  • Anonymous

    Awesome post Francisco, thanks so much for sharing this powerful and easy to follow tutorial on Facebook landing pages. Good, good stuff. The landing page you created for Andrea is class, I love the layout of the photo! Me not being a programmer at all I appreciate greatly that your tutorial needs a minimum of technical skills even I can handle :-). Thanks again! Greetings from Germany, Mirko

  • Amanda

    This post was so helpful! Maybe I missed it, but how did you get the “like button” on your image in the first place? Other than that, this was EXTREMELY helpful! Thank you.

  • http://www.christopherdavidphoto.com Christopher David

    Awesome post! Thank you so much for sharing this information!

  • Claudia
  • http://www.socialmouths.com Francisco Rosales

    Glad to be of help Claudia!

  • http://nationalleadservice.com Christina Costa

    I cannot thank you enough for this post! Got my landing page going, made it from scratch in Photoshop and used the image map tool. Great blog – will definitely be following!!

    Christina
    http://facebook.com/nationalleadservice

  • http://www.socialmouths.com Francisco Rosales

    Christina, I’m so happy it worked for you. I just saw it.

    Thanks for sharing it and I hope to see you here again!

  • http://nationalleadservice.com Christina Costa

    I can tell you what I did to get the like button on the page I just made from scratch! :) http://facebook.com/nationallead … I just took a screen shot of the page then cropped the like button. Played around with the size in Photoshop!

    Christina

  • Jsalas619

    I must be the slopw kid of the group, becuase I just can’t get it to work. I followed the steps to the “T” and all I get is a page that says “Mapped @ Image Mapper” with the Title of the image and the Image map written out. No photo. Any suggestions? Thanks!

  • http://www.socialmouths.com Francisco Rosales

    Where are you hosting your image? Also, I’ve experienced that problem before and had to repeat the process creating the image map.

  • http://www.cayleeg.com Caylee

    I finally DID it!!!! I cannot believe I actually did it…
    Thank you so much for this outstanding article. It was honestly effortless! I will be back here as a regular visitor. http://www.facebook.com/CayleeGPhotography

  • http://twitter.com/Cadalin Corinne

    This is soo great! amazingly easy, thank you :D

  • Martina

    Thanks, this is a really simple and cool explanation. I’ve never created a FB fan page before, and these days I’m about to do it for my business – your article is a great starting point. Like it!

  • http://www.allinknowl.com Mohit Sharma

    well I was totally clueless that making an FB page (with links) is possible for a non-developer! Many thanks! Though I think I have a compatibility issue with IE.. Can you please look into this? http://www.facebook.com/ALLinKnowldotcom

  • http://www.socialmouths.com Francisco Rosales

    Wow Caylee, it looks awesome. Congrats! you get a *Like*

  • janis

    Just used this tutorial for my page and it was SO easy! Thank you.

  • felinefreak

    I am having the same issue as Jsalas619. I am using photobucket for my image. When I test the image at image-maps.com I get the picture, but when I get my code and add it to my FBML nothing shows up except the link to image-maps.com
    Please help!!

  • http://www.HubCam.com John

    I think I did this right …
    http://www.facebook.com/pages/HubCam/318582512445?v=app_4949752878&ref=ts
    Thank you so much!
    I certainly haven’t figured out the “like” feature and that’s a problem, but everything else seems to be working well. Learned a TON!
    Thanks again Man.
    John

  • Zain Zaman87

    Francisco, i cannot thank you enough. Really, the way you dumbed out the steps for us, thank you so much. Am a complete novice on such things. Great job man.

  • Joannefitzpatrick

    Hi I i have tried and failed same as below i get no image only a link to image-maps same as felinefreak below!!my image is been hostedby photobucket!! Is it aything to do that my ‘like page’ is in limbo at the moment?? As my website is not finished so therefore do not want to publish my fb page as of yet??

  • http://www.socialmouths.com Francisco Rosales

    Hello Joanne, the fact that you haven’t mad your page public shouldn’t be an issue, however, it would be a good idea to publish it and see if something happens. You can still make it private again.

    Also, I’m not aware of how reliable Photobucket, do you have the option to host it on your own server? since you mentioned you have a website.

  • http://www.socialmouths.com Francisco Rosales

    Hey Zain, I’m glad you were able to do it, that really makes my day.

    Hope to see you here again!

  • http://www.socialmouths.com Francisco Rosales

    Good job John, I just saw it and it’s looking good. Only thing I’d recommend is to name your tab something like “Welcome” because you left it as “FBML”.

    Thanks for your comment and for sharing your page so we can see your work.

  • http://www.socialmouths.com Francisco Rosales

    Let me ask you this, when you’re ready to grab your code from image-map, are doing it from “HTML Code” or from “CSS Code”? You are supposed to go to “CSS Code”.

    Just a thought, I made that mistake the first time. Please come back and let me know what happens.

  • http://www.socialmouths.com Francisco Rosales

    Congrats! Thanks for dropping me a line. Come back soon.

  • http://www.socialmouths.com Francisco Rosales

    Hey Mohit, it looks good to me. Are you referring to IE6? if so, you shouldn’t worry about it.

    Thanks for the comment!

  • http://www.socialmouths.com Francisco Rosales

    Hey Martina, sorry for the delayed response. I’m glad you find the post useful and please come back to share the outcome of your project, I’d love to know how it went.

    Thanks for stopping by!

  • http://www.allinknowl.com Mohit Sharma

    Hi Francisco,
    No I was referring to IE 7. Though its working fine there now, thanks! :)

  • http://www.socialmouths.com Francisco Rosales

    Glad to see that it worked out, thanks for letting me know.

  • Dawn

    This is THE BEST information I have found on the web. I am a VA (Virtual Assistant) who is moving into creating and managing social media sites for my clients, and I’m learning as I go. You are my new online mentor! ;) You Rock! Thanks ~ Dawn

  • http://www.socialmouths.com Francisco Rosales

    Ha! Thank you so much.

    What exactly do you do as part of your services?

  • Anonymous

    You. Are. The. Man.

    Couple notes: 1 – image-maps.com has cleaned up that FB code – there’s now a “CSS for Facebook” box to click. 2 – image-maps had their Adsense account suspended, so they’re looking for donations.

    Also, with the new iFrame movement, and the new page styles, how does one get the page that newbies see to be something custom? Any thoughts?

    Cheers, man!

  • http://www.socialmouths.com Francisco Rosales

    Thanks for the updates Dave!

    In regards to iFrame, it launches next month and we’ll see what Fb allows us to do with it. I don’t think it’s as bad as everybody makes it sound.

  • Anonymous

    I’m not buying into the doom and gloom. FB can change its terms whenever
    – still a free service — and we should all just roll with it…

  • http://twitter.com/decoding_auri Aurindam Mukherjee

    While considering the “new” Facebook pages, I am having difficulty finding the “default landing page tab” in your 10th point. I have a welcome page ready but I can’t make it a default one. HELP! :(

  • Condeyduque

    me too!!! Im getting mad about that!!!!

    I need to fix that issue to end my work, and I get no information everywhere!
    Please, help!

  • http://www.socialmouths.com Francisco Rosales

    Click on the new “Edit Page” button, which is on the top right corner. Then on the left menu gp to “Manage Permissions” and you will see it there.

  • http://twitter.com/decoding_auri Playing My Tune

    Thank you Sir!

  • Condeyduque

    Gracias Francisco. Pero lo que quiero decir es que NO ESTÁ la opción de elegir la página de inicio.
    En el apartado manage permisions NO ESTÁ la opción “default landing Tab” entre “wall tab shows” y “posting ability”.

    La categoria de mi fan page es “blogs and webs > culture and society”.

    In my personal case. “default landing tab” IS MISSING between “posting ability” and “wall tab shows”…

    WHY? tHANK YOU

  • http://www.zelophotoblog.com ZeloPhotography

    thanks so much for this post. now I’ve got me a beautiful new landing page! http://www.facebook.com/ZeloPhotography

  • http://SocialMediarology.com Jeremy A Williams

    Francisco, this was a fantastic tutorial. I’m definitely going to try this out for some of the pages I manage. One question though. How do I integrate this functionality with iFrames? Since FB is switching to iFrames, will this process still work in my static FBML box?

  • RFC

    Useful post but for some reason the landing page only seems to appear when I sign in to Facebook on the computer that I used to create the page, other computers only show the footer links below the image. Any ideas why this is?