Zach’s ugly mug (his face) Zach Leatherman

I’m Taking Ownership of My Tweets

September 16, 2019

Update November 28, 2022: This project has now been open sourced as Tweetback.

I’ve invested a lot into Twitter and I’ve received a lot of value from Twitter. I’ve made a lot of friends and professional connections on the site. I’ll be sad when Twitter goes away. Without a doubt, it will go away. It’s only a question of when.

I fully expect my personal website to outlive Twitter and as such have decided to take full ownership of the content I’ve posted there. In true IndieWeb fashion, I’m taking ownership of my data.

Features

  • Each tweet has its own independent page: zachleat.com/twitter/:id.
    • If you have an existing URL to one of my tweets, you can easily translate it to my self hosted version. twitter.com/zachleat/status/905054076408393729 becomes zachleat.com/twitter/905054076408393729
    • This was also a very interesting stress test for Eleventy, as it generates 27K pages with every run of the build 😲
    • Each tweet page has some nice pagination links at the top to navigate between tweets (historically).
  • Super fast HTML first rendering (that tweet is 2.0 KB for the entire page)
  • Focus on the text first and less on the media. Links to external media are included (sample) and Videos, images, and animated GIFs are supported. Media are not self hosted (yet) and uses a max-height of 10em. All media are scrunched into a single row. Media is not upscaled like Twitter likes to do on their web site 😱
  • Links:
    • t.co links are bypassed and original hyperlinks URLs are displayed and used.
    • Things are linkified the same as on Twitter: users, tweets being replied to, nicer non-truncated URLs
    • Nicer link formatting for links-to-tweets: @username/:id.
    • Internal links to my own tweets stay within the archive and don’t link out to Twitter.
  • My tweets are threaded (both forwards and backwards) (sample)
  • While I could display favorite and retweet counts, I don’t on individual tweet pages. I only display those on the popular tweet page.
  • Positive and negative sentiment analysis for each tweet (e.g. Mood +8). See the most positive and most negative tweets.
  • Support some markdown: I sometimes use `backtick` markdown notation for code in my tweet text. This translates to <code> properly.
  • Works initially from the Download your Twitter data feature, but also supplements with the Twitter API to update as new tweets are published (that way I don’t have to keep re-exporting every time).

Analytics

All of these are linked up on the Twitter Archive home page. The only thing that surprised me here was that 60% of my tweets are replies—wow!

The Backlog 😅

  • alt on media. It was suspiciously missing from the data export. 😱
  • Clean up the code a little bit for publishing so others can use it (this includes some outstanding color contrast issues 😱)
  • Use a better typeface 😎
  • Some kinda widget for embedding archive tweets in other pages.
  • Make a tool (maybe a bookmarklet) to automatically translate URLs from twitter to my archive.
  • Search
  • I purposefully do not include others tweets (unless I’ve retweeted them). I need to add a mechanism to remove retweets if they have been deleted upstream.
  • Retweet and favorite counts, while minimized, are not yet updated—they are fixed to when the tweet was inserted into the database.
  • Hashtags are not yet linked in tweet text 🤷‍♂️
  • Some nicer data visualizations and graphs

< Newer
JAMstack Conf SF 2019
Older >
Two Browsers Walked Into a Scrollbar

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

20 Reposts

jackyalcine 🔜 TwitchCon 2019Adactio LinksGiammaSumeet JainAlexander BoldakovIndieWeb Avatar for https://jlelse.blogівась тарасикIndieWeb Avatar for https://diggingthedigital.comIndieWeb Avatar for https://medium.comCSS-TricksTobiasPaulDavid Darn Of The Dead 🧟‍♂️IndieWeb Avatar for https://www.jvt.meMax BöckDavid BissetAdrian Roselli 🗯@willmartian@fosstodon.orgJuan FernandesDaniel Souza

14 Likes

Aaron PareckiBeko PharmAdam JohnsonBrent LarsonJohn MeyerhoferMike AparicioBrad FrostJace Benson 👨‍💻⚙️the hog that got away 🌳matt northam ᴹᴺGiammaJordan EldredgeNicolas HoizeyIngmar

