Prospering businesses via the power of the internet.
Call Us Today at 613-794-1177.

How to make a Landing Page for Facebook – Part 1

If you’re tracking with us while we create and market our Facebook business page, we’ve already created our Facebook Page.  The next step is to create a landing page.

What is a Facebook Landing Page?

When people who aren’t fans of your page come to your Facebook page, you really want them to get a good impression.  Usually, people who are already your fans will land on your wall.  But, the landing page is sort of like the cover of a book.  You want it to be compelling and you want to convince people to either become your fan, or to visit your website.

Create a landing page using an image.

The simplest way to create a Facebook landing page is to create an image that is 500px wide and then follow the directions below to get it to display as your landing page.  (Note, other websites have suggested 520 px as a good width, but we have found that a 520px image causes a scrollbar to appear.) In another article we’ll discuss a more technical way to create a landing page that is more interactive.  But, in most cases we can get a great looking landing page using the technique we’ll describe below.

Note: To create a custom Facebook landing page you will need somewhere to store your image.  While it’s best to store it on your own server, you can use a photo sharing service like PhotoBucket.  We’ll describe more later!

Step 1:  Install Static iFrame HTML tab

It sounds complicated, but it’s really not.  What we’re going to do is install an application that allows us to create custom content for users to see.

The first thing you need to do is to make sure you are logged in to Facebook and then go to this page:

http://www.facebook.com/apps/application.php?id=190322544333196

Next, find and click on Add to my page near the bottom left of your screen:

Add static html to facebook

Once you click this, you’ll get a list of your pages.  Simply click on the one that you want to work with.

Step 2: Create an Image

Use Photoshop or Gimp (which is an awesome, free version of Photoshop) to create an image that is 500px wide.  The image height can be whatever you want.  Here is an image that our designers made using Gimp:

facebook landing image

Step 3: Store your image somewhere

If you have access to your website’s server, it’s best to store the image there.  If you can’t do this or don’t know how then you can store the image at a photo sharing place such as Photobucket.  In either case, you’ll need to know the url of the place where the image is stored.  In our case, the image is stored at http://www.hiswebmarketing.com/wp-content/uploads/2011/10/hisfacebooklanding.png.  If you use Photobucket, once you upload the photo, they will give you a url which you can use just like ours.

Step 4: Add this image to your new Welcome tab

Go to your Facebook page.  Now that you have added the HTML Static iFrame tab you’ll see a tab that says, Welcome in your left column:

Facebook Static Html Welcome tab

Click on this and you’ll see a box in which we need to put some code.  For now we’ll ignore the second box which says, Optional – Fan Only Content and we’ll create a link to our image in the first box.  To do so, place this code in the box:

<img src=”http://www.hiswebmarketing.com/wp-content/uploads/2011/10/hisfacebooklanding.png” width=500px />

Simply replace the part in bold with the url that points to your image.

Step 5: Make this the Landing Page

OK, we’re almost done!  The next step is to click on the words, Edit Info which appear under your Facebook Page’s name at the top of the screen:

edit info

Then, click on Manage Permissions in the left column:

manage permissions

About 1/3 of the way down the page you’ll see this:

Facebook default landing page

It’s set to Wall but change to it Welcome as we have done above.  Click on Save Changes at the bottom of the page.

Done!

Now you’ve got a custom landing page for your Facebook Page.

Here is how our page looks.  (You can click it to enlarge):

facebook example landing page

Stay with us as we discuss more ways we can spruce up the landing page such as adding a teaser to encourage people to join and making things on your image linkable.

Comments?

We love comments!  Did anything in this tutorial not make sense?  If you have anything to add, leave us a comment below.