mide

Embed Twitter Without Tracking

Monday, June 5, 2017

Content Navigation

About

Twitter offers the ability to embed your timeline on your website for easy visitor interaction, but if you visit my contact page, you'll see I opted for a slightly different method of including my tweets on my website.

Normal Workflow

If you want to embed your timeline on your website, you'll need to add the following code to your website:

<a class="twitter-timeline" href="https://twitter.com/CranstonIde">
  Tweets by CranstonIde
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

Once you add those simple few lines, you'll get a nice and interactive Twitter timeline (like the screenshot shown below) on your page. It's likely you've seen this around the internet; you'll be able to scroll through recent tweets, click third party links directly, and easily see images. This is the best user experience.

Normal Twitter Embedded Screenshot

The Problem

That little snippet pulls 116K of code from Twitter's website via JavaScript. Every visitor of a website with an embedded Twitter timeline will run this code. I personally haven't read the code nor taken the time to understand it, and I have a feeling that most people haven't either.

Without surprise, this goes directly against my privacy goals for this website by including a remote source for content.

My Solution

I have a daily build job (via TravisCI's new Cron schedule feature) that will visit my Twitter page, take a screenshot, and upload it to AWS S3. The TTL of the cache is set to one day, so I can then embed that image and know the tweets are at most a day out of sync. This solution may not be the best user experience, but it offers the most privacy.

The code is really simple, so if this is something you're interested in, I suggest giving it a shot.

Twitter Screenshot

Links

Future Thoughts

Updates

Jekyll Generator

I've switched my contact page to use a custom Jekyll generator, meaning that the above mentioned image is no longer there. Together with a nightly build, this generator puts the tweets in the page without including an image, and it now matches my theme. It still matches my goal of privacy, but I feel this was a better solution than the image, hence the replacement.

I'd love to clean up my code and release the generator as an open source plugin. It needs a little work before it's ready, but that's the goal.