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.

Comments
If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
Required fields are marked with *.
Showing comments 1 to 10 of 19 | Next | Last
Comment

19

ignore previous post jan Wed July 14, 2010, 10:41:29

I just re-read your last paragraph again and altered:
return substr($output,10);

to suit my needs.

Thanks again

Comment

18

Underscore in twitter URL issue jan Wed July 14, 2010, 10:39:00

Thanks for this it's great.

My twitter ID has an underscore in it and i'm seeing the last 3 characters after the underscore at the start of my tweets...how do i fix this?
I'm assuming i need to change something in the phx:twitterstrip snippet?

Thanks again

Comment

17

Help! cc99 Thu July 08, 2010, 02:59:53

Ooops, this is embarrassing! It would probably help not to have a gazillion tabs open in my FTP program and then upload the FeedX folder to the wrong MODx site ... forget my earlier entry please! Thanks for your great tutorial (even if I didn't follow it ....)

Comment

16

Help! cc99 Wed July 07, 2010, 17:10:37

I've done something wrong obviously because I don't get the feed but only see the following line:
FeedX: : ...myserverpath.../assets/snippets/FeedX/classes/feedx.class.inc.php

Am clueless about PHP I'm afraid, so any help is really appreciated as this seems to be exactly what I'm looking for. Tried Twitter Feed 1.0 but ended up with parsing errors, so am hoping that this tutorial here can sort me out. Thanks!!

Comment

15

thanks! raabe Thu May 13, 2010, 02:09:39

thanks for this tutorial, another great dog paw;) i got the twitter status working, but have problems with the twitter API and its rate limit. while reading through your tutorial i saw your twitter status hiding time by time, maybe due the same reason? any ideas how to workaround ?

Comment

14

Re: How to add a custom Twitter status to MODx Javier Fri April 30, 2010, 17:51:36

i have 2 accounts:
1= username
2= _user_name_
and I use the following urls for the FeedX:

http://twitter.com/statuses/user_timeline/username.rss

http://twitter.com/statuses/user_timeline/_user_name_.rss

the URl that has the 3 extra underscores at the beginning, between and at the end gives me an error:

Error: file_get_contents(http://twitter.com/statuses/user_timeline/_user_name_.rss?count=3) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 401 Unauthorized
Error type/ Nr.: Warning - 2
File: E:\hshome\useracct\domain.com\assets\snippets\FeedX\classes\feedx.class.inc.php
Line: 291
Line 291 source: $xml = file_get_contents($this->config['url']);

any ideas why?

Comment

13

@Noize Tue Tue April 06, 2010, 11:24:36

Same here...

Comment

12

How to add a custom Twitter status to MODx Henry Hoffman Fri February 26, 2010, 11:45:22

This is impeccible. Thanks so much for taking the time to do this.

Comment

11

Re: How to add a custom Twitter status to MODx Noize Fri January 15, 2010, 16:37:09

Hello,
i dont know why but i see only the ยป link. Not the tweettext.
Any Idea whats the reason is ?

Tnx

Comment

10

Thanks! Phill Wed January 13, 2010, 06:33:17

Thanks very much for this, I never comment, but really appreciate you sharing this so thought I would :)

Showing comments 1 to 10 of 19 | Next | Last
logoLeaving tracks across the web.