graphicpush

I’ve been doing some work around the site lately, and one of the biggest things I wanted to accomplish was to better represent my recent twitter activity. This led me down the path of investigating some TXP plugins versus more common jQuery client-side integration.

Shorten Your Textpattern URLs

URL shortening services are the scampering homeless offspring left behind by the wave of social media fraternizing. There are plenty to choose from, and if you’re feeling frisky, you can even roll your own with a little PHP and MySQL. But thankfully, the clever Textpattern plugin smd_short_url weaves magic for those like me who can’t even spell PHP.

So. Step one. Grab smd_short_url and install it. That’s it. Now any article can be accessed by its ID alone, so www.myfunnycatvideos.com/lulz/oh-my-god-my-cat-iz-so-funnee becomes www.myfunnycatvideos.com/26. Instant URL shortening, and the plugin handles all the 301 redirecting on the fly.

(Oh, and we should all be using canonical URL references in our metadata regardless of whether we’re shortening the URLs. They are pretty darn easy to implement.)

Add a Tweet This Link in Textpattern

Like the clone-driven music industry, the web 2.0 developer world has not been able to control itself with its endless derivative social media networks. Between Orkut and Buzz and Ma.gnolia and Jimmy-Crack-Corn-who-knows-what-else, we could theoretically add a gajillion ADD THIS buttons to our blogs.

There are few that have any kind of real gravity on the interwebs, but Twitter is one of them. So you need to add a simple link to enable people to quickly reference the page to your “funny” cat video.

Part 1: Create a Simple “Tweet This” Link

The Twitter link structure is simple, with only one variable to worry about:

http://twitter.com/home?status=foo

We just need to replace “foo” with whatever you want to insert into the visitor’s “status” box when they visit twitter.com/home. For instance, this is what I am using:

<a href="http://twitter.com/home?status=Reading:%20
   <txp:title />%20at%20<txp:site_url /><txp:article_id />" 
   id="twitter">Post to Twitter</a>

Pretty simple. Just make sure to use <txp:site_url /><txp:article_id /> instead of <txp:permlink /> to take advantage of smd_short_url.

Part 2: Display Number of Tweets

If you want to take this one step further and actually show how many people have tweeted about a link, you can add this slice of jQuery to the end of the page:

<script type="text/javascript">
   $(document).ready(function() {
      url = "<txp:permlink />";
      beforecounter = " <span>[";
      aftercounter = "]</span>";
      $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&callback=?',
         function(data) {
            $('#twitter').append(beforecounter + data.story.url_count + aftercounter);
         });
   })
</script>

Just make sure your link element has the ID of “twitter” so the count can be appended. For more information, and for comparable code for Digg and del.icio.us, this article is pretty useful.

Embedding Recent Tweets in a Textpattern Page

There is no shortage of ways to add a list of recent Twitter posts to a page. A dozen or more jQuery solutions alone are floating around, some of them surprisingly advanced in their customizable output and number of hooks into the API. These are all fine and good, but anything JavaScript requires work on the client side, which means more to download, more HTTP requests, and overall slightly longer loading times.

There are two plugins for this job. kml_twitter is a more mature, far more robust option with lots of ability to customize. arc_twitter is more barebones, with not nearly as many ways to style. From my testing, kml_twitter is the more solid option all around; as an example, it renders direct hashtag links to search.twitter.com and handles URL parsing more accurately.

Both are powerful, elegant solutions that tie TXP and Twitter together on the admin side, so tweets are rendered server-side before they hit the page. No JS calls, no dynamic content insertion — just HTML. In fact, tweets are even cached, which reduces the number of times the system has to booty call Twitter’s servers.

More Fun With Plugins

arc_twitter does two more important things: it allows you to administer your Twitter stream right from Textpattern, and adds a small widget to the article page that enables you to post directly to your stream. (mem_twitter is a dedicated plugin that also does this latter bit.)

And finally, to indulge our vanity, jrh_twounter is a dead-simple plugin that grabs your follower total. Like arc_twitter, this plugin makes the magic happen on the server side, so it’s far more efficient and transparent than client-side scripts.

Everything Else is Outside the Box

There are jQuery scripts to render hashtag streams, your friends’ streams, streams from lists, streams for migrating salmon and pretty much any other kind of stream you can think of. There are also scripts that tap way deeper into the API than is really polite, but we don’t talk about those at the dinner table. And of course you can hand-roll your own PHP funness if you’re so inclined. Which I’m not. If yr dum like mee, grab these sweet plugins and let them do the lifting for you.