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:

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.

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

Tagged

You tell us to put those tags in the header. But in one of your (excellent) videos, you explained that header should be taken away, what I did, before they would be replaced in Gmail and Yahoo webmail, by their own code.

Adding “campaign-icon” to the advanced section of the image dialog box worked perfectly, but i’m still having difficulty adding the tags to the text of my email.

whenever i paste

*

into the body of the mail chimp Source code, it simply deletes it every time i save.

additionally, although you’ve given us the metatag for the title, image and name of site, what is the metatag code to designate the description text for your facebook posting (the part in the screenshot above with the large red arrow where it says “Sample Copy. Loreum ipsum”)

Mr. Funcheap! Howdy. The meta-description tag was the 1st thing I asked for myself, but our engineers tell me it’s something facebook doesn’t provide yet. People in their dev forums seem to be asking for it a lot though, so it may be coming. As far as getting the meta-tags into your code, are you using our template editor, or pasting in your entire template code? The folks in our support team might be able to help. I’ll point them your way.

First, I should have noted to Amanda that MailChimp will inject the meta tag to set the og:title tag to the subject of the campaign. If you are happy with that as your campaign’s title when it’s liked/shared, then no extra work is necessary. If you want to set any of the tags yourself, go for it and we’ll not override them.

I highly recommend putting the meta tags in the head of your HTML document. It *might* work with them anywhere in the document, but Facebook is much happier with strictly valid HTML. This does mean the meta tags only apply to templates that are being custom coded. Otherwise, rely on the subject of the campaign and designate an image as the campaign-icon.

Lastly, if you are coding custom templates and want to make sure they are valid, check out Facebook’s URL Linter. It will parse your URL and let you know exactly how it will show up when liked, even giving you code to add a like button yourself, it’s super handy: http://developers.facebook.com/tools/lint/

My code validates with the FB lint (shows me the image and all the details fine), but when I try to share a link in FB, the image is not being displayed, just the title and description. The image is a PNG of 50×47, so it is into the “standards”. Any clue?

Nice catch, thanks for pointing that out. Unfortunately, Facebook handles “share” and “like” differently. To specify the image for a “share”, you have to supply a different tag in the head – . URL Linter is setup for like only. We’ll look into all the differences and make the archive pages conform for shares also.
-Eric

Then Facebook will take your campaign, read it, and pick an image from your campaign to display on Facebook. It’ll also take your subject line, and use that as the title of your campaign (when posted and shared on Facebook). If you trust Facebook to just pick an image and title for you, that’s all fine.

But the code on this blog post helps you, as a designer, specify how your campaign shows up on Facebook after the Like button is pressed. The meta tags tell Facebook exactly what to use for the title. The img code tells Facebook exactly which image to use as the thumbnail when the campaign’s shared.

Hi there, great to see that the automated campaign announce via Facebook is working now. Prior to going on vacation only auto-Twitter announces appeared working, so I’m very pleased to see this now.

One question, well two actually (and apologies in advance if they related more to FB).

1. Can we control the text added to our FB wall as I’m not happy with “eepurl.com
‘sitename’ has sent you this email. To ensure you don’t miss future email updates, please add ’email’ to your email address book or safe list.’

2. Can the thumbnail attached to the FB wall post be changed once it’s on FB.

If you goto http://www.facebook.com/rucraft and look at the two campaigns ‘Win a Bumper Selection of Knitting Goodies!’ & ‘Check Out Our Amazing Swarovski Crystals Offer!’

Shaun, I couldn’t see the code you typed in the last post. You said, ‘place this at the beginning of the code . . . remove the space before link.’ I am desperately trying to add FB code to my html email and it won’t work. Can you repost or send me the code directly? thanks so much!
Kristi

Ok, this may seem too obvious for those who are having trouble with getting the meta tags to work, but it was something I had to correct myself. If you are copying and pasting the tags from this article, be sure to retype the quotation marks.

I also put the meta tags in my head section, because the page you are sharing is the version that people see in their browser, so there should be no worry it about it getting stripped out.

I’ve been trying to get the “eepurl.com” url to show my site url but have had no success. Facebook lists og:url as an option and it would make sense that it would be the one I need to change that but it doesn’t seem to work.

Is that something that just isn’t allowed for the newsletters?

Also it seems og:site_name is worthless, it doesn’t show up anywhere in the facebook post.

Right now it seems the only one that will work is og:image. I don’t use og:title so I don’t count it.

So when someone clicks the LIKE button in our campaign, the Image is correct, the Title is correct, but for the description, FB is using our |LIST:DESCRIPTION| info with the opt out information. You can see a screen shot here: http://www.lifesf.com/images/mc_like.jpg

I THOUGHT I had figured out how to specify that, by using: and surrounding the text in my campaign I wanted to use, but it seems like that is not working anymore…

What if the only image used is in the “postcard” area of the MC Template? It does not seem possible to “double-click” and I can’t figure out how to get to that “Advanced” tab to add in the “campaign-icon” ID.

What if there were a couple of custom merge tags.
One for content and one for title. Like *|FB Content|* and *|FB Title|* .
This way you could add it to the template or customize it for each campaign
The id=”campaign-icon” is working OK for me

Hello Salima, If I’m understanding correctly, I believe you’re wanting to choose what image will be used for the thumbnail when it’s posted to your Facebook page. That was handled slightly different at one point, but you can find all the details on how to make that work in the following article and video: http://eepurl.com/QokP