Modern Software Experience

2010-05-07

Twitter

quoting tweets

According to TwitterMedia, Tweets are the new quotes, but to quote tweets, you should not copy & paste images. Their follow-up post Fresh-baked tweets for your posts introduces their new Blackbird Pie tool; just enter the URL for a tweet, and it will generate HTML that you can copy and paste.

accessibility

TwitterMedia is right that an image is a poor way of quoting a tweet. An image is not accessible like a real quote is; unless you add the text of the quote in a HTML attribute for the image, visitors that rely on text will not be able to read it.

Blackbird Pie

After posting this article to my site, I tweeted to alert my followers to the new content:

2010-05-07 14:14:36 TamuraJones #twitter #HowTo Embedding Tweets: TwitterMedia Blackbird Pie shows how not to http://bit.ly/twembed

The URL of this tweet is http://twitter.com/TamuraJones/status/13550851008

Using Blackbird Pie is simple; paste that URL into the edit box, and then hit the Bake It button. Blackbird Pie then generates some HTML you can use on your own site, and shows you what it looks like. It shows the result immediately below the edit box, and the HTML you can copy & paste below that.

Blackbird Pie

There are several reasons why you should not use that code. I have not provided a live example of the Blackbird Pie code on this page, but you are not missing out on anything; the screenshot of the Blackbird Pie page shows you what it looks like.

HTML code

This is the HTML code shown in the image, with some line breaks added for readability:

