Posted: May 6th, 2010 | Author: Xavier | Filed under: hacking | Tags: embed, twitter | View Comments
With the Publitweet Blackbird bookmarklet we released yesterday you can grab any tweet on Twitter.com and embed a static HTML version on your site in no time.
Today we release a version for your site, to turn the tweets you have embedded, embeddable in turn!
Even better, people who will embed the tweet from your site will see that it comes from there as a source! How cool is that?
See an example:
How does the magic work?
Well you just have to add this line at the end of your page (typically in your footer, just before </body>):
<script src='http://publitweet.com/blackbird/javascript.js'></script>
I already have tweets displayed on my site, how can I make them embeddable?
Just add a link like this one: <a href="javascript:publitweetGetEmbedCode('http://twitter.com/xdamman/statuses/13407123815');">embed this tweet</a>
Alternatively you can also replace the tweet permalink with just its id (ie. the latest part of the permalink: ’13407123815′).
Posted: May 5th, 2010 | Author: Xavier | Filed under: hacking | Tags: blackbird, bookmarklet, embed, quote, twitter | 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!
- Copy the full URL of a tweet (e.g. http://twitter.com/xdamman/status/13405149731)
- Go to http://media.twitter.com/blackbird-pie/
- Click on the input text field
- Paste the URL
- Click on “Bake it”
- Click on the text area where the HTML code is created
- Select all text (press ctrl+a or cmd+a on a Mac)
- 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:
to your Bookmarks Bar. Now, getting HTML code to embed a tweet is as easy as 1-2-3:
- Go to the URL of a tweet (e.g. http://twitter.com/xdamman/status/13405149731)
- Click on the bookmarklet
- 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):
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