The Problem

While in Safari on my Mac I come across someone that I think would be a good follow on Twitter, usually after reading their website/blog. I try to avoid Twitter.com whenever possible. I much prefer firing up Tweetbot and looking at a person’s past tweets, photos/videos, who they follow and who follows them etc. Typically, I would have to open up Tweetbot go to the search tab, copy the username from Safari, paste it into the search field, select the user and hit follow. I do this quite a lot while on following binges and it gets really old to be constantly copying and pasting and switching back and forth between apps.

This annoyance becomes a life-threatening disaster when I’m on my iPhone or iPad. So I decided to find a quick and easy way to get to a Twitter user’s profile within Tweetbot after discovering them somewhere on the web. I wanted a Safari based JavaScript bookmarklet right from the outset. The only problem was I had no idea how to make one and 15 minutes on Google didn’t yield any quick solutions so I started off with a much simpler, but still step heavy, workflow.

Text Expander workflow

I resigned to just create a TextExpander snippet that contained the URL structure needed to view a profile in Tweetbot. The snippet that I call with “tbotp” is: tweetbot://[my<em>screenname]/user</em>profile/[profile_screenname]

When that URL is entered into Safari it automatically switches the application to Tweetbot and goes to the specified user account. I would copy the [profile_screenname] – Twitter username – portion of the Twitter.com url from Safari, select the entire URL, enter my tbotp text expander snippet and hit enter. It worked just fine and because I have my Text Expander snippets synced through Dropbox I could also perform this workflow on my iOS device.

It didn’t take more than a week before this workflow felt slow and unintuitive too. So I decided to sit down and get the JavaScript bookmarklet working and put this to rest once and for all.

Javascript bookmarklet

I wanted to:

  1. Extract the Twitter screenname from the current URL in Safari.
  2. Insert that screenname into the appropriate Tweetbot URL scheme.
  3. Execute the URL so that Tweetbot would show me the profile page of that user.
  4. Use that code to create a Safari bookmarklet so I could use a keyboard shortcut to execute it on my Mac and also have it synced, though iCloud, across to my iPhone and iPad.

It turned out to be much easier that I thought it would be. I’m not 100% sure this is an ideal way of doing it but it certainly works for me and that’s all I really care about.

I relied on Google for almost every part of this.

  1. I looked at how to grab the current URL in Safari and found window.location
  2. I looked at how to extract portions of a URL using JavaScript and found href.split
  3. I chose the split to occur after at .com/ so the script would grab everything after the .com/ which is typically the Twitter screenname.
  4. I created a blank bookmarklet in Safari called tweetbot.
  5. Combining the JavaScript elements above with the correct Tweetbot URL I started experimenting. I looked at how other bookmarklets were formatted and soon I came up with:
`javascript: window.location='tweetbot://rmjh/user_profile/'+window.location.href.split('.com/')`
  
which worked perfectly when using the ⌘+3 keyboard shortcut.   6. I went to my iPad and iPhone, the bookmarklet was there when I opened Safari and after visiting a Twitter.com profile page the bookmarklet sent me to Tweetbot for iOS in exactly the same way as on my Mac.

Even with something so simple as this bookmark I can’t tell you how satisfied it made me feel to figure it out. It was a good day.

If you would like to use this bookmarklet feel free to drag the button below into your Safari Bookmarks Bar and then edit the bookmark replacing my Twitter username with your own.

view in tweetbot