Thursday, February 17, 2011

How to Make a Facebook Landing Page for the New Page Layout

2 17 11 facebook landing page

If you haven’t seen them yet, Facebook landing pages are typically seen by first-time visitors to your Facebook page.  You can create a large image that replaces the plain old Wall view on your page.  This image usually presents a call to action - such as liking the page or clicking on a link to your website – and (in my opinion) makes a stronger first impression than a list of comments on a white background.

I used this article by Thomas Sinfield on Standout Blogger to guide me in making the image for the landing page.  I spent a good hour putting it together in Photoshop, then uploaded it to my Facebook page and realized it was the WRONG SIZE.  I completely forgot about the new page layouts on Facebook.  Boo.  So I started over.

The article still has great tips but you’ll definitely need a differently sized image.  I started with a blank file in Photoshop sized at 510 pixels wide by 450 pixels tall (I’m pretty sure you don’t have to use Photoshop – that’s just what I’m comfortable with).  I added on some product pictures, my logo and tagline, and a little “shop now!” graphic.  Thomas points out that the whole image is going to be a link, but people need direction as to where to click so some direction helps.

FB Landing Page Feb 2011 2 copy

You’ll need to save that image somewhere online.  If you haven’t already, you can open up a free Photobucket account and upload your image as a jpeg.  After uploading, click on your image – it should have a few links listed underneath it.  Keep this page open while we get your Facebook page ready – we’ll come back to it in a minute.

Next is the part that’s a little trickier.  I used this article by the same guy for guidance.  The article is on setting up a business Facebook page from start to finish, so you’ll need to scroll down a little to get to the instructions on how to get your landing page up and running. 

2 17 11 facebook landing page adding fbml

First, you’ll want to log in to Facebook and head to your business page so you can install the FBML app.  Click the “edit page” button on the top right, then click on “Apps” on the left side of the screen.  You’re looking for Static FBML – it showed up in the suggested apps section for me.  In the picture above, mine is titled “Welcome!” because I had already installed it when I took this screenshot.  Yours should be called “Static FBML”.  Click on “add”, then click “go to app”.

2 17 11 facebook landing page fbml fields

The title of this page is going to be what shows on the tab on your Facebook page, so type something short in the title field.  I just used “Welcome!”.  Next, you have to add some code in the FBML field.  Now I know virtually nothing about html, so I just copied Thomas’s code from his article.  It includes a link (so when someone clicks on the image it takes them to my Etsy shop) plus the image source link (from Photobucket, more on that next).  Here’s the code I used:

<center><a href="http://bobalookids.etsy.com%22/>
<img src="http://i1142.photobucket.com/albums/n605/bobalookids/FBLandingPageFeb20112copy.jpg%22 />
</a></center>

The first link to Etsy (in quotes) is where you’d swap in your own shop address, blog address, or whatever site you want to send people to when they click on your image.  The second link (also in quotes) is where you’ll want to put the image source, which you can copy and paste from the “direct link” field in Photobucket.  After you’re done pasting in links, click Save Changes.

2 17 11 facebook landing page photobucket

We’re almost done!  Now you’ll have to change your settings in Facebook so the landing page shows up for new visitors.  Go back to your wall and click on “edit page” again.  Next, click “manage permissions” on the left side of the screen.  In the “Default Landing Tab” drop down menu, choose “Welcome!” (or whatever you named your landing page tab).

2 17 11 facebook landing page settings

Go find someone who isn’t already liked your business on Facebook and beg them to help you test it out!  I sent out a Twitter distress call and Tonya from Love of Family and Home helped me out.  Then, I logged in as my husband, unliked bobaloo!, then checked it out for myself.  It works!

I’m by no means an expert, but if you have any questions ask away.  If you’re not a fan of bobaloo! on Facebook already, I’d be forever in your debt if you would head on over there and tell me if the landing page works for you.  If you’ve already liked bobaloo!, we’re totally best friends forever and you can take a peek by clicking on the Welcome tab.

Now go make one for your page, then let me know so I can check it out!  Good luck, and report back on your progress!

5 comments:

  1. Thanks for the tutorial on this, I'm fairly web savvy, but even this was mind boggling, I had to reference your page several times to figure it all out. But I have them up!

    ReplyDelete
  2. I'm glad it helped! I just went to check yours out - they both look
    awesome!

    ReplyDelete
  3. Do you need photoshop to create your message??

    ReplyDelete
  4. I use Photoshop Elements, but I'm sure you can make it any any program.
    Thanks for stopping by!

    ReplyDelete

Thanks for commenting - I love to hear from you!

Related Posts Plugin for WordPress, Blogger...