Facebook-Page-Image-Hacks

Image Hacks for Facebook Pages

[box type="alert"]These image hacks no longer apply since the Facebook Timeline for Pages update[/box]

Branding your Facebook Page has always been somewhat limited, but with last round of updates, we saw a few changes when it comes to using images. With a bit of know-how, you’ll be able to hack your images to create a more engaging Facebook Page for your business or organisation. In this post, we’ll be dealing with the two major image areas that people will see on your Facebook page – your Facebook page’s profile picture and your Facebook page’s photostrip.

Knowing Facebook though, these will probably be out of date soon… ¬†anyway, here we go.

Facebook Page Profile Picture – Dimensions

Facebook Page Profile Picture
Click to see the full sized image

Dimensions: 540 x 180 pixels

Your Facebook Page’s profile picture is the most important image on your Page as it offers a decent amount of real estate for you to customise.

The dimensions changed with the last update (down from 600px x 200px). If your dimensions are higher, Facebook will scale it down. In the image on the left here, I’ve also included the measurements for the part of your Facebook Page’s profile picture that will line up with your Facebook Page’s photostrip… but more on this later.

Other points for designing Facebook Page profile pictures

  • Facebook’s compression is pretty heavy and if you’re thinking of using an image with a lot of fine detail, it’s probably not worth it.
  • Facebook draws a 1px grey (#B3B3B3) border directly on the right of your Page’s profile picture, so if you want any whitespace between your picture and the line, you’ll have to factor it into your design
  • Just because you don’t have a long logo, don’t think you can’t use the rest of the real estate you have available. Add info such as the URL’s of your other social media pages, contact information, or a personal photo for example.

Facebook Page Profile Picture – Thumbnail Optimisation

Facebook Page Thumbnail Picture

If you’re going to all the effort to make a well proportioned profile picture for your Facebook Page, you’ll want to make sure that it translates well into a thumbnail. The thumbnail is what is displayed when you post as your Facebook page. The thumbnail is generated by scaling your Facebook Page’s profile picture and a small square being taken from it.

In a full width profile pic (180px width), I recommend adding a centred 156px x 156px square area that will become your Facebook Page’s thumbnail picture.

Other points for designing Facebook Page thumbnail pictures

  • Aim for something meaningful for your thumbnail such as a logo. Remember, this will be what people see in their news feed.
  • You can change the thumbnail by clicking on the ‘change picture’ link that comes up when you hover over your Facebook Page’s profile picture, and then finding the ‘change thumbnail’ link. This is also available when you upload a new picture for your profile picture.
  • Facebook also has an option to scale your whole picture into the thumbnail. If you have a large image, I’d advise against this as it will make your thumbnail unreadable
[adsense]

Facebook Page Photostrip

Facebook Page Photostrip ThumbnailDimensions: 720 x 720 px (full size image), 97 x 68 pixels (thumbnail)
Ian at Make it in Music deserves a lot of credit for this part

There are two components your Facebook Page’s photostrip – the image and the thumbnail. The photo strip offers a great opportunity to be creative with how you use images on your Facebook Page. Your Facebook Page’s photostrip works very similarly to your personal profile’s photostrip, with a couple of key differences:

  • The photostrip shows images that have been added to your page (in your personal profile, it’s just photos that you’re tagged in)
  • The thumbnails for your Facebook Page’s photostrip are taken from the same place every time (in your personal profile, it’s generated depending on where you have been tagged)
  • The thumbnails are of the latest 5 images added, in random order (in your personal profile, they show chronologically)
Facebook Page Photostrip
Click to see the full sized image

Ian at Make it in Music has put together a great template and explanation of how to maximise your Facebook Page’s images to make the most of your Facebook Page’s photostrip. Basically, if you create a 720 x 720 px image, you can work out where the thumbnail will be generated from.

Other points for designing Facebook Page photostrip images

  • There is 2px of white space between the thumbnails in the photostrip
  • Remember, that the thumbnails in your Facebook Page’s photostrip appear in random order, so they will be different every time your Facebook Page is loaded.
  • You can remove images from the photostrip by hovering your mouse of the image and clicking the ‘x’ that appears. This can be reset in the admin section of your Facebook Page if you make a mistake

Putting it all Together

So there you go, a fairly simple way to hack your Facebook Page’s profile image and photostrip. Be creative and see what you can come up with! Here are a few examples of Facebook pages doing it well (note, these might change):

6 thoughts on “Image Hacks for Facebook Pages”

  1. Okay, I feel Really Goofy, but I cannot figure out how to take a photo that I’ve uploaded to my Business Page and fix it so that it shows up properly in the photo strip…I’ve ready and watched videos but just can’t get it…can someone please explain how to fix a picture that has already been uploaded??? Please :(

    1. Hi Beth,

      How did you want it displayed in the photo strip?

      Unfortunately, if you have already uploaded it to Facebook, you won’t be able to change it. You could download it and then upload it again.

      Feel free to drop a link to your business page so I can check it out for you.

    1. Hi Beth,

      You’ll need to use image editing software that will let you alter the dimensions of your images.I see the photos you’re uploading are fairly small, so you’ll have to do a bit of trial and error to get a nice photostrip thumbnail.¬†

      The other alternative is to just make your images 97×68 which will fit the photostrip automatically.

      You’ll need image editing software to adjust the dimensions of the image. A good free, online tool is Picnik (http://www.picnick.com)

Comments are closed.