Blackbird bookmarklet: publish a tweet in html

Posted: May 5th, 2010 | Author: | Filed under: hacking | Tags: , , , , | View Comments

Today, Twitter released Blackbird, a simple tool to “quote” an individual Tweet by getting an HTML code that you can place into a WordPress post or elsewhere. Previously, people wanting to quote Tweets had to take a screenshot, crop it, save it, upload and insert it.

It’s a step forward, but the Blackbird process is still very long!

  1. Copy the full URL of a tweet (e.g. http://twitter.com/xdamman/status/13405149731)
  2. Go to http://media.twitter.com/blackbird-pie/
  3. Click on the input text field
  4. Paste the URL
  5. Click on “Bake it”
  6. Click on the text area where the HTML code is created
  7. Select all text (press ctrl+a or cmd+a on a Mac)
  8. Copy (ctrl+c or cmd+c on a Mac)

And now, finally, you can paste the code into WordPress or elsewhere. TOTAL: EIGHT steps to have the HTML embed code in your clipboard!!!

We have a better solution:
drag and drop this bookmarklet link:

BlackBird bookmarklet

to your Bookmarks Bar. Now, getting HTML code to embed a tweet is as easy as 1-2-3:

  1. Go to the URL of a tweet (e.g. http://twitter.com/xdamman/status/13405149731)
  2. Click on the bookmarklet
  3. Copy (press ctrl+c or cmd+c on a Mac)

That’s it! Your code is on your clipboard and ready to be pasted anywhere.

Bonus: you can even go on  anyone’s twitter page (e.g. http://twitter.com/xdamman), or a twitter list (e.g. http://twitter.com/publitweet/team) and click the bookmarklet, a new link “” will appear below each tweet. Just click the link and here we go, you can now copy the embed code to your clipboard!

To close the overlay, just hit the escape key. It’s that simple.

Here’s what it looks like (it automatically adapts to the look & feel of your blog template):

Just released a bookmarklet for Twitter Blackbird. Get the HTML code of a tweet in 3 steps instead of 9! http://bit.ly/aL4QVGWed May 05 04:49:11 via TweetieXavier Damman
xdamman

If you have questions or want to contribute, get in touch on Twitter @xdamman

Mini FAQ:

  • If the tweet is removed by its author, will the embed code still work?
    Yes, the embed code is the full HTML version of the tweet. So the tweet will appear in your blog post forever
  • Is this the exact same embed code as if I was using the official Twitter Blackbird?
    Yes with one single exception: we display the absolute date and time of the tweet instead of “X minutes ago” — which we found totally meaningless since the time of the tweet doesn’t  update with the current time (remember, it is the static html version that you get).
  • What is Publitweet?
    Publitweet is a platform for curating and publishing Twitter. We are still in (semi-)stealth mode. We work with selected partners such as the San Francisco Chronicle, LeMonde, or Robert Scoble. If you are interested, keep in touch by following @publitweet (and don’t hesitate to ping us on Twitter!).

Thanks a lot to this awesome tutorial on how to make a bookmarklet

  • andyo
    Hi, this is great, but it seems it's not getting the last digit, or sometimes last two, of the tweet code correctly. It gets me a zero every time. For instance, see

    https://twitter.com/#!/bengold...

    https://twitter.com/#!/edyong2...

    https://twitter.com/#!/seanmca...
  • Great bookmarklet. Thanks for creating it. However, it was working fine until today. I guess Twitter implementing the HTTPS protocol might have changed something? It no longer works.
  • this sounds great but i can't get it to function. after i click the bookmarklet (Mac OS 10.6.6 running Firefox) i get a pop up box that says "loading"...and that's it. am i doing something wrong?
  • this sounds great but i can't get it to function. after i click the bookmarklet (Mac OS 10.6.6 running Firefox) i get a pop up box that says "loading"...and that's it. am i doing something wrong?
  • Thank you for posting the source to this, the···· is very educational.
  • Faith McNulty
    Some of your users may be having trouble with the new twitter URL s
    as in my tweets urls there is a extra /#!/ now don"t know why but if you remove it
    I get page not found ? It may be the new twitter theme version I am using ??
    any I didn"t see it mentioned so there you go :) I don"t know ?
  • cathyannsauer
    I cannot drag and drop the bookmarklet in Google Chrome. Any suggestions?
  • Alex788
    How about using another browser :-)
  • This doesn't work for me. I do the three steps, and then a window pops down that says "loading." It never finishes loading. Maybe #newtwitter has something to do with this? Help! Is this service working for anyone these days?
  • hello this does not work with new twitter :(
  • it worked just now
  • x_x
    Apparently the new Twitter makes the bookmarklet act randomly.It works with some tweets but there are others where it doesn't respond.
  • This is very useful but does not capture the geocode of the tweet.
  • sjlewis
    it'd be cool if inline links to media in tweets get expanded and embedded in the post as well, so images appear as such, videos get embedded
  • hells yes! so freaking useful/timesaver. you rule. thx.
  • Is http://media.twitter.com/black... working??? I tried to get an embed code for 1 of my tweet & it is not accepting the Twitter's URL, any idea?
  • I used to archive Tweets with the use of PowerPoint and put this in SlideShare for a new blog. This is so much easier! Thanks!
  • Awesome tool, thanks so much! Working great for us, though Textpattern choked a bit on some of the funkier bits. http://bitmethod.com/blog/top-...
  • this doesn't seem to hold for my blog, which I publish via Typepad. The visual presentation is lost once I actually post it, so it's back to screen captures for me.
  • This is quite good.
  • Richard
    Anyone know if there's a problem with the Publitweet bookmarklet at the moment? (18 May c. 2pm) Clicking the bookmarklet in Firefox brings up the box but it contains no code to embed... any ideas?
  • Just tested it and it works for me. This problem could happen if Twitter is having issues with their API (which tends to happen time to time). Please let me know if you are still experiencing this issue. I'll be happy to take a closer look!
  • hello
  • Great help, very interesting. With Twitter now so popular, many people are likely to enjoy reading this.
  • Do you have some examples? I would be happy to have a closer look and make it work on most different configurations. Thanks.
  • Hi, I work with a regular wp hosted blog and the embed code does not work. The blogpost shows exactly the code and that's it. :(
  • I tried using it in posterous, but to be fair it won´t render correctly until you edit it via your posterous account where you have finer html control. I got it to work eventually!

    It´s a glorious bookmarklet. Thanks for sharing.
  • Can you share your HTML tweaks to make it work with posterous? I would be happy to include them directly in the bookmarklet so that you don't have to manually edit it afterwards. Thanks!
  • let me clarify: when pasting your code snippet into an email when composing the posterous blog post (because thats the easiest wayt to posterous publish), it fails to process the snippet correctly in posterous and thus it does not display. So to get over that I have to resort to logging into posterous and using their wsywig editor in HTML mode to paste the snippet into place. Then it works OK. I didn´t therefore actually modify the snippet. does that explain ok?
  • Brilliant! Love it! Thank you so much.
  • The answer is probably blatantly obvious, but how do I get the URL of a tweet?
  • To get the URL - from your Twitter page, click on the "time sent" part of the tweet (eg 13 minutes ago). The tweet will then upon up separately with its own URL eg http://twitter.com/MarianDouga...
  • Xavier, hi and thanks for this bookmarklet. Very handy!

    I have a couple questions about the appearance of the embedded tweets. I used a recent tweet of mine in a blog post today: http://bit.ly/aQVjWu

    Here's my first question. Is it possible to change the tweet background theme to solid blue (no clouds) as is shown on my Twitter page? Where in the code would you make that change (and how)?

    Also, I understand that these embedded tweets automatically size themselves to fit one's blog layout, but how would you go about changing the code to enlarge or reduce the tweet box size? Curious to know if the embedded tweet box can be slimmed down (in height) further.

    Lastly, was curious about the timestamp on tweets. Embedded tweet shows time as 17:40:38, although it was originally tweeted around 12:40 CST. Are timestamps based off European timezone?

    Thanks again, sorry for the multiple ?s :)
  • 良い情報有難う御座います｡ 使ってみましたが､Blogの RT Service ”TweetMeme Button Error - 404” Errorがでます｡ 解決方法はありますか?
  • marfi
    Great job!
  • I played with this and I think it's very nice & easy to use - however I did notice that if there are Twitter Handles within the tweet text, they did not not become links like they did when done in the twitter's blackbird pie. Can you add that? It is the only thing that makes it not as optimum.
  • Just fixed that. Now Twitter handles (@mentions) are clickable. Same for #hashtags :-)
    Thanks for your feedback!
  • I love your smart brain! :)
  • Probably being really stupid here, but - what's a Twitter handle?
  • Oh... :) It's just a way we say "twitter profile name" [ @zaneology is my "twitter handle" ] It's a throwback to CB radio...the original voice social network... :)
  • Oh God, I really am having a "Doh" moment. Thanks for clarifying!
  • Hey, I was the one using 70's lingo...No worries. Nice to talk to you. :)
  • Ok, I think I've solved the large font problem - but you have to change font size in the code, adding back the step you'd saved with respect to Blackbird Pie.
    I've done a blog post comparing the Blackbird bookmarklet, Blackbird and Tweetshots, with embedded tweets by all three plus an email with embedded tweet courtesy of Tweetshots. It's at http://wp.me/pvG8C-qo
    Question: what's the correct term for these tools? Features, apps, workarounds or what? Thanks!
  • I've reduced the font-size from 18pt to 16pt. Should be much better now.
    Thanks for your feedback and your blog post, it's really cool.
    Don't know about the term. I would guess "Bookmarklet to quote a tweet" or "Shortcut to quote/embed a tweet"?
  • Blog up-dated to reflect yesterday's tweaks. Yes, the embedded tweets do look better - see example at http://wordstogoodeffect.wordp...
  • I'd call it a Tweetmarklet :D
  • Thanks for your comment on my blog post. I'll try your revised bookmarklet again and post about the up-dated version.
    Thanks again!
  • cross-posting my comment from TC...

    finally!

    i'll honorable mention an old side experiment of mine ;)

    2 years ago (this week in fact) i launched tweetshots.com to solve what seemed like an obvious lack of functionality on twitter.... you could not just easily share a tweet! I decided to take the screenshot approach. This was how bloggers were doing it already (manually) so it seemed appropriate. Plus, I liked carrying over the users surrounding background image as part of the screenshot. Also at the time I was using twitter and tumblr and i wanted to share tweets on tumblr....
    i.e. http://tweetshots.tumblr.com/
    when shared on tumblr (or via email) any links found in the tweet are extracted and displayed as hyperlinks while the tweet itself links to the actual tweet permalink.

    i actually ONLY provided a bookmarklet and not a direct page to use like blackbird. but you can figure out that this link can work if refreshed with a replaced tweet url added:
    http://tweetshots.com/bookmark...

    this little project has been running on its own unattended and i even forgot about it for several months :)

    blackbird looks cool. but the embed code is crazy long and complex and not nearly as simple as just embedding an image. but, it's also useful to have html as opposed to a static image. prob comes down to preference.

    i should update tweetshots... dusty!

  • You did a very good job! The good thing about an image is that you don't have to worry about the way it is presented. It will always be the same, that's a big plus.

    If you plan to update tweetshots, it would be great to offer a dead simple api:
    http://tweetshots.com/xdamman/... (ie. just replace twitter.com by tweetshots.com and append .png at the end, to be perfect xdamman/ and status(es)/ should be optional as the tweet id is unique). Feel free to contact me at xdamman at publitweet dot com
    We could also figure out a way to integrate that as an option in our bookmarklet. Food for thoughts!
  • Sean Turvey
    This is quite good. You could make it even better with a browser extension yo automatically add an embed link to each tweet. Hit the link to show the embedded version and automatically copy the code to the clipboard. This would bring it down to one step.
  • Very nice! I am going to list this bookmarklet in Twitdom - The Twitter Apps Directory right away.

    http://twitdom.com/
  • how to add to wordpress blog? I can not find any widget support this link, my blog http://techchurch.wordpress.co... can not do it. Any one can help me?
  • Hi. I've just tried Blackbird on my blog Words to Good Effect. http://wp.me/pvG8C-oH.
    I tried out tweetshots too but prefer Blackbird as your links within the tweet work (there's one to the NY Times and one to my Twitter page). The links in the tweetshots version all go back to my tweet. However the text in the Blackbird tweet is too big compared with the rest of the page. Any solution to that?
  • I just updated it and now the font size is smaller. Thanks for using it! (btw, no need to update the bookmarklet, it's automatic)
  • This is cool Xavier, thanks. But I still think the Blackbird code is too long and complicated, and it won't work on many pages that accept just simple HTML tags. I hope Twitter will work on a better version of the application, similar to the one used by tweetshots.com
  • tweetshost?? what is that? never used it before, could you tell more details how it works?
  • Just follow the link and see it!
blog comments powered by Disqus