Social Media Guide: Custom Facebook Landing Pages (that you can do yourself)

After writing extensively on why a landing page is important to your Facebook fans, I was asked to actually show how it’s done. So in this post, I’m going to give a step-by-step guide to creating your own custom Page Tab which will be your landing page. By using this method, you’ll have total control over the entire look and feel. This isn’t extremely difficult, but if you don’t wish to do it yourself, you can always pay someone for it.

Here’s what you are going to need in order to create the landing page:

  1. Administrative rights to your Facebook page.
    • You are going to need to be able to install the tab onto your page and make edits, so make sure you have access.
  2. A place to upload your landing page html file and images.
    1. You are going to be creating some images and an html file, which needs to be hosted somewhere. Ideally you would put it in your own domain so that you have full control.
  3. Image editing capability
    • Photoshop would be preferred but you can also use free online tools like Picnik.

Let’s Get Started

So let’s first create our new tab. You’ll need to go to the Facebook Developers website. Make sure you are logged into your Facebook account.

Click on “Apps” in the top right corner. This will bring you to your own development screen. If this is your first time here, then you will not see any apps at all. Click “Create New App”, and you’ll see this:

Under App Display Name, you can see that I’ve filled in YourPage Landing Page. You can use whatever you want in this space, as it is only a name for you to remember what the app is. This will not be the name of the tab. Under App Namespace you can put something similar, as long as it is at least seven characters. Click Continue.

After filling out a CAPTCHA check, you’ll see something similar to the following screen.

I’ve blacked out sensitive areas that are specific to my own site, but you can see the areas that you would need to fill out. Your email address needs to be input, and the category can stay as “Other”. Below Cloud Services, you’ll want to select both “App on Facebook” and “Page Tab”. Both Canvas URL and Page Tab URL should both point to the place where you will host your landing page on your own website. I would recommend creating a separate directory like /facebook/ to host your page.

You can also edit both of the icons for your page tab. Both the images to the left of “App ID” and “App Secret” can be clicked on and you can upload your own image. The large icon needs to be 75×75 and the small needs to be 16×16 pixels, respectively.

So now that we’ve edited the page tab and where it points to, we can click Save Changes. Next, you’ll need to create the landing page itself.

Creating the Landing Page

You’ll need to know some very basic html and image editing in order to make this. I’ll try and keep it simple for the beginners. Here goes..

We’re going to recreate a landing page similar to my own landing page for the CollegeVeteran.com Facebook page.

It looks complicated, but here’s a little secret: it isn’t. The elements are very simple. It’s made up of two images, a simple mailing list form through MailChimp, and some simple code at the bottom linking in to Facebook’s Open Graph. Let’s start with making some images.

You have limited screen real estate on Facebook pages. The maximum width of your page tabe is 520 pixels. For my images, I went a little bit smaller. For the top one, go ahead and create a new image in Photoshop that’s 505x290pixels.

Now that my new image is created, I need a good background image. Your business would dictate what kind of background you use. Since I was advertising to the military and veteran community, I used stock photos from the DoD. You may be able to use a landscape. It doesn’t matter. For this tutorial, I’ll just use a picture of earth.

I don’t want the focus to be on the background, but instead on text in front of it. Bring the transparency to 50% (or whatever you prefer).

Now you can put the text you want over the image. I would recommend something that catches your prospects’ attention. A good slogan or humorous saying work wonders. A small amount of stroke and drop shadow and it pops out.

If you want to give it a rounded effect, take your marquee tool and make a rectangle fairly close around the edges over your “Earth background” layer, like this:

Now click on Select > Modify > Smooth, and type in 5 pixels (or 10 if you want it more rounded).

Now go back to the Select menu and click “Inverse”. Photoshop will now select the outer part of the background. Hit your delete key. It should now look like this:

Looks good! Now you’re done with the top image. Save it as top.jpg and create a new image-this time 505×368. For the bottom image, you can simply repeat the same steps you used above. Here’s what I came up with:

So now you can save it as bottom.jpg. You’re almost done. Now just some quick HTML editing. Open up your text editor, and here’s the code you’ll need to plug in:

<html>

<head>

</head>

<img src=”top.jpg”><br>

<a href=”http://www.marsinc.com&#8221; target=”_new”><img src=”bottom.jpg”></a><br>

If you want to show who is already “Liking” your page, you’ll have to generate that code at the Facebook Developers page.

Just plug in your Page URL, set the number of rows to 2, and the width to 505, and then click “Get Code”.

Now you just need to take both of those pieces of code and plug them back into your html file. The top box needs to be copied and pasted in between your <head> tags, and the bottom part should be put below your bottom.jpg image.

Save the file as index.html and upload it, along with top.jpg and bottom.jpg, to the /facebook/ directory that you created earlier.

Getting Your Landing Tab Onto Your Page

Ok, still with me? We’re almost done. In order to add the landing tab to your page, you’ll need to navigate to the following URL:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

The values of “YOUR_APP_ID” and “YOUR_URL” come directly from your App settings page. Here’s what you should see:

Just select your page and click “Add Page Tab”.

Activating the Tab

We’re almost done, but your fans are still not seeing your landing tab right off the bat. They are still ending up on your wall. We’ll change that right now. Just go to your Facebook fan page, and click “Edit Page” in the top right corner.

Click on “Manage Permissions” and then find the value for “Default Landing Tab”. Change this to the name of the Page Tab that you just created. Hit Save and you’re done.

Not Getting It?

Did you miss a step, or just get totally lost? I’m sorry if I confused you. I hope that this tutorial helped you out, but if you can’t figure it out, you can always contact me and I can set this stuff up for you (for a modest fee). Good luck, and happy Facebooking!

Advertisements

Leave a comment

Filed under Social Media

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s