Add a “Share on Facebook” button to your marketing e-mails

Jack Graham — Thu, 08 Oct 2009 15:40:25 +0000

Update: The tutorial below worked like a dream in 2009, but your mileage may vary now. I’m no longer in a role where I’m directly supporting Facebook for my company, so you may want to look elsewhere, as I’m no longer updating this information.

Cheetahmail demonstrated some of their new social media integration features during September’s Relevance Tour stop in Boston. I didn’t feel like waiting for them to roll out the functionality on our account, so I took apart an Urban Outfitters e-mail to see how it was done. (Their e-mail campaigns are great, by the way). The result is this quick how-to.

First of all, let’s look at the results. I now have an e-mail offer with a “Share on Facebook” button. When a user clicks the button, they’re taken to Facebook’s Post to Profile page:

The user can make their own comment and edit the link text as they wish. Once they click Share, a link to a hosted version of the e-mail, complete with thumbnail, shows up on their wall.

More importantly, it shows up in their friends’ feeds. Prior to implementing the Share button, I had a button that sent users to our Facebook fan page. The Share button is a much more powerful way for e-mail marketers to use Facebook, as it drives traffic to your own hosted e-mail offer, rather than to Facebook itself.

On to the How-to, then…

Create a hosted version of the e-mail.
Normally, I wouldn’t have to do this. I use Cheetahmail, which automatically creates hosted versions of my e-mails for me. In this case, though, I ‘m going to need to alter the code of the hosted version in step 3, so I’ll host the HTML on my own site.
Some bulk e-mail services host images for you and convert the src attributes in your tags to point to those hosted images. In this case, I recommend using this converted source to make your hosted e-mail, as hits to the images hosted by your e-mail provider are usually used in reporting. This also avoids potentially skewing the analytics on your own web site.
Create a thumbnail for the Facebook wall.
The thumbnail should be 150 pixels wide. It can be either a thumbnail of the e-mail itself, or a smaller treatment using elements picked up from the e-mail. You can skip including a thumbnail, but wall posts with no images lose a lot of impact. In my example, I’m using a thumbnail of the cover for an electronic catalog we’re plugging in the e-mail.
Add meta information used by Facebook to the of the hosted e-mail.
When you submit a URL to Facebook’s Share function, it parses the document and picks up some info from the of the HTML. It uses what it finds as the default text shown on the share screen, enabling you to control what appears there. Facebook looks for a few tags to fill in the copy and a tag for the thumbnail image. Take another look at th Post to Profile screen shot above. The code that produced that default text looks like this:
URL encode the URL of the hosted e-mail.
Eric Meyer’s URL Decoder/Encoder is a fast way to do this.
Append the encoded URL to the Facebook share URL as a query string.
Your final URL will look something like this:
http://www.facebook.com/share.php?u=http%3A%2F%2Fyour.hosted.emailserver.com%2Fhostedemail%2FEP283_hosted.html
Create a Share on Facebook button.
How this button looks and where it’s positioned in the e-mail will vary a lot depending upon how you do your creative. Generally, though, I think putting it in the center column of the e-mail together with any other social media links you want to include works best. My organization normally puts it in the sidebar, but our creative is atypical of how most companies do marketing e-mails.
Link this button to your Facebook share URL.
Voilà! You now have a Facebook share button in your e-mail offer.
There is one thing to be cautious of on this step, however: some bulk e-mail services might undo the URL encoding you applied to your query string in steps 4 & 5. Cheetahmail definitely does; I haven’t tested it on other e-mail providers yet. Be aware of this issue, as it can lead to broken links. Most bulk e-mailers give you the option to edit the links after they create redirects, so you should be able to fix this manually.

Happy sharing!

Ex Machina » email

Add a “Share on Facebook” button to your marketing e-mails