View RSS Feed

MPC

Create a Kick Ass FaceBook Landing Page

Rate this Entry
by
MPC
on 06-23-2011 at 09:45 PM (10621 Views)
As soon as people hit your page you need to make a good impression. It’s no different than a regular website. So here’s some of the latest tricks I have learned in relation to creating a landing page. Kevin had posted an interesting video for me in the past on this, but that information is now obsolete. Here’s the better way to do it:

Create your fan page. Add the app “Static HTML: iframe tabs”. This will create a new menu called “welcome”. Click on the “welcome” menu while you are logged in your facebook account. You can now create two separate landing pages. One is for what “non fans” will see. The other is for what “fans” will see. The second is optional, but I encourage you to use it as a CTA, and to change the content once in a while. The app accepts standard HTML and CSS code so you can do pretty much anything here.

Here’s an example of my page. Have a look and then I’ll tell you what I did specifically, and share some of the code you would need to duplicate it. Visit TelescopeKing.com | Facebook

You’ll see my page as a non fan. If you’re a fan, my landing page is completely different. You’ll have to “like” the page to see it.

The first thing you’ll notice is that my profile image blends in well with my landing page image. You can even create the illusion that the two are connected by using some graphic design tricks where one element crosses over both images. I didn’t do it here, but here’s an example on my old page: Buy-Telescope.com | Facebook

You will also notice that I added a bunch of call to actions on the non fan landing page. First, I actually included a workable “like” button directly on the landing page as oppose to telling people to “click the like button above” as most people do. I’ll give you the code to recreate this shortly. I also create links directly on the image using image maps. I’ll also show you how that can be done.

Finally, I’ve taken the liberty to help myself to a few links. They provide visitors with a practical way to jump from my Facebook page to specific content on my site. Plus it generates public backlinks directly from the Facebook domain which I assume is good 

Here are some specs in terms of images sizes I used:
Profile image is 180 x 540
Landing page image is 500 x 476
The length can be changed on these, but the width should be the same.

The profile image is uploaded directly to Facebook, but the landing page image has to be hosted on your server.

To the code:
If you want to create an image map like I did, meaning some zones on your image are clickable as links, then make sure your image is hosted on your server and go to Image Map Tool - On-line Image Map Creator - HTML & CSS to create it and get the code. Follow the instructions, and once you generate the code, grab the CSS code (from the tabs above where the code is generated).

That code can be copied directly into your welcome link on your Facebook page. That will setup your basic image with the landing page and image map links activated. Next you want to add the “like” button. Go to Like Button - Facebook Developers to generate the code you’ll need. There’s different options in terms of how you want the button to appear so fill out the form and click get code. What ever this code is, let’s call it “LIKECODE” for now.

Now go back to your welcome page as you will need to add this line:

PHP Code:
#like {height:50px; position: relative; top: -350px; text-align: center; z-index:99; } 
This code uses z-index to specify layers. So my main image is by default on the initial layer, and my like is actually on layer 99 (which is really me second layer since I only have two). The code must be added at the top within the section where the CSS variables are declared (inside the code that was generated by Image Map Tool - On-line Image Map Creator - HTML & CSS).

Now go to the very bottom of your code and add the following at the end:

PHP Code:
<div id="like">
Insert your LIKECODE here
</div
So it should look similar to this:
PHP Code:
<div id="like"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/pages/TelescopeKingcom/193810364004730" send="false" layout="button_count" width="100" show_faces="false"></fb:like> </div> 
You’ll probably need to adjust the positioning of the like button over your image. Look in the code I posted earlier where we declared the #like parameter in CSS as follows:
PHP Code:
#like {height:50px; position: relative; top: -350px; text-align: center; z-index:99; } 
Simply adjust the value of “top”( the -350px) to move the like button up or down.

Finally, if you want to include a navigation menu / hyperlinks of some kind below your landing image like I did, then just stick standard html code at the bottom of the existing code.

Repeat the process for the fan landing page, and put in whatever HTML code suits you. Obviously, you’ll want to remove the like button from that page.

The last step is to set your welcome page as the default landing page. On Facebook while logged in, click on “EDIT PAGE” go in “Manage Permissions” and set the “Default Landing Tab” to “Welcome”.

That’s it. If you found this useful just remember that I like to be “liked”

Enjoy!

Submit "Create a Kick Ass FaceBook Landing Page" to StumbleUpon Submit "Create a Kick Ass FaceBook Landing Page" to Digg Submit "Create a Kick Ass FaceBook Landing Page" to Facebook Submit "Create a Kick Ass FaceBook Landing Page" to Google Submit "Create a Kick Ass FaceBook Landing Page" to del.icio.us

Tags: facebook Add / Edit Tags
Categories
Uncategorized

Comments

  1. ih82lose's Avatar
    Looks good, and good tutorial.

    One thing: You need to make your links "_top" or "_blank",
    they are opening in the iframe.

    I have been getting into facebook pages for the past week or so.
    There is so much to learn, been working through the Docs..

    This is my most liked page so far: PS Vita | Facebook
  2. MPC's Avatar
    Good point on target window. I'll change that now.Thanks!
  3. KevinMcC's Avatar
    Cool, thanks MPC. How have you been doing outside of gaming?
  4. MPC's Avatar
    Doing Alright. I haven't done a whole lot with my projects tbh. Too busy! New child, building a house, plus a huge work project that I have to design and implement across our organization in Atlantic Canada. Let's just say I'm pretty much putting affiliate stuff on the back burner for the summer.
  5. Hazo's Avatar
    That's such a sick landing page Marius.

    I especially like the welcome page once you click like and you have CTAs with your affiliate links!

    Well done and all the best.
  6. redvel's Avatar
    Thank you a ton! Been seeing such pages and trying to google a normal tutorial, and with yours I was done in about an hour!
  7. MPC's Avatar
    Thanks Nick, that means a lot comming from you.

    Glad to help redvel
  8. redvel's Avatar
    Forgot to show off [link taken out now, sorry]
    Updated 09-30-2011 at 09:58 AM by redvel

Trackbacks

Total Trackbacks 0
Trackback URL: