We’ve had a couple of enquiries as of late regarding whether it’s possible to set the default title, image or description that appears on a subscriber’s wall when they ‘Like’ an HTML email campaign using our <fblike> links. The good news is that it’s possible with a little code, app hackery, patience and a very understanding group of Facebook friends (it’s called testing, right?).

Note that this technique cannot be used at present in the email template editor. It’s not designed to be used in conjunction with the likeurl="..." attribute either, as you can have multiple instances of likeurl, but can only define one title, description, and image.

In addition, you can’t personalize the title, image or description with custom fields. This is because we share a version of the campaign that lacks subscriber-centric information, to protect your reports and avoid unintentional unsubscribes. Straight up, this is all a bit of a hack, so please bear with us.

What’s not to Like?

If you’ve tried ‘Liking’ one of your email campaigns, you may have noticed a curious thing. Yes, the campaign will be posted to your Facebook profile, but the title will be the subject line of the email campaign, the description will be the first few lines of text (or not display at all) and the image displayed is randomly picked from whatever images are available in your email campaign. For example:

Subject: The Daily Placekitten Express – April, 2011

Default 'Like' dialog

For many folks that’s totally cool, but in other instances, the image chosen by Facebook isn’t entirely appropriate. Lets look at how you can take control of how email campaigns are presented on your subscribers’ Facebook walls when they click the Like button.

Using Facebook’s Open Graph protocol

Now, if you’ve done a bit of playing with Facebook Like links on web projects, you may have come across Facebook’s Open Graph protocol. In essence, its a way of turning web pages into ‘graph objects’ that Facebook can parse. Using Facebook-specific metatags, you can define how a graph object (in this case, an email campaign) looks when it’s shared on Facebook – including the image, title and description that displays on Facebook profiles. So far, our fblike tags use Open Graph to define that the Liked title (og:title) is the subject line by default. We leave the rest to Facebook’s intuition.

Back to our kitten example. Say we want to change the title, image and add a description to the shared campaign post. By adding Open Graph metatags to the head section of our HTML email code like so…


......

… we can do just that. Now, when you Like the email campaign, you should see the following ‘Like this on Facebook’ lightbox dialog:

Updated Facebook Like

Note that Facebook can be a bit fickle on the crawling, so if it doesn’t show up like in the above example on the first attempt (eg. blank dialog), click ‘Like’ anyway and visit your Facebook profile to view the result.

Facebook profile post

During consequent tests, you should be able to see the newly-added title, image and description in the lightbox dialog – don’t forget to Unlike and Like the campaign from your inbox or Facebook profile when testing it multiple times.

But wait, I’ve made a few changes – why isn’t it updating?

We’re not going to let you off the hook without a little bit of actual hacking here, so buckle up. You’ve already sent a test campaign with an Open Graph title, image or description. However, the title you’ve selected is incorrect, so you update it – but the title doesn’t change in the ‘Like this on Facebook’ lightbox, or on any Facebook profile updates you’ve made. What’s gone wrong?

Actually, it’s a combination of two things – us updating the graph object information and Facebook crawling it. Both can be sorted out by changing the subject line of your email campaign from the campaign snapshot in your Campaign Monitor account. No, I’m not kidding you. Simply edit the email subject line, then save your changes. If you want to repeat this process and change the subject line back to whatever it was originally, then that’s okay, too. Now, send another test campaign and re-Like it. If you refresh your Facebook profile, the changes should have propagated.

For web folks who have gotten this far, a useful tool for seeing how Facebook is reading your meta (and consequently getting it to re-crawl pages) is URL Linter. I mention this now because changing the subject line in the campaign snapshot trips off the Linter, telling Facebook to re-crawl for changes to subject line/og:title, plus other Open Graph tags. Thus, why you have to change the subject line when saving amends to your metadata.

Finally, custom domains for social sharing work just fine with this technique. So go ahead – make the most of your metatags and take control of your Facebook shares.

Many thanks to Placekitten for the super-cute cat pics in this example – if you need placeholder images for your designs, it’s purrfect.

  • Jeff Miller

    Awesome, thanks again Ros.

    Quick Tip: if you build your own custom share icon, the dimensions should be 90×90. Facebook doesn’t have documentation on this anywhere, I spent an afternoon testing until I found the correct dimensions that didn’t cause resizing. Also, save the file as a PNG-24, it produces much better results than a JPEG at max quality.

  • hcabbos

    Jeff, you’re referring to og:image should be 90×90?

  • Jeff Miller

    Yep, the OG:image should be 90×90. Other sizes will work, but 90×90 is the only one I’ve found that works without resizing.

  • Ros Hodgekiss

    @Jeff – Bloody good tip here, thank you so much!

  • tony

    Great tip – I will have to try this format with my Facebook fan page.

  • Hamish

    Hi there

    I know its still early days for this technique but does anyone know how it performs in clients like Gmail that strip the head elements out?

    Thanks

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free