• GRAB YOUR FREE SALES PAGE CHEAT SHEET!


    This is some smaller text here.

By popular demand : Facebook Page Design 101

I’m currently huddled in an apartment in Lower Manhattan with two amazing girls, hiding out from Hurricane Sandy.

I still can’t believe that I managed to be in New York for my first time during a damn hurricane!

My luck.

I’d really appreciate any love and prayers sent this way for everyone on the East Coast.

Okay – back to our regulary scheduled programming.

 

There was an overwhelming response to the idea of teaching you how to spruce up your Facebook page by customizing the tab images, so I’m just going to knock out the entire page in one post.

  1. Can you say RUN-ON SENTENCE?
  2. Do you think I can cover everything in one post?

We. Shall. See.

 

First, let’s start at the basics for customizing your Facebook page.

 

Make sure your URL shows in the description box

This is extremely easy to do and something that I see a lot of pages not taking advantage of.

Chances are – people are not going to click to view more about your company on Facebook. What they want is an easy hyperlink to your website so they can check everything out there.

facebook description

All you need in this little spot is a short description of your business (a tagline, if you have one) and your URL. You don’t even need to know any fancy html to do this. Just place your URL in the box like so:

www.amandagenther.com

It’s that easy.

*Update (11/5/12)*

Your Facebook page’s business category determines what shows up in your description box.

For example, my page is set up as a Small Business, which allows the URL to show. If you would like to change your category to a Small Business so that your URL shows up, follow these step

  1. From the top of your Page, click Edit Page 
  2. Select Update Info
  3. Select the Page grouping and the appropriate category for your Page (to get Small business: Companies & Organizations –> Small Business)
  4. Click Save Changes
You’re URL should be showing up now!

 

Make sure your cover image is clear

Have you ever noticed that images seem to be extremely pixelated on Facebook?

That happens when you save your images for the web. Instead, you want to save them as a normal JPEG – not for the web.

If you are doing this yourself, and creating the image in Photoshop, start with a 300 dpi document. When you’re ready to save, you hit File > Save As > Choose JPEG from the drop down.

Upload the image to Facebook and it should be much clearer.

If it’s not – do a little troubleshooting:

  • Did you create a brand new document and make sure the resolution was set at 300?
  • Did you choose Save As, instead of Save For Web?
  • Was your image blurry in the first place (if yes, then we’ve got to move on)

Okay, let’s get a little fancy now.

 

We are going to move on to Facebook applications & tab images.

 

My most-used Facebook applications

 

Static HTML: iframe tabs – I use this for mine and my client’s about pages, custom opt-in forms and anything else we can think up.

One of it’s best features, that I don’t currently utilize (shame on me) is the ability to allow ‘Fans’ to see something different than ‘Non-Fans’.

Back when Facebook pages looked a bit different, this was more useful, because you could force ‘Non-Fans’ to land on your About page – which, in turn, led to higher conversion rates in relation to how many people liked your page.

I haven’t figured out the best way to really utilize this functionality yet, but you can be sure that I’ll tell you once I do.

Also, if you ever need to use two of this application for different tabs (which I do all of the time), you’ll need to follow different URLS to install each application.

For example,

For the first Static HTML app on your Facebook page, you can go here.

For the second Static HTML app on your Facebook page, you can go here.

For the third Static HTML app on your Facebook page, you can go here.

And so on.

 

MailChimp – I use this application to display my email opt-in form right on Facebook. Pretty nifty and really easy to set up.

You just head over to your MailChimp dashboard. From the Account drop down, select Integrations. You’ll see Facebook listed as the choice. Just set that up and you’ll be good to go.

If you use Aweber, I recommend installing the Static HTML application from above and pasting in your web form html. Aweber will give this to you by going to Web Forms from your dashboard, selecting the list you want to create a web form for, design your web form and then copy and paste the HTML into your Facebook application.

 

Instagram –  Extremely easy to install. Displays your latest Instagram photos.

 

Pinterest – Just click, install on your page, fill in your information and save. It can show your boards or your pins. Pretty awesome.

 

Creating custom tab images for your applications

Once you have your applications installed, you have the option to customize them. You can change the application name or the image shown on your main page.

Here are the steps:

  1. Right next to the last app on the right will be a little drop down arrow (image is shown below) – click to drop down.
  2. When you hover over an app, you should see a little pencil appear in the top right corner – click it to edit that app.
  3. Click ‘Edit Settings’
  4. From here, you’ll be able to add a Custom Tab Name and change the Custom Tab Image.

NOTE: Custom Tab Images must be 111 px wide X 74 px high. No ifs, ands or buts. 

Confused yet?

Here are the steps – image style:

Facebook Custom Tab Image Tutorial

Your possibilities are endless. Well, not really, but you do have a lot that you can customize.

Don’t forget to head on over to my Facebook page to see what mine looks like. It might give you some new ideas!

  • Nesha- Betty Red Design

    This is such a helpful post Amanda!! You certainly know your stuff.

    • amandagenther

      Thanks! Glad it helped you out :)

  • brittany

    Love this! Thanks so much for sharing!

    • amandagenther

      No problem!

  • you are a rock star! I am sharing you and your wonderful work in the upcoming ‘yoUnlimited’ eblast in the inspiration section!

    • amandagenther

      Thanks for sharing it Carolyne. So glad we got to hang out last week!

  • Amanda! I’m sending you good vibes from the west coast, hoping that you and yours are all doing well in the aftermath of Sandy.
    Thank you so much for sharing such easy to follow instructions, I’ve already put some things into play and you made it all very easy, so THANK YOU!!

    • amandagenther

      Thanks, Kelly! I am home safe in Chicago now, thank God! You are so welcome! I’m glad it helped.

  • This is a great tutorial! One question: what dimensions do you use for your cover image? Facebook doesn’t really have a resize option once you’ve uploaded it and certain parts of my image keep getting cut off. Thanks! Tara

    • amandagenther

      851px wide by 315px high :)

  • Very in-depth and clearly explained post!

  • Thanks, Amanda! This was super helpful. :)

  • Pingback: 3 ways to get online (before your website goes live) | Tomas & JonesTomas & Jones()

  • Pingback: inspired by... amanda genther - A Place for Twiggs | Photography, Design, Travel & FoodA Place for Twiggs | Fotografia de Casamento, Gravidez e Família()

  • Thank you for this tutorial, it was very helpful. This really gives Facebook pages a more “personal” touch. I had no idea you could personalize them :)