Embed Twitter Without Tracking
Monday, June 5, 2017
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.
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.
Without surprise, this goes directly against my privacy goals for this website by including a remote source for content.
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.
- GitHub Project
- TravisCI Build
- My Twitter (@cranstonide)
- This logic could be used to develop a local cache of just about anything. I could even keep my ham radio license
- I may also add a timestamp to the image itself, so it's a little more clear when the screenshot was taken.
- Stylizing the screenshot a little more is possible, too. I may add some overlay text explaining it's a screenshot.
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.
Revert to Image
As of July 2018, Twitter has changed their terms and conditions, and while I feel like I feel well within their acceptable use, There are many new terms that I may or may not meet. I unfortunately do not have the time to process and keep up with the changes to their Display Requirements nor Developer Terms. Additionally, Twitter now requires you to Apply for a Developer Account, so I can't just use a personal API key anymore.
I would still like to include my Twitter feed in my website, but I don't want to deal with the overhead above. So I am adding back the original image and removing all the API logic.