If you are looking to get a custom Facebook landing page, I recommend finding a great designer (that won’t cost you a fortune on oDesk – the freelance marketplace.

Now that post was given a lot of love by my readers so I wanted to show you all how you can drastically improve you Facebook marketing by creating a landing page for your blogs Facebook page (and I have even included the final PSD file- so if you have Photoshop you can easily edit my design to suit your Facebook landing page).

Why You Need A Facebook Landing Page

When you create a Facebook page for your blog first time visitors are greeted by your wall (which is full of your latest comments), which isn’t necessarily a bad thing, but it is not ideal.

The best thing for conversion of fans is a Facebook landing page.

A Facebook landing page is simply just a page that gives new visitors a quick overview of who you are and what you do, and then directs them what to do next.

Here Is The Facebook Landing Page We Will Be Making With This Tutorial

(click to view full size)

As you can see it has a lot of information without being messy. I a couple of seconds new visitors can find out:

• Who I am (Picture makes it personal)
• What I Do (And why they should become a fan)
• Logo (Build your brand from the start)
• Call To Actions (‘LIKE’ the page, or sign up for your email list)

And the best thing is, that if you have Adobe Photoshop, I have included the final PSD at the end of this tutorial so you don’t have to start from scratch (you can just edit the template and upload it to your Facebook page).

Facebook Landing Page Tutorial

Start With A Blank Canvas

I did the measurements and found that the best size for a Facebook landing page image is 770px wide x 450px high. Feel free to mess around with those numbers, but that is what worked for me.

So open a new canvas and start with a white background. (no need for an image for this step!)

Part 1. Creating The ‘LIKE’ Page Call To Action

Select The Rectangle Tool From The Toolbar

Create Thin Rectangle Across The Top Of The Canvas

Add The Facebook ‘Like’ Button

To get the Facebook ‘Like’ button, you can either go to a Facebook page and take a screenshot, then cut it out. Or you can do a Google search to see if you can find one (also, it is included in the PSD at the bottom).

Paste and resize the button to fit inside your rectangle.

Download Hand Drawn Arrows File

The whole point of the like button on the landing page is to encourage visitors to click the real button that is above. A great way to accentuate this point is to include an arrow. I found a great selection of vector arrows created by DragonArtz.net. Download them and open them in Photoshop.

Open the downloaded file in Photoshop and select the one that you like best. Cut it out (it has transparent background) and paste onto you landing page canvas.

Change Colour, Rotate and Flip Arrow Into Place

Now you are probably not going to want the blue colour for the arrow (it definitely conflicts with the dark grey), so go to blending options for the arrows layer and and select colour overlay. Select colour to suit your corporate colours.

Then press Control + T to transform the arrow to be the right size, and face the right way.

Add Text – And Space Around Button

I used the font ‘Aller’ at size 18, but feel free to try out different fonts and wording.

And that finishes off the top bar, let’s get into the rest of the Facebook landing page!

Part 2. Adding Your Branding

This next step is setting up the images that will show people what the page is for (and who is behind it). So we are talking about the logo and picture of you!

Adding Your Logo

Paste your logo onto the canvas and place it in the top left corner under the banner that you just created. Scale to a reasonable size.

Time For People To See You!

If your business or website relies or being personal then I highly recommend that you add a photo of yourself. If you are a bit camera shy, feel free to add a image of your website or your products or services.

1. Paste the image of yourself onto the canvas and resize to fit vertically between the bottom of your logo and bottom of the canvas.

2. Add a Drop Shadow – change settings to suit your preferences.

3. Rotate the image - this makes the image stand out better.

The Facebook landing page is coming together nicely! We will now move onto the main content which will tell people who you are and why they should connect with you.

Part 3. Adding The Content Box

Add Rectangle Shape

Just like the rectangle we added at the start but this time we are creating a much deeper one.

Choose a colour that once again matches your branding (I prefer a very light colour) and position the layer behind your photo.

Add Style To Your New Box

To the rectangle box I then go into ‘Blending Options’ and add a drop shadow (the same as on the photo) and a 1 px stroke. The stroke colour should be a darker version of the box colour.

Add Your Blurb

This is just basic typography, but to give you an idea of what I did, I used the font ‘Antipasto’ at size 18.

You will also notice that I left aligned the text blog, but tabbed the lines out to follow the photo.

Creating A Signature

I love the idea of having a ‘hand written’ signature at the bottom of my blurb as it just gives that additional touch of personalisation. I made the signature colour a dark blue to look like a blue ballpoint pen.

To get the scripted look I used the font ‘Jersey Stories!’ at font size 80.

Rotate The Signature For Effect

Now it is really beginning to look like a landing page, the only thing we have left now is an offer that will convert people to your email list.

Presenting Your Offer

I specifically left right hand side of the Facebook landing page free, so that I would have room to place an offer to help convert people to my email list.

Tell People What To Do

Obviously we want people to sign up to our email list, so let’s tell them to.

I simply used a font called ‘Kozuka Gothic Pr6N’ in bold at 24 point font (but once again select fonts that you like). I did the first layer in the same dark gray as the top banner, and then dupilicated the layer and made the second layer orange and lightly moved it up and to the left to show the dark gray layer as a stroke.

Detail What Is On Offer

Now they know what to do, you need to tell them what they are signing up for. So if you have a free product or service you give to new subscribers then detail that in a few words.

Show The Product

Most people are visually persuaded, and that is why I created a cover design for my ecourse. If you have something similar then paste and scale your image below your offer.

Add A Signup Button

All you need to finish off your Facebook landing page is a button to tell people to sign up for your offer. While the truth is that the whole image will be link to your sign up page, people need to be directed (you can’t expect them to know what you want them to do)

Now I don’t bother creating buttons from scratch because there are so many pre-made one already available online. I personally get my buttons from Button-Download.com – they have a huge selection I like their style.

Select the one that you want on your landing page and click the ‘PSD’ link to download.

Open Button & Edit To Suit

This will come to personal preference, but I changed the text on the button to ‘Get It Now’ because people want the product, they don’t want to sign up.

Once you have done that paste it into your design and you are done!

To learn how to install this image and link it through to your signup page please read my tutorial on ‘How To Create A Facebook Page For You Blog‘.

Download The Template PSD

To see this Facebook landing page in action visit the StandOutBlogger Facebook page (and don’t forget to ‘Like’ it while you are there!)