Podcast Shout-Out

I’m sorry for the delay on my posts, and I should be working on the  Canadian Technology Triangle .NET User Group [CTTDNUG] MVVM Presentation post, which I also have open currently in Windows Live Writer (download here). However, I thought I’d take a few minutes to put this post up as I’ve been lucky enough to have a very special thing happen to me recently.

As some of you may be aware I enjoy seeking out and implementing best practice solutions into  the code that I write. So over the past year or so, I’ve been slowly catching up on podcasts on the topic.  The one that I enjoy listening to the most is The Polymorphic Podcast hosted by Craig Shoemaker from Infragistics. Craig is the New Media Evangelist and is constantly interviewing developers that have either been a part of the development team that is working on, or have worked extensively with, new Microsoft based Technologies.

Way back in April when I first signed up for twitter, I went through a list of key industry people that I wanted to be able to keep up with on a regular basis, and Craig was one of the first people on my list. If I ever neglected my RSS Feeds I knew that twitter would be a great resource to keep me up-to-date on emerging technologies. As my experience with twitter progressed, I began to leave my shell of “virtual stocking” my icons in the Development field, and actually providing input, and reaching out to them, to help or provide feedback on what they were tweeting.

Going about my duties at RKD Web Studios, I took a quick look at my twitter feed [Give Digsby a try] waiting for a page to render and sitting in my DM tab is a tweet from Craig Shoemaker himself. “Hey have you heard the latest podcast?”. So I head on over to http://www.polymorphicpodcast.com and check out the latest podcast on ASP.NET AJAX Preview 6 and checked out the new Fast-Feed [which if you’ve ever tried to work and listen to a normal speed podcast at the same time, you will begin to appreciate].  At the end of the podcast Craig gave a personal Shout-Out to me, thanking me for my support over twitter.  I was so excited, I literally got all the people in the studio listen to it.

If you’re interested in listening to Craig’s podcasts and screen casts [I can definitely recommend it!] check out these RSS Feeds:

How To: Using jTweetr plugin for jQuery

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 twitterfeed 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.

jQuery - Write Less. Do More.  

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!

jTweetr Design by @BlakeStevenson

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’])

jTweetr Code

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