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

Facebook Like Update: 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?

  • http://pensndpaper.wordpress.com pensndpaper

    Wow thanks for this tutorial, this is very informative and easy to follow! thanks!

  • Mleslie

    This has been very useful but I am concerned why the landing page image only displays on certain computers. I have 5 computers in my office an only 3 of them display the landing image, the remaining two are blank…could you shead some light on this please Francisco?

  • Marlar6

    I’m trying to follow this, but it’s not working for me. I get the image up at my landing page, but the image mapping isn’t working, only the text links on the bottom. It says to change the Base URL, but what do you change that to? Maybe that’s the step I’m missing?

  • http://www.topsarge.com Dan Elder

    This was great information, but after March 11, 2011, FBML is no more. I cover it all here: http://www.topsarge.com/blog/archives/216, check it out for a better understanding of what next.

  • Denisehorrocks

    I have the new layout, and my default is not showing under manage permissions either

  • http://twitter.com/wineauxx M Vermeulen

    Thanks so much for this step-by-step guide! It was super easy to implement. I used it on one of our wine brands, Savanha (http://www.facebook.com/savanhawines?sk=app_4949752878) and will be using it again to keep the content updated!

  • http://textandpixelreflections.com/ denarosko

    Likewise, the default won’t load… default. Also I’m curious how the linking works w/FB when you switch default landing pages. Thanks.

  • http://textandpixelreflections.com/ denarosko

    Thank you Francisco. Edit–>Manage–>Welcome!–>Save: I did so, but the landing page won’t load. Please advise. Thanks.

  • http://www.troutmanphoto.com Clare

    Recent convert – but I have a (stupid) question. I can make a link to my page, but hoe do I include the “like” link into it? http://www.facebook.com/troutmaphoto
    Thanks!

  • Minkcards

    This was the most helpful instruction. Step by step, clear and accurate. I created my very own landing page in less than 5 minutes! Thank you for your expertise and assistance.

  • Minkcards

    Hi Francisco,

    Sorry to bother you…I was elated when I found instructions and it all went so smoothly. But now I’m having problems..and I’m clueless as to what might be wrong. When I’m logged in as my Admin on my page, the landing page image displays perfectly and I can toggle between the tabs. However, when I go to view my page as someone else would – there is no image on my Welcome/FBML tab – only the link to the image map. What could be wrong? I don’t have a website yet, so I’m hosting through Photobucket as recommended. Could that be the issue? Although weird that it shows fine when I’m the admin. Can a site like Smugmug host?

    Thanks for any guidance.

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

    You need to read this post from last week: http://socialmouths.com/blog/2011/03/16/how-to-build-a-facebook-landing-page-with-iframes/

    You can’t build anything else with FBML as of March 11.

  • http://www.greenblayza.com LLoyd

    I know this is a bit old, but I just came across it as I’m setting up my blog right now. If you do a little more editing and add….target=”_blank”….after your…href=”your.reference.website”…..you can have the page your referencing open in another tab instead of the little Facebook window. Hope this isn’t too late to help anyone!

    You can check out my Welcome page here:
    http://www.facebook.com/pages/Greenblayza/161898980533465?sk=app_161969690526795

    Cheers!
    LLoyd

  • http://www.sodesigns.com daniel moss

    somehow the image map from dreamweaver wasn’t clickable, but this worked great. https://www.facebook.com/cuyogaclub

  • Anonymous

    wow cool post. Now let me create a welcome FB page:)

  • http://www.briantomlinson.net/ Brian Tomlinson

    Great post as usual Francisco. Any difference now that iFrames are back in the mix?

  • http://www.mynotetakingnerd.com/blog Lewis LaLanne aka Nerd #2

    This is a bad ass resource for the person wearing all the hats in their itty bidniz and has no money to hire this out or for the person who’s got an eye for this stuff and needs this little nudge to help them venture into a new green pasture.

    I am sooo lucky that someone else on my team is the one who takes care of all the tech stuff like this because I’m lazy like that! :) But I can totally see how this post is making and will make a huge impact for your audience!

    What I’m doing with it is using it to create a procedure in our operations manual so that if worst comes to worst and my tech guy is out, I’ll have this to lean on and for anyone we outsource this work to in the future. Thank you for providing this excellent resource Francisco!

  • Betsy

    This was most helpful! Thank you. I have a problem that perhaps you will know the solution… i have new Business Facebook page and when I try to “Like” another site, I receive a message “OOPS, something went wrong. We are working on getting it fixed as soon as we can.” I am using IE8. It works fine on Firefox and other pc’s with IE8. Sounds like a IE setting but I can’t seem to find what is interfering. I also added Facebook to my trusted sites. Any ideas about what could be causing this? Thanks for your help!

  • Amanda

    Hi there, i’m almost finished doing this and FB seems to have taken away the add app button on the ‘static FBML’ app. ugh! Is that the only one you use? is there another one. a little help please! I’m trying to surprise a fellow admin with a really nice welcome page i made for her.

  • http://twitter.com/RatedLEX Lex Black

    These directions were PERFECT !!

  • Shilpa Waidya

    This way of adding a welcome page may not be much help now.Static FBML app is discontinued by facebook from March 18, 2011.We will need to learn how to use iFrames instead.

    This was a very helpful article though..Thanks Francisco.Please do post a similar article to help us with using the iframes.

  • http://www.schoolbuy.com.au Luke

    I was recommended to this article by a friend after I commented that I liked his FB landing page (http://www.facebook.com/sketchpadideas).
    Unreal article – the step by step breakdown is excellent. I’m off to make my own landing page now!

    PS – I especially like your reasoning at the beginning of the article of the importance of “Like”, being like a form of permission marketing.

  • Anonymous

    I have been trying to follow these steps and having a lot of problems.

    The main one centres around not being able to make my new welcome page the front page.
    The options you show in your screen shot are no longer available.
    Even finding the FBML app took some trouble – evidently a lot has changed on Facebook since you wrote this (awesome) post.

    Can you confirm that you can now only have the Wall as the main page or is there a way around this?

    Thanks Francisco

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

    You are absolutely right, the post is obsolete. Here is the new way: http://socialmouths.com/blog/2011/03/16/how-to-build-a-facebook-landing-page-with-iframes/

  • http://twitter.com/MayzYap Mazy Yap

     I can’t believe I missed this. Amazing article and most helpful!

    Only question I have is how did you link the “Like” button? Since it’s not a link, I can map it with the image-maps.

    Again, great blog, and wonderful post!

    =].

    Mazy

  • Gio

    How would I embed a youtube video in this page? 

  • http://twitter.com/Anantpal Anantpal SinghSaluja
  • http://www.internetmarketingblog.gr/ @bartzokas

    I grabbed the css code and had the same problem. I think that the problem is in the 2 last lines. Could you take a look?
    dl.image_map {display:block; width:520px; height:900px; background:url(http://internetmarketingblog.gr/wp-content/uploads/2011/05/fbml.jpg); position:relative; margin:2px auto 2px auto;} a.LINK0 {left:20px; top:37px; background:transparent;} a.LINK0 {display:block; width:366px; height:0; padding-top:34px; overflow:hidden; position:absolute;} a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;} a.BLINK {left:518px; top:898px; background:transparent;} a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;} a.BLINK:hover  {background:black; border:1px dashed white; color:white; font-size:9px;} Mapped @ Image Mapper

  • http://twitter.com/rhonda_chapman Rhonda Chapman

    Cheers for this. I always wondered if the pages I saw for some companies cost them a fortune or not. Now I know even I can do it! Thank you.

  • http://www.theicemanrunner.blogspot.com theicemanrunner

    What a very simple yet informative guide you got Francisco!
    I cant wait to try this project.
    I’ll post a link when i finished mine to let you see. :)

    more power! 

  • Allie

    This is awesome thank you so much! I would usually consider myself to be tech-deficient but being able to complete this all on my own made me feel like a pro! 

    My only question is, is there a way for the link that I created from Image Mapping to actually open in a new window altogether rather than within the landing page? I’m linking to a page on a website and it just doesn’t look great within the scroll bars of the landing page. Would rather it opened in a new window. Is this possible?

    Thanks again!!

  • Allie

    Nevermind I figured it out! : )

  • http://twitter.com/anand_seo SEO, SOCIAL MEDIA

    thanks for this help.. i am happy now..- http://computer-internet-technology.blogspot.com

  • http://regjackonline.com Reginald Jackson

    Hey this is great stuff! Thanks for the tips and tools to use for this.

  • Sdf

    Great tut, Thanks!

    However, in step 10 my facebook page does NOT show the option to set my landing page..
    any idea to fix this?

  • http://wfgcanadaonline.com/sample-page/ WFG Canada

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

  • http://twitter.com/StuartJDavidson Stuart Davidson

    What an incredible guide on how to build a Facebook landing page!

    I have tried to follow a few tutorials before and managed to got lost in the jargon with my lack of coding knowledge. After reading this through a few times, I think I will be able to create my landing pages from memory. This article is that good!

    Fine article sir and a great looking blog, good job. I will post a link here to the created FB pages when I finish them if that is OK, just to check out the results. Many thanks!

  • http://twitter.com/StuartJDavidson Stuart Davidson

    I just created my first Facebook landing page following your guide. 

    Every step is very easy to follow, except for step 6 which took me a few minutes to figure out. I had to search for the app then ‘like’ their page to be able to add the Static FBML App and get to the box in step 7. Not a drama, just maybe worth mentioning for us beginners with the Facebook updates.
     
    Definitely the best guide out there on this, check out the landing page I created at http://www.facebook.com/StuartJDavidsonSocialMedia. Thanks again for such a quality and useful article! 10/10

  • Bonniegaillewis

    Hey,  Thank you so much for this.  I am running into a bit of trouble here though.  I followed the steps, the page looks great, but only one of my links that put in works.  Why??  Here is the code:

    Can you please help me?  It’s driving me crazy!  I am using the Static HTML/iFrames tab because Facebook no longer supports FBML

  • Alison

    Yikes! I’m really new to all of this! How do you but the facebook like badge, the RSS badge and the Twitter badge on your #2 Create Image.  I created my image in Picnik?   Your facebook Like bottom is on the #2 Create Image without mentioning how to do it?  Help?

  • Ben Racicot

    Awesome stuff. Any ideas on adding Other buttons to the landing page/image map like the Google+ button or retweet buttons? That would be dope!

  • http://www.fanpagelikes.net buy facebook fans

    wow.. that was amazing.. But it will take sometime for me to understand this properly.

  • Yash

    Hi, 

    How do I get the code for the “Like” link on the page and also on some pages, I have seen that the landing page changes once you like. How Do I do that? 

    Thanks a lot, your pages are really helpful. 

    Best Regards,
    Yash

  • Elizabeth Laney

    The image map creator you use here is not loading/working. Do you have a second favorite free program? Please help.

  • Anonymous

    Nice tutorial. I designed a layout for my landing page a few months ago but unfortunately I have no idea what to say in it. Still figuring out if I really need to add one into my page.

  • http://www.thelimericklane.com Toya | The Limerick Lane

    How did you figure it out? I’m having that same issue.

  • http://www.thelimericklane.com Toya | The Limerick Lane

    This was a great tutorial. The only problem I have is that I tried to link my image from my landing page to my actual webpage and it opens up inside Facebook.  How do I get the link to open up in a new tab?

  • MattiL

    Check your code on the link row (i.e. )

    and add: target=”_blank” 
    in between alt=”” and title=””

    This opens the link in a new window.

  • MattiL

    Check your code on the link row (i.e. )

    and add: target=”_blank” 
    in between alt=”” and title=””

    This opens the link in a new window.

  • http://bulkfacebooklikes.com Buy Facebook Fans

    I like northsocial.com too. It’s very user friendly. Worth trying out for sure.

  • 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