Tweeter v1.0 – simplifying Twitter and Actionscript

August 20th, 2009 posted by The Hippy
Add comments

Tweeter

If you want to add a Twitter feed to your flash website, currently the best way to do it is to pay a visit to Matt Pearson’s (Zenbullets) Twitter API explanation and buckle down to the code. However if like me you are finding your clients increasingly requesting Twitter feeds in their sites, perhaps you’ll appreciate my new Tweeter class for ease of re-use.

Try it out:

This movie requires Flash Player 9

It’s based around Matt’s explanations and centres on drawing a single tweet from a single user (using the API’s “status” call). All I’ve done in my clumsy ham-fisted way is to simplify it for anyone who either doesn’t have the time to learn it or simply can’t be bothered. Now all you have to do is use something like the following code for it be up and running in seconds…

var t:Tweeter = new Tweeter();
t.proxy = "http://www.yourdomain.com";
t.user = "bbcbreaking";
t.getTweet();
addChild(t);

I’ve added a few other customisable options (which I will explain in a moment), but something like the above will have it working for you in seconds. Here’s a quick explanation of the above before I show you what else you can do with it…

t.proxy
As Zenbullets explains in his blog post, Flash and Twitter have cross-domain issues. So in order to bypass this you need to run a simple PHP file. I’ve included this file with the rest of the example files. All you have to do is upload it to your server and point t.proxy at the file’s location, as in the example above. Please ensure that you add “http://” at the beginning and you DON’T put a “/” at the end – Tweeter will do the rest. Please note: Tweeter will not work without this file.

t.user
This is simply the user name of the Twitter feed you want to pull. eg. if your Twitter page is “http://www.twitter.com/flashguru20″, the user name is “flashguru20″. If you forget to add this line it will default to The Burned Out Hippy’s Twitter feed.

t.getTweet()
When you’ve finished mucking around with the style (I’ll get to that in a minute), use this line to trigger Tweeter into action.

There are also a couple of other bits and bobs that you should know about that will allow you to style the tweet to your heart’s content. These are as follows (and should be added before the getTweet trigger):

t.picture = false
This will turn off the user’s profile picture. Currently the picture aligns to the left of the tweet. In the future I may adapt this so as to allow it’s location to be top, bottom, left and right – but as I don’t need to yet, I haven’t. So if the user pic isn’t fitting in with your styling of the text or simply isn’t to your liking, use the above line to turn it off.

t.loader
I imagine this is a bit naughty, but as I’m not fully AS3 conversant yet this is the only way I could achieve what I wanted to achieve. “loader” is quite simply the main URLRequest that calls the proxy PHP file to get the tweet. I’ve left it public in order for you to be able to add your own event listeners to it – so if you want to add a loading animation you can. I may close this back to private at a later date if my knowledge catches up and I find myself horrified at my own code (likely).

t.tweetField
This is the tweet’s textfield. Again, a bit naughty methinks, but it’s a means to an end. I’ve purposefully left it public in order for you to be able style the text to your heart’s content.

For example, to give the tweet a background colour and change it’s width you should do something like the following:

t.tweetField.background = true;
t.tweetField.backgroundColor = 0xeeeeee;
t.tweetField.width = 280;

You can also style the text field using a style sheet. The time and date are wrapped in a h1 tag and the main text is wrapped in a p. If you decide to use my CSSLoader class, all you would have to do is create a simple stylesheet and then type something like the following:

var cssLoader:CSSLoader = new CSSLoader(t.tweetField, t.tweetField.text, "http://www.yourdomain.com/tweetStyles.css");

I’ve included as much as I can in the example files so that you can get up and running as quickly as possible. Please make sure that you preserve the folder names of my classes or else nothing will work for you. Please also note that Tweeter uses my FindURL class, so don’t delete it by accident!

**************************************************************

You can download Tweeter and the other classes here
You can download the examples here

**************************************************************

I hope it’s useful to someone out there. I’ll be working on a multi-tweet version next (for multiple tweets from a single user) and possibly a keyword search version after that. If you’d like to see something particular changed or added to this version, please do let me know by leaving a comment below.

Cheerio!