Saturday, 8 August 2009 10:23 by
SyntaxC4
Ever find yourself wishing that your tweets could be easily displayed on your website? Surprisingly enough when I went looking for a tool to do this, there was a very slim selection. I wanted something that would be easy to use, had clean [html] code, and was easy to style with css so that I could have multiple looks and feels with very little code.
At first glance a twitter feed looks like it would be best represented as an unordered list or ordered list, item after item that contains a picture and some text. This is the practise that was found throughout all of the twitter feed tools I found on the web. However, I didn't agree with the (un)ordered list approach, I wanted more, I needed my tweets to have a title so I knew what they were about. After putting some thought into the possibilities and the benefits of different tags, I decided upon the definition list tag. With using the definition list keeping each of the elements can be styled easily as the title is a separate tag than the tweets.
 |
 |
I had been learning how to use jQuery for a while as it definately speeds up javascript development. What better way would there be to implement the ajax then using jQuery? Which lead me to think, what if I made this a plugin so I could quickly and easily display a list of tweets of all the different topics I tweet about. Thus, jTweetr was born.
Ok, Ok, I know what you're thinking, what's with all the back story.. GET TO THE CODE!
Anatomy of a jTweetr Call
Don't get scared, you don't need a Medical degree in order to use jTweetr. It's simple, There are just a few parts to it.
jQuery Selector: The jQuery Selector is how you identify the html element you wish to use as a container for the jTweetr Feed. jQuery has done an amazing job with this selector functionality. You are able to select any element on a page using CSS-Like selectors. Options like:
- #Container - For ID's
- .Container - For Classes
- #ContainerSpace > div - For any child div contained in an element with ID="ContainerSpace"
- more selelctors...
jTweetr Query: The Query is what you want to show up in your jTweetr feed. This is plan text with no special characters. Searching against users, hashtags, and more is covered in the next section. [the Query for the photo to the left is 'CoffeeAndCode']
jTweetr Options: This is what makes jTweetr so unique, Every aspect of jTweetr is customizable. You can change everything from the names of the CSS classes that are on the elements, to how many tweets it is to search for, to how long between requests to Twitter.
Options Overview
- [TweetTypes] SearchType
- Search (Searches for tweets containing a word in plain text)
- From (Searches for tweets from a particular user)
- To (Searches for tweets to a particular user)
- Mention (Searches for tweets mentioning a user [includes to and from])
- SearchHash (Searches for tweets containing a particular hashtag. [Default])
- AppFilter (Searches for tweets that were sent using a particular Twitter Client)
- [String] Title
- [Query] (A replacement token that subs in your Query text)
- [String] ListClass (CSS class placed on the DL Tag)
- [String] TitleClass (CSS class placed on the DT Tag)
- [String] TweetConClass (CSS class placed on the DD Tag)
- [String] TweetClass (CSS class placed on the DIV Tag which is wrapping the Tweet Text)
- [String] AvatarClass (CSS class placed on the IMG Tag which displays the users picture)
- [String] ProfileClass (CSS class placed on a link of to a Users Profile)
- [String] LinkClass (CSS class placed on a link in a tweet)
- [String] EvenClass (CSS class placed on even DD Tags)
- [String] OddClass (CSS class placed on odd DD Tags)
- [LoadingType] LoadType
- Text (Displays Text from the 'LoadObj' variable while the tweet feed is loading. [Default])
- Image (Displays an Image from the url in 'LoadObj' variable while the tweet feed is loading)
- [String] LoadObj
- LoadingType.Text (HTML Formatted Text)
- LoadingType.Image (URL to Loading Image)
- [String] LoadError (The Text that displays if an error occurs while requesting tweets)
- [Integer] NumResults (The number of tweets to get from the Twitter API. [Default=20])
- [Integer] FeedRefresh (The amount of time, in seconds, between API Searches. [MinValue=60])
- [String] Language (The two character language code for the Langage to search against. [Default='en'])
Future Features
If you see any places where jTweetr needs to be enhanced please comment on this post, and I will work towards implementing them. Here are some of the current ideas I have for enhancements.
- API Time Stamping - Getting the Time Stamp from the API will allow jTweetr to update only the most recent items, no longer refreshing the entire list.
- Themes - Currently there is only the Official jTweetr Look. Please don't feel as if you need to stick to it. I will eventually work on rolling out some themes for easy adoption into any website.
- CMS Modules - I will be working towards creating modules/plugins for the most popular CMS software so that jTweetr can be installed and configured in a CMS with little to no coding.
Downloads