Embedded tweet improvements
August 26, 2011 at 2:45 PM by Dr. Drang
In Monday night’s post about scrolling, I included this tweet of mine:
I gave the Lion scrollbar visibility default a chance, but I like knowing where I am at a glance. http://t.co/XlR975c
@drdrang Dr. Drang
As you can see if you run your mouse over it, it’s not simply a screen grab, it’s a chunk of HTML, complete with links and the user’s background image. It’s made using blackbird.py, my fork of Jeff Miller’s Python translation of Blackbird Pie, Robin Sloan’s web service for doing the same thing.
The idea behind this is to make it easy to embed these “living” tweets into other pages and have something that looks very much like what you’d see on Twitter’s own site.
The problem with blackbird.py, as you can see from the example, is that it doesn’t handle Tweet Entities correctly—in particular, it doesn’t display URLs the way Twitter itself does. As I mentioned a couple of weeks ago, Twitter has changed its way of handling in-tweet links to further promote its own t.co shortening service.
So last night I dug into the source of blackbird.py and rewrote all the parts that turn URLs and @mentions into links, basically following the outline of the htmlify function I wrote for Dr. Twoot, only doing it in Python instead of JavaScript. The result is an embedded tweet that looks like this:
I gave the Lion scrollbar visibility default a chance, but I like knowing where I am at a glance. flickr.com/photos/drdrang…
This is better because it uses Twitter’s display URL, which strips off the http:// part and uses an ellipsis at the end to keep the character count down.
Of course, it would be better still if the embedded tweet showed the image itself instead of just a link to it. As it happens, the embedded tweet will show the image if it’s hosted by Twitter:
The Palm shirt. Bought it at a Macworld Expo before the turn of the century.
@Ihnatko Andy Ihnatko
Clicking on the image takes you to a larger version of the image, if one exists.
Twitter-hosted images are part of the Tweet Entities ecosystem, so adding them was easy. Adding images hosted at TwitPic, yFrog, Flickr, etc. will require a lot more coding, which I wasn’t up to last night. Flickr should be pretty easy, as I’m reasonably familiar with its API. The others will take some work. Maybe next month…
Two more things worth mentioning:
- First, I have no idea how the embedded images are going to look in the RSS feed. As you can see in my blackbird.py repository, I use CSS and a
max-widthsetting to scale the image to fit inside the space allocated for the tweet. Since RSS doesn’t respect CSS settings, I wouldn’t be surprised to see some images bursting out of their container in feed readers. Second, as I said in my first post about blackbird.py, I invoke it through a simple TextExpander AppleScript snippet,
tell application "Safari" to set tweetURL to URL of front document do shell script "/usr/bin/python ~/git/blackbirdpy/blackbirdpy.py '" & tweetURL & "'"that’s assigned the abbreviation
;tweet. When I want to embed a tweet in what I’m writing, I bring up the tweet in Safari, and then type;tweetwherever I want it to appear.
