You may rely on embedding tweets in your posts as a quick and easy way to quote or reference a person or subject.
There are two challenges to relying on this, however:
A tweet or account may be deleted or go private;
The content may not be accessible to users with disabilities.
The solution to these challenges is to use the embeddable HTML that Twitter provides, cleaning up the structure, fixing references, and addressing any missing accessibility features.
Disappearing Tweets
This part may be most useful to people who use tweets as a method of quoting someone. Say, a journalist who was forced to cover a truly evil person, only for Twitter to get 11th hour courage to ban them resulting in all their hate being flushed at once.
It is important that you use the embeddable HTML that Twitter provides (unless you write your own). Some content systems allow you to embed a tweet by simply dropping the address of the tweet into your editor (via oEmbed), and the content system retrieves and displays it for you. The problem is when that tweet goes away, there is nothing to retrieve. You must manually embed the tweet.
You may notice that the embeddable code from Twitter has a JavaScript reference. The JavaScript is there to enhance the embedded tweet to brand it and add familiar features (such as seeing likes or retweets). You may also notice the content of the original tweet as well. This allows the page to display the tweet content even if the script fails.
That bit of text will be able to stand on its own when the tweet is gone. For example:
That's too bad was about to reach out to work with Deque on the audits.
It doesn’t matter that the original petty tweet was deleted, because the content is still there regardless. The link is broken, but a motivated reader could use it to track down the tweet in the Wayback Machine or an interested observer could screen shot it.
As part of embedding it you will also want to change the links from the t.co shortener to the real address. Partly to protect your readers from being routed through Twitter’s tracking machine, and partly to ensure links will still work regardless of network hiccup or the reference being lost with the source tweet.
You also need to capture media (images or videos) in the tweet. Those tend to go away when the tweet does, and given how many tweets are little more than media, the tweet you embed may not make sense without it. Sure, Twitter’s script will add the media, but if (like me) the user blocks Twitter scripts on non-Twitter sites or there is a connectivity issue, then no media.
Addressing Accessibility
If the tweet has an image, it should have alternative text. You will need to include it when you embed the image. If you are unfamiliar with the browser’s developer tools, you can use this bookmarklet to see the alternative text in your web browser. If there is no alternative text, you are on the hook for adding some. I have some tips on writing alternative text for tweets.
That post also discusses things like emoji and other special characters. The emoji may need to be marked up differently if they have an intended meaning that might differ from their default. Text that appears to be bold or italic should be be made into regular text and marked up with <strong> or <em>. For stylized type (gothic, old English, etc.) replace it with regular text. ASCII art should be wrapped in a <div> or <span> with aria-hidden="true" and described in plain text before or after the tweet.
Because Twitter mostly does not support captions for videos or transcripts, the average tweeter has to create burned-in (open) captions or find some other way to provide a transcript. Generally they don’t, so the burden will fall to you. As with an image, you will still need to grab the media and embed it, but you may also need to make captions, audio description, and/or a transcript. Whether you use open or closed captions is up to you and the context.
Remember, it doesn’t matter that the tweet author failed to make the tweet accessible, once you put it on your site you are on the hook to ensure its accessibility.
Following is an example embedded tweet with an image:
We wanted to know if users were adding alt text now. A random sample of public tweets told us: not really. Only about ~1,100 tweets in 1.09 million with photos (0.1%) contained alt text. Maybe this was the wrong way to look at it though, so we tried a few more things: pic.twitter.com/YUv56okBcM
Here is that tweet if the script from Twitter does not do its thing:
We wanted to know if users were adding alt text now. A random sample of public tweets told us: not really. Only about ~1,100 tweets in 1.09 million with photos (0.1%) contained alt text. Maybe this was the wrong way to look at it though, so we tried a few more things: pic.twitter.com/YUv56okBcM
Here is the raw HTML of my version of that tweet:
<blockquote class="twitter-tweet" data-conversation="none">
<p>
<img src="/wp-content/uploads/2018/01/colegleason_tweet.jpg" alt="This figure demonstrates the lack of accessible images on Twitter. A bar on the left depicts 9.2 million tweets with the text "9.22M tweets..." A square at the bottom is surrounded by a border and says "1.09 million tweets with photos". A callout zooms in on this section. An arrow points at a very small dot with the text "0.1% of tweets with photos have image descriptions" The dot is incredibly hard to see.">
</p>
<p>
We wanted to know if users were adding alt text now. A random sample of public tweets told us: not really. Only about ~1,100 tweets in 1.09 million with photos (0.1%) contained alt text. Maybe this was the wrong way to look at it though, so we tried a few more things: <a href="https://pic.twitter.com/YUv56okBcM">pic.twitter.com/YUv56okBcM</a>
</p>
<footer>
<cite>Cole Gleason (@colegleason) <a href="https://twitter.com/colegleason/status/1100432199793496064">February 26, 2019</a></cite>
</footer>
</blockquote>
Here is the default embed HTML from Twitter (line breaks added):
<blockquote class="twitter-tweet" data-conversation="none">
<p lang="en" dir="ltr">
We wanted to know if users were adding alt text now. A random sample of public tweets told us: not really. Only about ~1,100 tweets in 1.09 million with photos (0.1%) contained alt text. Maybe this was the wrong way to look at it though, so we tried a few more things: <a href="https://t.co/YUv56okBcM">pic.twitter.com/YUv56okBcM</a>
</p>
— Dr. Cole Gleason (@colegleason) <a href="https://twitter.com/colegleason/status/1100432199793496064?ref_src=twsrc%5Etfw">February 26, 2019</a></blockquote>
I get rid of the lang and dir attributes (because the content language matches my site), I embed the image with its alt, I link to the image directly (replacing the t.co URL), and I get rid of any query strings (which are used for tracking). To fit my own code standards, I also use a <footer> to hold the tweet’s meta-data and <cite> to cite the author; you don’t need to do that.
Wrap-up
To recap:
Use Twitter’s embed feature to get the HTML;
Adjust the HTML to fit your own style guide;
Change all links to point directly to the source, not Twitter’s link shortener;
Download any media, compress it, and add it to the tweet on the page;
Be sure image alternatives, captions, transcripts are all included;
If none are provided by the tweet author, make them.
Once you do that, it won’t matter if the leader of the free world his or herself gets booted from Twitter for something as silly as a sloppy coup attempt. Your embedded tweets of their nonsense (evidence) will still display.
Update: 19 January 2021
As Matt Hobbs points out, there is a significant perf hit when loading the Twitter embed script. So there is certainly an argument to never use the Twitter script at all.
If you are wanting to reference a tweet on a page, don't embed, just use a simple image + alt text + link. Your users will thank you!
• LCP: 600ms slower
• 2.7MB more JS! (😱)
• 25 more requests
• LH score dropped 50%
When I downloaded the PNGs from the tweet and ran them through TinyPNG, I saw a 70+% file savings on three of them. Maybe also don’t use Twitter’s images without your own compression process in place.
Perf and accessibility seem like compelling arguments to me, but again, not having broken tweets in your page may be the motivator to go down this path to begin with.
Update: 1 November 2023
Since Twitter turned into a cesspool and I have mostly abandoned it, I haven’t needed all the parts of this technique very much anymore. However, the underlying code I use is absolutely still a good fit for Mastodon posts. I have been using it extensively and it is far better than the <iframe> embed that Mastodon offers by default.
Chris Coyier has pointed out (0 KB Social Media Embeds) that the embed offerings from platforms like WordPress are just as over-engineered and he has also settled on the trusty <blockquote>.
Leave a Reply to Raghavendra Satish Peri Cancel response