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!

Download v1.5 Of The Template Now!

Simply enter your email address and the download link will be sent directly to your Inbox (we can only send you the download link if you enter a valid email address).

NOTE: We’re currently having issues sending emails to *.icloud.com and *.me.com addresses (or pretty much any MAC-related domain). Please use an alternate email address until we get this figured out.





About the author:

Michael Currey is an experienced web designer, front-end developer and social media manager with 15 years of experience and an education from the Academy of Art University in San Francisco.

21 Responses to “Creating Graphics for Facebook Timeline Events”

  1. Amanda says:

    This… is AWESOME! Thank you so much. The advice alone is a huge help, but the template will come in very handy. Much appreciated for our little nonprofit! :)

  2. Kebo says:

    Thanks for doing the leg-work on that. Made quick work of creating my event graphic

  3. Theo says:

    First off, thank you for these instructions — very useful.

    Question: In the template, do the guides represent the new FB requirements? What is the orange section (the one where you have time & date)?

    Thanks!

  4. Is the template still active? I tried downloading it and never got an emailed link.

  5. Will says:

    Great post, thanks. Never got the template either, not in spam.

    • michael says:

      Not sure what happened there but I just sent you my newest version of the template with slight changes to the guides to reflect Facebook’s current settings.

      • Ad says:

        I’ve been waiting for delivery of the new template too, not in spam, tried a couple of email addresses… please fwd a copy, thanks.

        • Nina says:

          Hi Adam,
          sorry for the inconvenience – could you please try again? I will monitor the backend to identify potential issues.
          Thanks!

  6. michael says:

    For anyone following the comments on this post, there is a new version of the template available. I made some adjustments to the guides to match Facebook’s current settings.
    http://inlinevision.com/blog/creating-graphics-for-facebook-timeline-events/

  7. mihkel says:

    Can you give some advice on image quality?
    I use a 2 color image for the 180×540 image and facebook turns the quality so low that it blurres the image. It seems FB turns jpg quality down to 30%.

    Any ideas how to make this look sharp?

    • michael says:

      Hi Mihkel,

      I do see some degradation of my images when uploading them to Facebook but not to the level you’re experiencing. Can you share a link to one of your events so I can see what’s going on?

      Facebook did start allowing us to upload PNG files for cover photos and profile images a little while ago. I just checked and you can also upload PNG files for events as well. You could try uploading a PNG file and see if that helps.

      Let me know how it goes.

  8. sarah says:

    can’t get the template…have tried multiple times :/

  9. sarah says:

    i did use a real email address, and i’ve received no such email. not in spam/junk folder either, so…idk.

    • Nina says:

      Sarah,
      can you do me a favor and try again? I will monitor the submissions and watch for your email (if you’re using the same one).

  10. Albert says:

    Can get the template either… tried a bunch of times with different email address and it’s not working… and it’s no in the junk folder.

  11. […] a simple banner so why create another template? For the same reasons I created the first template… because Facebook only shows a small portion of the event image on your Facebook page in the […]

  12. Karl says:

    New update to 714x264px. Template please :)

  13. Daniel says:

    Great idea! Works amazingly!

Leave a Comment

1 Trackback

  1. New Event Banner for Facebook Events » FAQs & Blog | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    […] a simple banner so why create another template? For the same reasons I created the first template… because Facebook only shows a small portion of the event image on your Facebook page in the […]