<!-- http://twitter.com/TamuraJones/status/13550851008 -->
<style type='text/css'>
.bbpBox
{
background:url(http://s.twimg.com/a/1273181936/images/themes/theme1/bg.png) #9AE4E8;
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'>
<a href="http://twitter.com/search?q=%23twitter" title="#twitter" class="tweet-url hashtag" rel="nofollow">#twitter</a>
<a href="http://twitter.com/search?q=%23HowTo" title="#HowTo" class="tweet-url hashtag" rel="nofollow">#HowTo</a>
Embedding Tweets: TwitterMedia Blackbird Pie shows how not to <a href="http://bit.ly/twembed" rel="nofollow">http://bit.ly/twembed</a>
<span class='timestamp'>
<a title='Fri May 07 14:14:36 +0000 2010' href='http://twitter.com/TamuraJones/status/13550851008'>less than a minute ago</a> via web
</span>
<span class='metadata'>
<span class='author'>
<a href='http://twitter.com/TamuraJones'><img src='http://a3.twimg.com/profile_images/269895049/Twitter_Greened_normal.png' /></a><strong><a
href='http://twitter.com/TamuraJones'>Tamura Jones</a></strong><br/>
TamuraJones
</span>
</span>
</p>
</div>
<!-- end of tweet -->

images

broken links

The above code links to two images; the background image and the avatar. Both are located on twimg.com. The images are not copied to your site. If these images are ever removed, moved or renamed, if the directory structure changes or twitter stops using twimg.com domain, the link will break. When the twitter account is deleted, the links will break. Realistically, the question isn’t whether the link will break, but merely when the link will break.

Those links will break. Perhaps the link to the tweet will break too, but the link to the tweet itself is essential, while the background image and avatar are superfluous extras. Whenever they are important, you probably want to take a screenshot for full effect.

remote loading

Those links will break, but those links may stop working even before they are really broken. When you use this code on your site, you are remote loading those images from twimg.com.

If twimg.com is down, loading the images will fail. If you had copied the images to your own site, they would always work.

If twimg.com is overloaded, loading the images will be slow. If you had copied the images to your own site, loading speed would be under your own control.

Use of the background image is inefficient too. Although the embedded tweets shows only a small part of the background image and always show the same small part, this code always loads the entire background image. A cropped image would be smaller. A cropped image with a white rectangle in the centre would be smaller till.

Last but least, remote loading is frowned upon because you are siphoning someone else’s bandwith. Twitter may allow you to load those images from twimg.com today, but they can decide to limit your bandwidth or even block your access at any time.

embedded style

The Blackbird Pie code starts with an embedded style sheet. It is great that they use CSS to style the content., but this particular code is not so great at all.

The biggest issue is that the style sheet is embedded in the code. The decision to do so allows Blackbird Pie to offers a single block of ready-made code, but that is the only advantage, and there are multiple, serious disadvantages.

One disadvantage of embedded style sheets is size. It’s nice that you can copy & paste the code, but if you embed three tweets that way, you’ll be including that style sheet thrice. Embed twelve tweets, and you’ll be including the same style sheet a dozen times. That’s wasting your bandwidth.

A problem with this particular style sheet is the use of pixel sizes. Whenever possible, sizes should be expressed in em, not px, so that the actual pixel sizes automatically adapt to the font size.

Another problem with copying and pasting the same style sheet whenever you embed the tweet is that all those copies of the style sheet become a maintenance nightmare. The Blackbird Pie has a TO DO note about a few things that should be improved. Once those improvements are made, you will probably want the already embedded tweets to take advantages of those improvements - and the only way to do so will be to update each one of them.

conclusion

Blackbird Pie is a nice idea. I wouldn’t mind a macro that generates the code for including a tweet from just the tweet URL, but it is the worst possible execution of that idea. TwitterMedia manages to do everything wrong.
If you use Blackbird Pie code, you’ll  turn your site into a maintenance nightmare of broken remote loading links and badly written styles hidden in embedded style sheets. TwitterMedia should be ashamed that they ever posted this and take it offline.

replacing Blackbird Pie

style sheet

If TwitterMedia were to develop a new tool as a replacement for the Blackbird Pie disaster, the most important thing would be to offer and use an external style sheet. Users would have to copy and include that style sheet just once. The code they for each individual tweet would be a lot smaller and easier to understand. Best of all, when a new, improved style sheet becomes available, users will not have to search through their code to update each and every tweet, but will simply replace the style sheet and be done.

style

The style sheet itself should use expressed in em, not px. Whether the code should include browser-specific styles at all is debatable, but if it includes browser-specific code, it should do not just support Mozilla and WebKit, but Opera and Konquerer too.

images

Background images are not very important, but if they are included, they should be handled smartly, to reduce bandwidth demands. I’ve been using a tweet style without avatars for one and a half years now, but most users will want to include the avatar. To avoid all remote loading issues, the avatar should be copied to the user’s own website, and the tool should make it easy to do so.
Avatars can be quite large, can be in one of several image formats, and have a user-chosen file name. It would be nice if the tool offered a resized image in PNG format PNG (the web standard), using the twitter name as a file name.
If the tool were an an extension to your web developer or blogger environment, it could even automatically copy that file to an avatar directory, even provide built-in support for the fact twitter users can and do change their avatar over time.

tweet sequence

The style sheet should handle a tweet sequence, a series of quoted tweets, smartly. Tweet Style discusses show that can be done with a .tweet + .tweet rule.

smart short linking

Most users will not want to every hashtag to link to a twitter search, but this could be provided as an option. Whether the user name or avatar is linked to the twitter profile could be an option too.
However, the most important option would be to incorporate my smart short linking technique, as discussed in Tweet Style; show the original tweet text, but use the original link. Use the short link as the title, but use the original long link as a link. That removes dependence on the link shortener. A free bonus is that saves the reader from framejacking link shorteners such as ow.ly and su.pr; it allows perfect quoting of framejacking tweets without engaging in framejacking yourself.

For the tweet about this article, it looks like this:

<p class="tweet">
<a href="http://twitter.com/TamuraJones/status/13550851008"><span class="datetime">2010-05-07 14:14:36</span></a>
<span class="username">TamuraJones</span>
#twitter #HowTo Embedding Tweets: TwitterMedia Blackbird Pie shows how not to <a href="https://www.tamurajones.net/TweetStyle.xhtml">http://bit.ly/TweetStyle</a>
</p>

updates

2012-05-18: Blackbird Pie no more

Late in 2011, Twitter was updated to support embedding. The Blackbird Pie service was terminated some time later.

2012-05-18: Twitter breaks links

Late in 2011, Twitter has broken the links to their Tweets are the new quotes and Fresh-baked tweets for your posts blog posts. The broken links have been removed.

links

 

Copyright © Tamura Jones. All Rights reserved.