Embedding Tweets Into My Microblog

These days most of my “Tweets” are actually syndicated microposts published here. While this solution has largely worked well, there have been a few hiccups. The biggest one by far has been embedding Tweets into posts. Given Tweeting is how most sane people write microposts, supporting them elegantly is necessary. Ultimately, what I wanted was twofold:

1. To embed Tweets on my blog so that readers can see what my comment is referencing without having to click on a link.
2. To syndicate just the links of Tweets, giving sites the option to show just that link (like Micro.blog) or turn them into embeds (or quotes in the case of Twitter itself.)

By default WordPress will embed Tweets using the oEmbed standard. You would think this would be good in that this behavior ostensibly gets me more than half of what I want — Tweets are embedded into posts and Twitter knows to translate their own oEmbeds to quotes. The problem with this is that content from embedded Tweets effectively become part of the post. This is bad because microposts require a limited number of characters, lest they get treated as regular posts. When content from a Tweet gets added to a post, the characters of that Tweet count against that limit. This means there is no room to comment when referencing Tweets that already contain the maximum 280 characters.

For a long time, I just disabled oEmbeds. Tweets were still being treated as quotes on Twitter, but everywhere else (including here) just got links. This past weekend, I decided to play around and came up with a fairly low-tech solution – iFrames. By placing my own oEmbed consumer in an iframe, I can render the oEmbed on this blog while hiding its contents from feeds where I can instead expose a link. Here’s an example:

<a href="https://twitter.com/NanoRaptor/status/1308133667932266-497">
<cite class="h-cite u-quotation-of">
    <iframe class="tweet-embed" src="https://jackwellborn.com/frames/twitter_frame.php?tweet=NanoRaptor/status/1308133667932266497">
        https://twitter.com/NanoRaptor/status/1308133667932266497
    </iframe>
</cite>
</a>  

Furthermore, I can easily summon a template of this HTML using the following TextExpander JavaScript snippet:

`<a href="${'%filltext:name=tweet%'}">
    <cite class="h-cite u-quotation-of">
        <iframe class="tweet-embed" src="https://jackwellborn.com/frames/twitter_frame.php?tweet=${ '%filltext:name=tweet%'.replace(/^https\:\/\/twitter.com\//, '')}">
            %filltext:name=tweet%
        </iframe>
    </cite>
</a>`  

There are some shortcomings to this technique. Firstly, iFrames do add additional rendering. Ideally, posts would render with Tweets embedded. Second, iFrames don’t inherently resize to the size of their contents. While I might add some JavaScript to add dynamic resizing, right now I am satisfied manually changing the height attribute. Finally, I am currently not implementing any caching and I suspect too many requests to Twitter’s oEmbed service might run afoul of some API policy. Since most of my microposts are read as Tweets, I am not concerned with this at the moment.

Despite these shortcomings, I am happy with my low-tech solution. Given there didn’t seem to be much on the web for doing what I was looking for, I decided to document my solution here in case any one else is looking to embed Tweets in their microblog without exploding their character counts. I hope it helps.