2 Bookmarks

IndieWeb Avatar for https://adactio.com IndieWeb Avatar for https://www.sonniesedge.net
24 Comments
  1. Jamie Tanna

    This is a great idea! I may have to look at the same. I'm also hoping to start to start publishing from my site first and then having that send the tweet afterwards using https://brid.gy/

  2. swyx

    this is super cool!! how long do build times take? seems to be pretty light as it doesnt reuse templates. i reckon 2-5 minutes?

  3. Zach Leatherman

    It does re-use one layout for the whole thing and just raw JS for templating. Local build times are about 30 seconds on my machine 👍 (it’s a pretty nice Macbook) This project is a nice motivator to think about and work on incremental building stuff in Eleventy too

  4. Johan Bové

    Awesome work! Any chance you'll open-source your Own-Your-Tweets code? #indieweb

  5. Brad Frost
  6. Jace Benson 👨‍💻⚙️

    The first thing I learned about @zachleat was 11ty, the second was this. I'm still waiting on this. - A fan

  7. Zach Leatherman

    the fan is persuasive

  8. Jace Benson 👨‍💻⚙️

    I was hoping it would blow you away.. :D

  9. Matthias Ott—bring back @mmatuzo

    So maybe in your case it’s more interesting to look at what @zachleat did: zachleat.com/web/own-my-twe…

  10. Zach Leatherman—bring back @mmatuzo

    (I never did open source this because I just don’t have the bandwidth to answer questions about it, although it’s running fine on my site 😬)

  11. Nicolas Hoizey

    Let's find a name for the org and project! Some ideas: - PESOS-Twitter (indieweb.org/PESOS) - Own-my-tweets - Twitter-mirror - Tweets-mirror - Twitter-backup - Tweets-backup TESOS (Tweet Elsewhere, Syndicate (to your) Own Site) is unfortunately not available on GitHub.

  12. Matthias Ott—bring back @mmatuzo

    tweetback

  13. Stefan on vacation 🏝️

    Just swinging by to say, I'd be game too! 🫣

  14. Matthias Ott—bring back @mmatuzo

    tweetback-loop

  15. Nicolas Hoizey

    Great! 👍

  16. Nicolas Hoizey

    Nice name! 👍

  17. Matthias Ott—bring back @mmatuzo

    TweetBack Machine …wait, that sounds somewhat familiar 🤔

  18. Brad Frost

    Say, that's got a nice ring to it.

  19. Matthias Ott—bring back @mmatuzo

    Backtweet’s back…

  20. Nicolas Hoizey (🦣 @nhoizey@mamot.fr)

    I currently only push from notes in my Eleventy to Twitter and Mastodon (aka POSSE). There's a project coming soon(ish) to help get past and future tweets back on our sites (aka PESOS), based on @zachleat code from zachleat.com/web/own-my-twe… Stay tuned! 😅

  21. Nicolas Hoizey (🦣 @nhoizey@mamot.fr)

    I use VS Code indeed, but I use a shell script to create the Markdown file in the right folder, and with some Front Matter: github.com/nhoizey/nicola… I might move to a simple Netlify Form and Function as @bellanger_q explains here: quentin-bellanger.com/blog/cms-netli…

  22. Sia (parody) | @sia@front-end.social

    Nice! I'm contemplating keeping the data as json or a js object since my twitter data is currently like that anyway. I don't think I'd post replies to other tweets/toots, just threads of my own. Wondering how much to put on a page. Having a page per note seems high

  23. Nicolas Hoizey (🦣 @nhoizey@mamot.fr)

    My notes are short contents for my site, so I publish them as Markdown, as other content types. Pushing them to social networks is secondary. For content meant primarily for Twitter, I would use Twitter as a source, and PESOS to keep an archive I own.

  24. Nicolas Hoizey (🦣 @nhoizey@mamot.fr)

    Exactly what I mean in my previous answer! 👍 There are two different use cases, for with either POSSE or PESOS is the best solution. Thanks to POSSE, I plan to remove crosspost between Twitter and Mastodon, and adapt content to each platform: mentions, message length, etc.

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)