Building an "On This Day" site for your Twitter Account


I wanted to see what I was Tweeting on this exact day last year. And all the years before. So I built a website! It's a disgusting hack, and I'm truly sorry for unleashing it on you.

Using the API

You can't.

The Twitter search API only goes back 7 days. This whole idea would be much easier if I had access to the Premium API.

But! The Twitter website has no such restrictions.

Twitter's Advanced Search allows you to pick specific dates to search for. Here's the string which shows my username's Tweets on Christmas day 2015: search?q=from:edent (until:2015-12-26 since:2015-12-25)

So how do we embed Twitter's site on our page?

iFrames!

Nope!

Blocked by X-Frame-Options Policy. An error occurred during a connection to twitter.com. Firefox prevented this page from loading in this context because the page has an X-Frame-Options policy that disallows it.

Twitter's X-Frame-Options Policy doesn't allow embedding. Oh well. Guess we have to give up.

HA!

Busting makes me feel good

Using the X-Frame Bypass Web Component is a real-life cheat-code.

X-Frame-Bypass is a Web Component, specifically a Customized Built-in Element, which extends an IFrame to bypass the X-Frame-Options: deny/sameorigin response header. Normally such headers prevent embedding a web page in an <iframe> element, but X-Frame-Bypass is using a CORS proxy to allow this.

It's dead simple to use. Stick this in your <head>

HTML HTML<script type="module" src="https://unpkg.com/x-frame-bypass"></script>

Done.

Stick it all together.

I wrote some horrible code to shove a dozen iFrames on a page. Several columns of Tweets. Each one from a previous year. Ta-da!

The frames each point to the mobile version of the Twitter site - that provides a single column layout. The X-Frame Bypass doesn't send a User Agent Header - which is lucky because it forces Twitter to serve up a legacy version of the site.

It only loads 20 Tweets per day - so you'll need to click through if you were particularly loquacious that day.

I can't be bothered to release this as a proper site. But if you want to - go ahead!


Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

3 thoughts on “Building an "On This Day" site for your Twitter Account”

What links here from around this blog?

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">