Jul 19, 2010

Coding HTML emails for Facebook

Here’s a neat advanced trick you can use to customize the way your email shows up on Facebook. It’ll assign the image of your choosing as Facebook’s thumbnail whenever it’s shared. Once you’ve added images to your campaign as you normally would (through the WYSIWYG editor), double click on the image you’d like Facebook to show as your thumbnail. When the Image Properties dialog box appears, click on the Advanced tab and enter "campaign-icon" (without quotes) in the Id field:

image_properties_dialogue

Then just click OK and you’re all set. The image that you gave the "campaign-icon" ID will become your campaign’s thumbnail on Facebook.

If you’re coding your HTML for Facebook from scratch:

Facebook looks for meta tags with specific properties in order to set the description for your page.  There are three properties that can be set:

  • <meta property="og:image" content="url to image"/>
  • <meta property="og:title" content="title of the page"/>
  • <meta property="og:site_name" content="name of the site"/>

These three tags allow you to tell Facebook, very specifically, how things should appear when shared: "Seamus likes [title] on [site_name]" next to the [image] icon. And in case you’re curious, "og" stands for "opengraph" which is what Facebook calls their API.

advanced_facebook_HTML

So when you’re coding your own HTML, you’ll want to use the following syntax (and add to your template’s <head> element):

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

If there is no "campaign-icon" element specified for a given campaign, Facebook will pick which image to use as a thumbnail.