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
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:
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.
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.