• Home
• Portfolio
• Notebook
• Development
• About
• Contact

How to add a custom Twitter status to MODx

When going through the process of updating my site I decided to add my Twitter status to the sidebar. I searched around and looked at some of the available widgets; but I didn't find anything I really thought fit with my site. I really wanted something I could customize to my liking. So I decided to create my own custom Twitter status widget. So if you want something similar for your MODx site, just follow this tutorial and you will be up and running in no time.

1. Install FeedX

   The first thing you need to do is get the snippet FeedX (MODx Forum Post). FeedX is a great snippet that can be used to read-in, parse, and render just about any kind of XML data. It also has a built-in caching mechanism, so you won't blow your access quota on Twitter.

2. Setup FeedX Call

   With FeedX installed you are ready to get it setup with your Twitter feed. If you want to find more on the api for Twitter, go here: Twitter API. We are going to be using the REST API to pull in the 3 most recent Twitter statuses. The url for this looks like the following: http://twitter.com/statuses/user_timeline/user_name.rss?count=3 you will replace 'user_name' with your Twitter username. You then need to setup your FeedX snippet call with this url:

   [!FeedX? &url=`http://twitter.com/statuses/user_timeline/user_name.rss|xq|count|xe|3`!]
   

   Notice that the url has some changes, in FeedX the following changes to urls must happen:

   • ? => |xq|
   • & => |xa|
   • = => |xe|

   This is required due to how MODx parses a snippet call. If you do not change these characters the snippet call will not work correctly. This will actually get your data to your site, but now we need to customize the output.

3. FeedX Templates

   To get the custom templates up and running I set the debug parameter to 1 and looked at the example templates to get going. Templating in FeedX is pretty straight forward and is very flexible. I created a set of templates which can be downloaded in the sidebar. In the zip file, there is a folder named twitter containing many .tpl files. Extract this folder into your FeedX templates (tpl) directory i.e. /assets/snippets/FeedX/tpl. When you have added this folder change your snippet call to reference the new template:

   [!FeedX? &url=`http://twitter.com/statuses/user_timeline/user_name.rss|xq|count|xe|3` &preset=`twitter`!]
   

   The main template that does most of the heavy lifting is item.tpl:

   <div class="tweet">
     [+DESCRIPTION:twitterstrip+] <a href="[+LINK+]" title="twitter status">&raquo;</a>
     <span class="tweetdate">[+PUBDATE:twitterdate+]</span>
   </div>
   

   In this template each Tweet is geting generated from the RSS feed. I decided to wrap the Tweets in a div with the class name 'tweet'. The description is the full text of your Tweet from the RSS feed. I am using PHx to do a little magic here (see below). The link is a link back to Twitter for this specific Tweet. The pubdate is the date/time that the Tweet occurred. Again, I am applying a PHx modifier here to make it look nice. You can customize this template however you like to generate different markup. Here is the order that the templates in the twitter folder get processed: outer->inner->channel->item.

4. PHx Additions

   To customize the data being retrieved from Twitter I am using two PHx modifiers. PHx allows you to take the data for a given tag do anything you want to it via PHP and return it back to the snippet.

   • phx:twitterdate

     The twitterdate modifier converts the tweet date and turns it into a nice readable format showing how long ago the tweet occurred. Instead of writing my own code for this I searched the web and found a few good resources. First I came across this post by John Resig: Javascript Pretty Date. This is exactly what I needed, just in the wrong language. So I thought of converting it, but prior to that did another search and came across this post by Zach Leatherman: PHP Pretty Date. This is a conversion of Johns script into a PHP class, perfect.

     So I took this class and modified it to be a simple PHP script that I could plug in to a MODx snippet. The code from this snippet is in the file phx_twitterdate.php included with the download. To install this modifier, create a snippet named phx:twitterdate and paste in the code from the file. The modifier is already being called in the template item.tpl, so your output should change on the next refresh. One caveat, this will only work in PHP 5.1 and greater. I'm sure you could modify it to work in earlier versions, I just did not have a need to do so.

   • phx:twitterstrip

     The twitterstrip modifier does multiple things:

     • Removes your username from the front of the tweet.
     • Makes all twitter usernames (i.e. @kjaebker) links to the user on Twitter.
     • Makes all links clickable.
     • Makes all hashtags links to Twitter search.

     All of this is done with the 4 lines of code listed below. The code from this snippet is also in the file phx_twitterstrip.php included with the download.

       $search = array('|(http://[^ ]+)|', '|@([\w_]+)|', '|#([A-Za-z0-9-_]+)|');
       $replace = array('<a href="$1">$1</a>', '<a href="http://twitter.com/$1">@$1</a>', '<a href="http://search.twitter.com/search?q=%23$1">#$1</a>');
       $output = preg_replace($search, $replace, $output);
     
       return substr($output,10);
     

     The main thing to point out is the last line. This line removes your username from the tweet. My username is 8 characters long, there is also a ': ' in the description that we want to remove. So I remove the first 10 characters from each tweet. So when adding this snippet be sure to change this line to meet your needs. To install this modifier, create a snippet named phx:twitterstrip and paste the code from the file. Set the correct substring length, save, and you should be good to go.

One other thing to note about FeedX, the default cache time is 15 min. So if you are a very heavy user of Twitter and want your status to update more often, set the snippet parameter cacheTime to something smaller (number of seconds).

This should get you up and running with your own customizable Twitter status, Enjoy.

Leaving tracks across the web.