Adding a Facebook Like Button to your email template

So you want to know ‘How to add a ‘Facebook Like Button’ to your email template‘. Ever since MailChimp promised to add the functionality to their system we have seen a buzz with people wondering how they do it. This article is a quick and dirty guide to DIY Facebook Like Buttons embedded in email templates.  So no matter who your ESP is you can embed a Like Button within your email design.

Well to be perfectly honest it really is not that hard, however contrary to what you may have hoped it is not quite seamless and there is no way for it to be. It involves a 2 click process.

The simplest way and the one most likely to work for most users is to use the following code.

  1. <a href="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Email-Expert/130177676994892?ref%3Dts&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80 target=">
    
  2.  
  3. <img title="Facebook Like Button" alt="" src="http://emailexpert.org/dontexist/likebutton.jpg" />
    
  4. </a>

Instructions

1. Change the URL to the page you want ‘liked’

2. Change the img location and upload your likebutton image.

Other Implementations

The Mailchimp implementation is a little different. When you click the ‘Like’ button you are taken to the hosted version of the newsletter and the “Like Box” as above is overlayed as a div. You could also take this route by adding the code to your hosted version of the newsletter.

With a little tweaking of the code you can do one better than the new window that is launched using this method. What is not going to be possible is a single click with you landing on your facebook fanpage or your website homepage. There will need to be two clicks.You can have the like button delivered as overlay on the html version of your newsletter as one example.

What Mailchimp do
As MailChimp said in their recent release:

When a subscriber clicks the “Like” button in an e-mail, the campaign is then posted to their Facebook profile. Those “Like” behaviors are tracked by MailChimp and made accessible in the campaign social stats section.
While somewhat controversial, “Like” buttons have proved to be incredibly popular, especially for content creators and online publishers. Nearly 65 million users reportedly “Like” things daily, and TypePad users have experienced a 50% increase in referral traffic to their blogs from Facebook.

Qudos for MailChimp implementing this so quickly, but with a little tweaking you should all be able to do something similar relatively painlessly while you await your own ESP or software vendor adding similar social sharing to their email newsletters.

Anyone else have idea’s on improving on this basic implementation?

Credit to @iamelliott for inspiring this blog post with his question on LinkedIn

Last updated by at .

Andrew Bonar

The founder of emailexpert.org, Andrew Bonar currently resides not far from Sydney in Australia where he performs his primary role as Postmaster for self-service ESP Campaign Monitor

In the past two years alone Andrew has been responsible for the delivery of in excess of 120 Billion messages. With more than 15 years of industry experience, Andrew is widely recognised as a leader in the field of message sending, deliverability and compliance.

In 1996, he co-founded the UK’s oldest privately held ISP, Cheapnet Ltd. In 1998, launched the UK’s first privately held eCommerce payment systems: eBanx Ltd, and in 2003 he launched two of the very first ESP’s in Europe: MailPhoenix and eMailGenie.

From 2006 Andrew served as an independent consultant at organisations throughout Europe, the Middle East, Asia Pacific and the US. More recently serving as Worldwide Director of Deliverability at Emailvision, managing deliverability operations in 22 Countries. Andrew continues developing and evangelising best practices in permission-based marketing with clients and industry associations and travels extensively in Asia, Europe and North America to fulfil these obligations.

23 Comments

  1. Stephanie said:

    I found you via a comment on Econsultancy and I am so glad I did, this is just what I have been looking for. Thank you!!

  2. albani said:

    how should this code being added, as e-mail signature right?

  3. Doni said:

    Hi,
    does this code works for live mail…

    I’m trying but I don’t know what’s happening, maybe I’m not doing it well…

    help please…

  4. Myrtle Dunman said:

    Good web page! Thank you!

  5. Rana Mcgafferty said:

    Good infomation here, thanks.

  6. Carol Johnson said:

    How long has this blog been around? I have been searching for this kind of information for the past week and a half. Good thing I stumbled upon your blog.

  7. Christiane Fuentas said:

    Fantastic . thank you!

  8. Ezequiel Pinkston said:

    Hmmm…very good, there are a number of elements that I had not considered before.

  9. Pretty Sarah said:

    Thanks- I was wondering! excellant blog post.

  10. Andrew said:

    Thanks Tony I have made some amendments to fix some of those issues, hopefully that will make it easier for everyone. Still need to tidy up those comment tags..

    Jordan glad you found it useful.

  11. Paul said:

    Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

  12. Ricky Brais said:

    Merci pour le contenu intéressant!

  13. Rudy Preston said:

    I really love Facebook. Thinking about giving it a try.

  14. Tony Whittaker said:

    Hi, in FF3 at least, what should be normal double quotes marks copy over as angled ones, and need correcting, and what should be & characters come over as the html for the ampersand.

    Great code though

    best wishes

    Tony

  15. Katie Anderson said:

    This is fantastic function that I am exploring as well. Would that affect the email deliverability?

    • Andrew said:

      Great Question. I have not tested it to any great degree. However, off the top off my head I would hope not for most part, but that said a link to facebook.com might well trigger some corporate filters and some may even strip the link.

      So what to do if you fear this may be the case?
      Well I suggest the idea of linking to a web based version of your email or a big thank-you page which contains the “div overlay” with the like button embedded within that page.

      I will dig out the code for Overlay and write up an example if anyone wants it.

  16. Pingback: Tweets that mention Adding a Facebook Like Button to your email template | email expert : EmailExpert.org -- Topsy.com

Comments are closed.

Top