Live Twitter feed in an email


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 email is pretty standard. What is worth looking at is the code that makes the Twitter feed possible. @KevinMandeville explained this really well on the mentioned blog post.

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 div tags.

<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 tweets.css

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 / and .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

Want to include live twitter feeds in your email and need help? Get in touch