Next post Previous post

A better way to embed Twitter quotes

November 9, 2010 at 9:50 PM by Dr. Drang

A few weeks ago, I described an AppleScript I invoked, via FastScripts, to help me embed tweets into my blog posts. I called it “Tweet screenshot & link,” and it

  1. Brought up the screenshot crosshairs—just like pressing ⇧⌘4—so I could draw a rectangle around the portion of the tweet page I wanted to use.
  2. Resized the screenshot to fit.
  3. Uploaded the image to my server.
  4. Grabbed the tweet URL.
  5. Created a line of HTML that would display the image and have it act as a link to the original tweet page. The image’s alt parameter was set to the tweet text for both accessibility and searchability.
  6. Put that HTML on the clipboard for later pasting into a blog post.

It worked pretty well, and did a lot of things with little effort on my part. I’ve used it several times since, but now I have a better system based on Blackbird Pie, something that’s been around for several months, but which I wasn’t aware of until I read about the Blackbird Pie plugin for WordPress.

The advantage of Blackbird Pie is that it displays the tweet as text, not an image. Links within the tweet work, too. Here’s an example:

Good read: Kenneth Brower’s meditation on Freeman Dyson’s wackiness on AGW: http://bit.ly/aJUINZ. 1 poss. Brower omitted: physics hubris.4:58 PM Tue Nov 9, 2010@TomLevenson
Thomas Levenson

Of course, instead of just using the WordPress plugin directly, the way any normal person would, I had to do some customizing. In fact, I’m not using the plugin at all; I’m using a fork of Jeff Miller’s cleverly named blackbird.py Python script/library. Like the plugin, Miller’s code generates the HTML for the embedded tweet, but it’s more general and can be used outside of WordPress. Also, it’s written in a language I feel more comfortable with, making it more easy for me to customize.

The changes in my fork of blackbird.py are these:

When I want to embed a tweet, I bring it up in Safari1.

Back in my text editor, I type ;tweet where I want the tweet to appear, and TextExpander turns that into this huge chunk of HTML:

<!-- http://twitter.com/#!/TomLevenson/status/2132934534373376 -->
<style type='text/css'>.bbpBox2132934534373376 {background:url(http://a3.twimg.com/profile_background_images/14765511/Lassen_From_King_s_Creek_Meadow.jpg) #9AE4E8;padding:20px;;width:80%;margin-right:auto;margin-left:auto} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:125% !important;line-height:1.3;-moz-border-radius:5px;-webkit-border-radius:5px}
p.bbpTweet a{color:blue;text-decoration:none} p.bbpTweet a:hover{text-decoration:underline} p.bbpTweet span.metadata{display:block;width:100%;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6;font-family:Sans-serif;font-size:80%;line-height:1.1} p.bbpTweet span.metadata span.author{} p.bbpTweet span.metadata span.author span.realName{color:#888;font-size:75%} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:36px;height:36px} p.bbpTweet span.timestamp{font-family:Sans-serif;font-size:50%;display:block;padding-top:0.5em;text-align:right}</style>
<div class='bbpBox2132934534373376'><p class='bbpTweet'>Good read:  Kenneth Brower's meditation on Freeman Dyson's wackiness on AGW: <a href="http://bit.ly/aJUINZ.">http://bit.ly/aJUINZ.</a> 1 poss. Brower omitted: physics hubris.<span class='timestamp'><a title='Tue Nov 09 22:58:25 +0000 2010' href='http://twitter.com/#!/TomLevenson/status/2132934534373376'>4:58 PM Tue Nov 9, 2010</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/TomLevenson'><img src='http://a1.twimg.com/profile_images/204893725/Tom_Author_photo_normal.jpg' /></a><a href='http://twitter.com/TomLevenson'><strong>@TomLevenson</strong></a><br/><span class='realName'>Thomas Levenson</span></span></span></p></div>
<!-- end of tweet -->

Yes, it’s almost 2k of text, but it’s smaller than a screenshot would be, and it scales with the user’s default font size. A nice touch for embedding—due entirely to Miller; I didn’t touch this part of the code—is the use of an absolute date rather than the Twitter-standard relative date. A date like “137 days ago” isn’t really very helpful.

If you like the idea of embedding tweets this way but don’t like the style choices I’ve made, you can easily fiddle with the code to make it look the way you want. All the CSS is in the TWEET_EMBED_HTML string near the top of blackbird.py.

Update 11/9/10
And I should have guessed the embedded tweet would look like shit in the RSS feed. Expect some tweaking in the days to come.

Update 11/10/10
The look of embedded tweets in the RSS feed is more or less fixed now. The repository has the latest code.

  1. I haven’t generalized the snippet to work with Chrome yet, because I wrote it on my G4 iBook, which can’t run Chrome. As soon as I get a chance to play with it on my Intel iMac, I’ll get it working in Chrome, too. ↩

Next post Previous post