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:
[blackbirdpie id=”66835851316957185″]
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.
As a WordPress developer I can see a potential issue with using blockquote. So many themes have different ways of displaying blockquotes that it could be an issue. I’m sure a competent developer could sort that though.
Still, I agree with all your suggestions and I’d love to see them added to the plugin.
One more I’d add is that instead of requiring users to strip the ID from the URL, the plugin should allow the following;
A simple regex can strip out the ID, making it much easier for the user. The EasyTube plugin works in a very similar way.
Hi Phil,
Thanks for the comment.
The add-on already does allow for using the full URL instead of only the ID, just as you suggest; I should have mentioned that.
Display issues with BLOCKQUOTE can be overcome with !important styles in the CSS (or inline). After all, BLOCKQUOTE is just an element, like any other.
Hi Andy
Firstly, thanks for using the plugin and thanks for the kind comments. Secondly, thanks for the great suggestions. I will look into each and every one for the next release of the plugin which should be released in the coming weeks. One of the major changes in the next release is the ability to choose a different look and feel for your pies: “original”, “twitter-style” or “mini” – check out this screenshot for an idea : http://themergency.com/wp-content/uploads/2011/05/blakcbirdpie.png
If you are interested in helping out with the dev, then please let me know as I would love some help.
cheers
Brad
Here’s something else the plugin could do: triple tag posts with status IDs, as I blogged two years ago today.