Written by:
2010/05/06 07:41 AM 

Using Blackbird Pie

Blackbird Pie is a tool that will take a particular tweet and create html that will represent that tweet in your blog. Along with the necessary links and gravatars etc.

Basically you copy the Tweet URL, go to blackbird Pie paste the tweet into the textbox. Bake it and viola you have your embedded tweet in some HTML.

It works wonderfully but does consist of a few steps. 9 to be exact.

1. Copy the full URL of a tweet (e.g. http://twitter.com/robertbravery/status/13441789020)
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 
8. Copy
9. Paste into your blog or website

This is what the html looks like:

<!-- http://twitter.com/robertbravery/status/13441789020 --> <style type='text/css'>.bbpBox{background:url(http://a1.twimg.com/profile_background_images/47375080/twitterback_igblue2.jpg) #709397;padding:20px;}p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px}p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6}p.bbpTweet span.metadata span.author{line-height:19px}p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px}p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox'><p class='bbpTweet'>Embedded Tweets <a href="http://bit.ly/dySxMg," _fcksavedurl="http://bit.ly/dySxMg," rel="nofollow">http://bit.ly/dySxMg,</a> what do you think<span class='timestamp'><a title='Wed May 05 18:55:25 +0000 2010' href='http://twitter.com/robertbravery/status/13441789020' _fcksavedurl='http://twitter.com/robertbravery/status/13441789020'>less than a minute ago</a> via <a href="http://www.hootsuite.com" _fcksavedurl="http://www.hootsuite.com" rel="nofollow">HootSuite</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/robertbravery' _fcksavedurl='http://twitter.com/robertbravery'><img src='http://a3.twimg.com/profile_images/63170375/me_normal.jpg' _fcksavedurl='http://a3.twimg.com/profile_images/63170375/me_normal.jpg' /></a><strong><a href='http://twitter.com/robertbravery' _fcksavedurl='http://twitter.com/robertbravery'>Robert Bravery</a></strong><br/>robertbravery</span></span></p></div> <!-- end of tweet -->

And this is what the Embedded Tweet looks like. Keeping in mind that it might not actually work in your environment. So you will have to test first.

Pretty snazzy I think. But possibly too many steps to take.

Using PubliTweet

The guys at Publiteet have created a nice little Toolbar Bookmark called Blackbird Bookmarklet. On their site they explain it all very clearly. But basically, you drag the bookmarklet link onto your toolbar. Then visit the Tweets URL and click the Bookmarklet toolbar item.

What you’re presented with is exactly the same as Blackbird Pie, but it takes fewer steps to get there.

1. Go to the URL of a tweet (e.g. http://twitter.com/robertbravery/status/13441789020))
2. Click on the bookmarklet
3. Copy
4. Paste

Using Carter Coles Script

Carter Cole has written a nice little script that you can plug into your blog and it will embed the Tweet for you. Now this is actually only one line of code. Much less steps. But you do have to have the script stored somewhere in order to cut and paste.

This is what the script looks like:

<span id="preserve98940e2d57694af8bec637b4a3d9aade" class="wlWriterPreserve"><script src="http://cartercole.com/embedtweet.asp?tid=13441789020"></script></span>

Basically you past the above script into your blog post source, then just replace a few parameters. Most important is the ‘tid’. This is the unique ID of your tweet.

Carter has also provided a method to use an iframe instead if you so choose. Read more about it on his blog at Embed Tweets into a blog.

This is what the embedded tweet will look like

Both the above methods give you the ability to interact with the embedded twee as you would normally do on the Twitter home page.

Downside

There is always a downside isn’t there? The major one is that there will be extra work that needs to be done. But you’re not afraid of work are you?

The Blackbird Pie version creates a little more extra HTML for you, but the beauty of this method is that it is raw HTML and not a script requiring a call back to some server or something. So if that server goes down or the tweet is deleted then you still have the original embedded in your post.

Carter’s script is a lot more streamlined, only one line of code. But it requires a call back to a server. This could slow your web page down!

Then there is the embedded URL in the Tweet. If the tweet make use of any URL shortners then these could possible expire after a given period of time. Making the link useless. I suppose you could extract the long link. But then that’s more work.

Then there is always the cut and past method where you cut and past the actual tweet from Twitter. But then you could actually alter that tweet and even not give credit.

Many have been taking screen shots and posting the particular tweet as an image. But then there is no interaction. No live links etc.

I guess the choice is yours. Which one do you prefer?

Remember you can win a weeks worth of free ad space just for commenting. The best comments during the week will get a weeks free advertising space. Check out: Win free advertising for your blog

New here, or perhaps you've been here a few times? Like this post? Why not subscribe to this blog and get the most up to date posts as soon as they are published.

Get involved in our community. Help promote other bloggers. List your blog in our directory for bloggers. Blog Directory for Bloggers

TrackbackPrint

Tags:

Categories:

Location: BlogsThe Brave Programmer