Ex Machina: Jack Graham's Blog


The Worklife of a Software Business Analyst, Unlicensed Futurist, and Tech Wonk-of-all-Trades

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

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.

facebookCheetahmail 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…

  1. 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 <IMG> 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.
  2. 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.
  3. Add meta information used by Facebook to the <HEAD> 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 <HEAD> 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 <META> tags to fill in the copy and a <LINK> 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:


  4. URL encode the URL of the hosted e-mail.
    Eric Meyer’s URL Decoder/Encoder is a fast way to do this.
  5. Append the encoded URL to the Facebook share URL as a query string.
    Your final URL will look something like this:
  6. 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.
  7. 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!

Category: e-mail marketing, facebook, social networks

Tagged: , , ,

6 Responses

  1. shade says:

    Could you please tell me how to add this ‘Share on Facebook’ button inside a CheetahMail message? How about a Twitter button also?
    My HTML coding knowledge is extremely basic by the way.
    Help would be much appreciated!!

  2. Jack Graham says:

    Sure. The how-to should work as written for Cheetahmail clients, as I was using Cheetahmail when I wrote it. Where did you run into trouble?

    Making a share link for Twitter is more complicated; I might devote a post to it at some point.

  3. A says:

    Just to clarify – do these steps only work for cheetahmail clients or should they work with all e-newsletters? I am working with Site CM: http://www.sitecm.com/default.htm

  4. Jack Graham says:

    It’s based on HTML, so it should work regardless of your vendor. The only thing you should watch out for is that some mass e-mail systems will re-write your HTML. Mostly this is done to replace links with tracking redirects, so with most vendors, you shouldn’t have a problem. Not knowing what kind of post-processing your vendor does on your HTML, I suggest you try it and ask them for help if you run into trouble.

  5. Exactly what I was looking for. The only thing I still would love to do with this is to be able to manipulate the source url to go directly to a page of my choosing. Is that possible?

  6. Jack Graham says:

    Tim, yes, the URL to which it directs could be anything you want. I used a hosted version of an e-mail offer as an example because using Facebook to propagate the e-mail offer itself is of interest to e-mail marketers. But at that point it’s not an e-mail offer anymore; it’s effectively a landing page. Just substitute whatever page you want to send people to for the hosted e-mail URL.

    Two more updates for anyone reading this:

    1. Since I posted this entry, my company has switched from Cheetahmail to another bulk e-mail provider. So to all who’ve asked, yes, you can definitely use it on other e-mail platforms.
    2. If you use Google Analytics, you can also use their URL Builder to add tracking query strings to the URL for the hosted e-mail. Do this prior to URL encoding the hosted e-mail URL in step 4.