{"id":6350,"date":"2015-05-26T00:00:00","date_gmt":"2015-05-26T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/how-to-code-a-live-dynamic-twitter-feed-in-html-email\/"},"modified":"2025-12-18T16:48:03","modified_gmt":"2025-12-18T21:48:03","slug":"how-to-code-a-live-dynamic-twitter-feed-in-html-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-code-a-live-dynamic-twitter-feed-in-html-email","title":{"rendered":"How to Code A Live Dynamic Twitter Feed in HTML Email"},"content":{"rendered":"

As we started nailing down logistics for Litmus Live (formerly the Email Design Conference) in 2015<\/a>, conversations about making our launch email bigger and better than last year\u2019s began. How do we top HTML5 video background technique<\/a> in email? By using dynamic content: a live Twitter feed.<\/p>\n

Yes, a Twitter feed in an email<\/em>.<\/p>\n

Our goals were twofold: generate interest in the conference and use an innovative\u2014and inspiring\u2014technique in the email to do so. After many brainstorming sessions, we decided to use the common approach of dynamic content, but with a twist.<\/p>\n

\"tedc15-email\"<\/a><\/figure>\n

View full email in browser \u2192<\/a><\/p>\n

You can also view the full code here<\/a> and Litmus test results here<\/a> to see how it displayed across 40+ email clients.<\/p>\n

Dynamic Content in Email<\/h2>\n

Dynamic content in email is not a new concept. In fact, it\u2019s frequently used to create personalized, targeted emails. Historically, dynamic content has been implemented strictly through the use of text or images, and pulled through merge tags or variables via an ESP. Dynamic images are linked to a single source file, which gets dynamically overwritten to display a new image for a certain subset of subscribers based on pre-defined personalization parameters. Both of these methods enable you to create a unique, personalized email experience for your subscribers.<\/p>\n

We used dynamic images in our launch email to make the live dynamic Twitter feed work across several popular email clients. However, we also used an entirely brand new method to implement dynamic content: dynamic CSS.<\/p>\n

While the dynamic CSS worked for WebKit clients, we needed to implement a proper fallback using dynamic imagery for our subscribers using non-WebKit clients. That being said, the live Twitter feed was supported (in one way or another!) in the following inboxes:<\/p>\n

    \n
  • AOL Mail\n
    Dynamic Image<\/div>\n<\/li>\n
  • Apple Mail\n
    Dynamic CSS<\/div>\n<\/li>\n
  • iOS (Native email app)\n
    Dynamic CSS<\/div>\n<\/li>\n
  • Outlook (2000-2013)\n
    Dynamic Image<\/div>\n<\/li>\n
  • Outlook for Mac (2011 & 2016)\n
    Dynamic CSS<\/div>\n<\/li>\n
  • Outlook.com\n
    Dynamic Image<\/div>\n<\/li>\n
  • Thunderbird\n
    Dynamic Image<\/div>\n<\/li>\n
  • Windows Phone\n
    Dynamic Image<\/div>\n<\/li>\n
  • Windows Mail\n
    Dynamic Image<\/div>\n<\/li>\n
  • Windows Live Mail\n
    Dynamic Image<\/div>\n<\/li>\n
  • Yahoo! Mail\n
    Dynamic Image<\/div>\n<\/li>\n<\/ul>\n

    Dynamic CSS Content for WebKit Email Clients<\/h2>\n

    While we could have used dynamic images for all email clients, we opted to use dynamic CSS for progressive enhancement in WebKit email clients, like the iPhone and iPad native email clients, to make the Twitter feed feel more realistic.<\/p>\n

    So how did we make it work? Using the fifteen most recent tweets that included the #TEDC15<\/a> hashtag, we displayed the first 5 tweets by default, then animated the remaining tweets one-by-one over a span of a minute. This allowed us to make the tweet stream feel real time and had the added benefit of keeping people engaged for longer.<\/p>\n

    While we updated the CSS file every 10 seconds, the actual content in the email couldn\u2019t be updated in the same way\u2014it needed a complete refresh of the document to work. Users needed to re-open the email or refresh the web version to see updated tweets. Although not ideal, it actually proved to be highly engaging!<\/p>\n

    To get the live twitter feed working, we used HTML and CSS that would only display in WebKit clients. To achieve this, we created empty <div>’s and <span>’s and used the content CSS property to add the content of Twitter users\u2019 names, handles, timestamps, and tweet copy.<\/p>\n

    Here\u2019s the HTML:<\/p>\n

    <div class=\"tweet\" id=\"tweet-1\">      \n  <div class=\"tweet-avatar-wrapper\">\n    <div class=\"avatar\"><\/div>\n  <\/div>\n  <div class=\"tweet-wrapper\">\n    <span class=\"name\"><\/span> <span class=\"handle\"><\/span>\n    <span class=\"timestamp\"><\/span>\n    <span class=\"copy\"><\/span>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
    To dynamically overwrite the CSS, we relied on an external stylesheet that was updated every 10 seconds and included in our email like so:<\/p>\n
    <link rel=\"noopener\" target=\"_blank\" href=\"http:\/\/assets.insights.litmus.com\/campaigns\/tedc-2015\/assets\/tweets.css\" type=\"text\/css\" rel=\"stylesheet\" \/><\/code><\/pre>\n
    Here\u2019s the corresponding CSS, with the tweet information in the content property:<\/p>\n
    #tweet-1 .name::before {\n  content: \"Kevin Mandeville\";\n}\n\n#tweet-1 .handle::after {\n  content: \"@KevinMandeville\";\n}\n\n#tweet-1 .copy::before {\n  content: \"I'm excited for #TEDC15! Who's going?\";\n}\n\n#tweet-1 .timestamp::after {\n  content: \"1m\";\n}\n<\/code><\/pre>\n
    The CSS for the tweets was wrapped in a media query that allowed us to display it only in WebKit-based email clients:<\/p>\n
    @media screen and (-webkit-min-device-pixel-ratio: 0) {\n  \/* Insert CSS here *\/\n}\n<\/code><\/pre>\n
    By using empty <div>’s for the default structure, the content did not show up for non-WebKit email clients. We then fell back to an image of the dynamic twitter feed for non-WebKit subscribers.<\/p>\n
    The only downside to using WebKit-targeting and the content property is that some email clients, such as Airmail and the Outlook iOS and Android app, would support the WebKit-targeted media query but not the content property, rendering the tweets invisible. But, given that these email clients are a very tiny part of our audience (less than 1%), this was a sacrifice worth making.<\/p>\n
    Dynamic Images for Non-WebKit Email Clients<\/h2>\n
    For non-WebKit email clients, we used the more traditional method of displaying dynamic image since the CSS content property is not well supported in email clients outside of WebKit.<\/p>\n
    In the email, we referenced a dynamic image of the Twitter feed:<\/p>\n
    <img src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/tweets.jpg\" width=\"600\" height=\"902\" border=\"0\" class=\"webkit-hide\" alt=\"tweet #TEDC15 to show up in the live feed!\" style=\"color: #666666; font-size: 16px;\"\/><\/code><\/pre>\n
    \"tweet<\/a><\/figure>\n
    We created a simple web page of just the Twitter feed using the same HTML and CSS from the email. We simply took a screenshot of the feed at the same dimensions of 600×902 through the command line utility wkhtmltoimage<\/a> and dynamically updated that same image every 10 seconds.<\/p>\n
    Since we were using HTML and CSS for the WebKit view, we hid the image in WebKit to avoid duplicated feeds:<\/p>\n
    @media screen and (-webkit-min-device-pixel-ratio: 0) {\n  .webkit-hide {\n    display: none;\n  }\n}\n<\/code><\/pre>\n
    With this technique, the live Twitter feed worked in even the most troublesome clients (ahem, Outlook) and allowed the majority of our subscribers to join in the fun!<\/p>\n
    The only major downside to this dynamic image implementation is that Gmail caches its images<\/a>. As a result, Gmail users didn\u2019t experience the live Twitter feed. Instead, they saw eight of the most recent tweets and a special message to view the email\u2019s web version for the full effect:<\/p>\n
    \"gmail-twitter-feed\"<\/figure>\n
    How We Built the Dynamic Twitter Integration<\/h2>\n
    Kevin Thompson<\/a>, our marketing developer, was the mastermind behind the actual Twitter integration. He created a very simple application built on the Sinatra<\/a> framework and hosted on Heroku<\/a>. You can check out the code and try it out for yourself by following the instructions on Github<\/a>. This initial test proved it was possible to generate the tweets in CSS, load the external stylesheet in a handful of email clients, and that those clients could fetch the latest CSS each time the email was opened.<\/p>\n
    \"\"<\/a><\/figure>\n
    From there, the application began to get slightly more complex. Because Twitter imposes limits on the number of requests you make to the API, we needed to be sure that we wouldn\u2019t exceed the limit of 150 requests per 15 minutes allotted for search queries. To address this issue, we added a second process to our Heroku application. This process ran in the background, fetching tweets every 10 seconds, and storing them in a cache. The main application process would then load tweets from the cache instead of searching for them directly through Twitter.<\/p>\n
    Kevin also had to take scalability and speed into consideration. While we had a solution for staying within Twitter\u2019s API limits, our single server likely wouldn\u2019t be able to process the expected number of requests from the 200,000+ recipients of our email. To solve this we implemented the Amazon CloudFront CDN<\/a>, allowing us to support far more requests for our assets and also distribute them globally to ensure the files loaded quickly for our entire audience. In our Sinatra application, Kevin also added Cache-Control headers<\/a>, which instructed CloudFront to expire assets after 10 seconds. This forced it to request new content from our application more frequently.<\/p>\n
    In order to keep the results as fresh as possible without exceeding the rate limits of Twitter\u2019s API, we rendered and cached the dynamic CSS and image files every 10 seconds with the results of our Twitter search.<\/p>\n
    To manage the content of the tweets, both the Twitter search terms and blocked content\/users were controlled using environment variables. Although changing environment variables on Heroku meant that our application would need to restart, because the assets were distributed through the CDN and the application was so simple, a restart only took a few seconds and would be completely unnoticeable. Also, because Heroku provides a user interface for editing environment variables, our marketing team was able to make changes to the search terms and block content as necessary.<\/p>\n
    If these methods seem too complicated or time-consuming for you, there are third party companies such as Movable Ink<\/a>, LiveClicker<\/a>, PowerInbox<\/a> and Avari<\/a> who specialize in dynamic content for email.<\/p>\n
    Filtering Bad Tweets<\/h2>\n
    A big concern for us while incorporating a live dynamic twitter feed was relinquishing control of the content of our email\u2014resulting in some \u201cbad tweets\u201d appearing in the stream. A few folks on Twitter pointed this out:<\/p>\n
    \n
    Its nice having live tweet feeds in email, but my fear would be someone shouting out "this email sucks!" #TEDC15<\/a><\/p>\n
    — Nick (@NicholasLester) May 22, 2015<\/a><\/p><\/blockquote>\n