The other day I was working on a small project of mine, and it doesn't use a content management system such as wordpress or joomla. Its just all html and css to style the pages. So i wanted to display my last tweet from twitter, and jazz it up using css. Now when people usually want to display their last tweet, and are running wordpress, they usually just install a plugin to do it for them.
Now remember my site is only html and css. So i looked into the Twitter API, and found a way you can display your last tweet using the twitterCallback javascript function. I have summed it up in a few easy to follow steps. And its hardly any code at all! (icon by dryicons)
Step 1:
First, decide where about on your page you want your last tweet to display. Then paste in this line of HTML.
| <div id="twitter_update_list"> </div> |
Step 2:
Next you need to put these 2 lines of JavaScript below the code in step 1. On the 2nd line of code where it says 12345.json, you need to replace 12345 with your twitter username. So mine would be Andy92.json.
| <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"> </script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&;count=1"> </script> |
Now you will have a plain text version of your last tweet being displayed. So simple! Continue reading below to find out how to style your little twitter widget using CSS, and even customize it by playing around with some of the Twitter API Parameters.
(optional styling)
Of course all webdesigners should perform some sort of styling to their last tweet, to jazz it up a little. At the moment your last tweet is displayed as a bullet list. To remove this and make it pure plain text, put this in your CSS Stylesheet.
| #twitter_update_list li { list-style-type: none; } |
Then, you can change the colour of the main tweet text. If I wanted to make the text orange and then background black, i would put…
| #twitter_update_list span { color: #FFCC00; background: #000000; } |
Then you can style the links within your last tweet, and style when happens when you hover over them. An example would be the following.
| #twitter_update_list span a { display: inline; color: #000000; } #twitter_update_list span a:hover { text-decoration: underline; color: #666666; } |
I have styled mine using CSS, and come out with something that looks like this…
You can play around with the css, and what you want your widget to look like.
(optional customization)
Twitters API is very big. You can play around with many of the different settings for the twitterCallback function. You can view the api documentation over at this link.
| http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-statuses-user_timeline |
Enjoy!
More Web Programming: 
