Litmus.com sent a beautifully designed email including live tweets. The best part was they explained how they did this in detail on their blog
I tried to reproduce following Litmus’ post (with lots of help from @KevinThompson) and was able to build an email that also included all tweets using the hashtag #emailgeeks updating the tweets displayed in the email in realtime. This was a quick attempt at testing how this works, but didn’t include a fallback image of the Twitter feed for non-webkit clients.
View mailerbob’s email including a live Twitter feed: http://mailerbob.com/live-tweets/email.html
The HTML of the email includes a reference to a CSS file.
<link href="http://twitterinemail.herokuapp.com/cssfiles/emailgeeks.css" type="text/css" rel="stylesheet" />
This CSS file is regularly updated pulling the latest Tweets using the hashtag #emailgeeks from Twitter through the Twitter API.
Inside of the email HTML the contents of the external CSS file
tweets.css is included by using
<tr> <td align="left" class="mobile" style="font-family: Century Gothic, Arial, sans-serif; font-size:14px; line-height:20px;"> <div class="tweet" id="tweet-1"> <a href="https://twitter.com/search?q=%23emailgeeks%20-rt&src=typd7" target="_blank"> <div class="tweet-wrapper"> <span class="copy"></span> </div> </a> </div> </td> </tr>
This part only references the text of a tweet. We inserted variations of this code to also pull in the avatar, the Twitter handle and the timestamp of the Tweet (as you can see if you look at the source code of the entire email. All this information is included in the css file
The way this is currently built it is not scalable for high volume sending, due to restrictions in place by the Twitter API and also when it comes to serving the .css file. Also it doesn’t produce and host live screenshots of the Twitter feed to use as the fallback image.
Want to try it yourself?
We build a dynamic .css file that you can use to pull down tweets with a #hashtag of your choice.
1.) Use the HTML email hosted at http://mailerbob.com/live-tweets/email.html
2.) Replace the word emailgeeks in between
.css with the hashtag you want to generate a .css file for and include in your email.
<!-- replace this --> <link href="http://twitterinemail.herokuapp.com/cssfiles/emailgeeks.css" type="text/css" rel="stylesheet" /> <!-- with this --> <link href="http://twitterinemail.herokuapp.com/cssfiles/tedc15.css" type="text/css" rel="stylesheet" /> <!-- or whatever you want to use as your hashtag --> <link href="http://twitterinemail.herokuapp.com/cssfiles/myhashtag.css" type="text/css" rel="stylesheet" />
For developers, here is the code that generates the .css file: https://gist.github.com/neudabei/d3f0125ab0b33c58b424
which is an iteration of @KevinThompson’s code: https://gist.github.com/kevinthompson/c3023df8e2c904ad00d9