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):
<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.
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.
I actually just pasted those tags into my content area, not in the header. Worked for me.
OK, I will try. Thanks.
Patrick
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”)
thanks,
johnny
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.
strange.. when i posted above it actually deleted the sample meta property “Title of the page” og:title i tried to paste.
here it is again:
hopefully it shows up this time.
Johnny & Pinchart – This is all very new stuff (at least as it pertains to email marketing). We at MailChimp are still learning as we go. And by “we” I mostly mean “me.”
Also, while developing all our Facebook features, we noticed Facebook *themselves* changing things around. It’s all very, very new.
Some of the suggestions above might only work for custom-coded HTML emails.
I’ve asked some of our nerds to chime in.
Nerd chiming in here (as if my little brain-thing-a-mob picture didn’t give that away)….
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?
Thanks!
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
this is for the new “like” button that you guys have right? I tried putting it in the head but it is not working for me. Do you need all the META tags when using this?
Hi Debi,
For the “Like” button, all you need is our mergetag: *|FACEBOOK:LIKE|*
http://blog.mailchimp.com/track-who-liked-your-campaigns-on-facebook/
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.
Very cool! But…when I attempted to use the “campaign-icon” trick, it didn’t work.
http://editweapon.com/dropbox/campaign-icon-no-worky-20100805-171122.png
Any ideas?
Thanks for the screenshot. Was this via “share” or “like”?
Apologies for my very delayed reply Ben. It was neither “share” nor “like”. While sending a regular-ol-campaign, I checked the box to post the campaign to Facebook.
It has worked correctly from both the Share and Like buttons though.
want to share email but default url is http://us1.admin.mailchimp.com/campaigns/wizard/html-template/preview?id=1841369
have tried to enter into source of body but to no avail.
also cannot edit header to enter this code as suggested by Eric – i’m using MC template – does that mean i cannot edit it
not sure where i’m going wrong – any pointers would be most appreciated – thanks
Thanks for posting this and supplying the source code for the meta tags, very helpful!
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!’
Thanks MC land!
Can you insert this tag into the actual image tag for the image you want to show up in FB? If I was coding this dynamically then would it update?
When i used the meta tags to customize the thumbnail, it didn’t work because meta and header tags are removed from the HTML in emails.
This would be the best option if used on a website, but the following code is better when coding for emails:
You should place this at the beginning of the code.
Tip: Facebook will take a while to update the change of image because of the way it caches.
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
Remove the space before link
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.
Thanks for the article!
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.
Hello,
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…
any ideas?
Thanks!
Dennis
Hi Ben and team,
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.
Thanks for your guys’ help!a