I’ve just started using the “Twitter Blackbird Pie” plugin to embed tweets into WordPress posts (I use the self-hosted wordpress.org package). You can see an example below:
It’s fantastic — no more taking screen captures, cropping and uploading; or faffing about manually constructing links. All I have to do is include the magic code [blackbirdpie id="66835851316957185"] with the ID of the tweet (in the above example, taken from http://twitter.com/pigsonthewing/status/66835851316957185) as the id parameter value.
However, there are a few ways in which the plugin could be improved.
hCard microformat
Firstly, add an hCard microformat to emit details of the cited tweeter as metadata, by changing, for example (inline styles omitted for clarity):
<div><a href="http://twitter.com/intent/user?screen_name=pigsonthewing">@pigsonthewing</a><div>Andy Mabbett</div></div>
to:
<div class="vcard"><a class="nickname url" href="http://twitter.com/intent/user?screen_name=pigsonthewing">@pigsonthewing</a><div class="fn">Andy Mabbett</div></div>
with the addition of three class attributes: “vcard”; “nickname URL” and “fn”.
Citation
Next, instead of wrapping the contents of the tweet in a span, wrap it in a semantically-appropriate blockquote element, by changing:
<span>Blogging about a Blackbird.</span>
to:
<blockquote cite="http://twitter.com/pigsonthewing/status/66835851316957185">Blogging about a Blackbird.</blockquote>
and styling to maintain the current visual presentation.
Separating links
When viewed with CSS disabled, the tweet’s actions (“Reply”, “Retweet”, “Favorite”) run into each other.
To improve accessibility and usability, either add white space between them, or, better, mark them up as a list, styled to display in-line, unbulletted, again looking like they do at present.
White space
There is more white space above then below the embedded tweet, above. A little more padding below it would improve readability.
COinS
Finally, consider adding COinS mark-up, so that details of the cited tweet are emitted as metadata.
Invitation
I hope the authors of the plug-in, Themergency.com, will appreciate and act on these suggestions. I’ll be inviting them to read and comment on this post. And I’ll be happy to help with developing any of the ideas suggested above.
