Creating Graphics for Facebook Timeline Events » Blog: Social Media, Blog: WebDesign & WebDevelopment, FAQs & Blog - inlineVision: Web Development / E-Commerce / PPC | Las Vegas, NV | High-Performance Websites & E-Commerce Solutions

Creating Graphics for Facebook Timeline Events

May 8th, 2012

UPDATE:: February 21, 2013 – Facebook has rolled out a new layout for events with a totally different size and shape for the graphic. Get the template for the new banner image.
UPDATE: December 26, 2012 – A new version of the template is now available with updated guides. (v1.5)

One of the things I am doing every week is design event flyers for my friend Danny Vegas and promote his events through his Facebook page, group and through his website. Along the way I’ve developed my own way of doing things and it’s time to share what I’ve learned.

For every event I am creating three different images and they (or parts of them) will be shown in eight different places at least! To promote an event on Facebook it takes at least 3 different images as far as i can tell:
– One for the Event page,
– one for the Timeline cover photo and
– a traditional event flyer.
Factor in a custom image for the website (which has its own requirements) and one event could mean creating 4 or maybe even 5 images, all in different sizes and dimensions!

I’m only covering one right now; I’ll talk about flyers in my next post.

Event Profile Image Size – 180 x 540px

shared-eventThis image used in two places; three if you count the newsfeed when you share the event. I never share the event straight from the event page though, since the image is very small and there’s no description (see example). This is why I create flyers for the events and add the URL & a full description of the event to the image itself… but I’ll get to that later.

To use the maximum amount of space Facebook allows, I create a profile image that is 180px wide by 540px high. I’m not sure why exactly, but since the image is so tall, Facebook pulls different parts of the image when displaying it on the Timeline and on the event listing page. See what I mean in the image below.

  • How Images for the event listing are usedA) Events App preview image. The App preview images are 111px wide by 74px tall; so first my image gets resized, and second – Facebook only shows the very top of my image. For this reason I make sure the top of my image includes the logo for the location as well as the time and date.
  • B) Facebook uses a square section of the profile image as a thumbnail preview for each event. This is why I include a larger version of the logo for the venue a second time as well as the logo for the event host.

The rest of the image is wide open to be used for things like sponsor logos, badges or anything else you can fit in there. I found that people don’t really read that much, so it helps if to visualize the information instead. Think Pinterest ;)

Note: Since the introduction of timeline, the area Facebook uses for the thumbnail has changed slightly. Read Nina’s post about what these constant changes mean for your business.

template previewKeeping up with Facebook’s changes could be a full-time job! I’ve modified my template to reflect the changes. If you like, you can download my Photoshop template to create your own event profile images.

I know there are a lot of events on Facebook — have you seen anyone doing things differently or even better? If there are any other ways of doing this I would love to hear about them!

Related Posts

Send this to a friend