De Valdez

This post will explain how to add a custom Twitter widget without all of the Twitter branding. Below you’ll see an example containing clean style-able markup without all the birds flapping around.

I’ve become a big proponent of Google hosted scripts as promise to keep them up to date and save you the hassle. And most of the time it will only cost you one small http request.

<script
  src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
  type="text/javascript">
</script>

After the script is included there are a number of options available.

• id: your screen name on Twitter, mine is “mrevd“
• count: number of twitters you want, defaults to 1.
• clearContents: if you have content in the container you may want to clear it. Defaults to true.
• enableLinks: true/false – scans the tweet for a link and makes it clickable, includes @replies and #hashtags, by default is true.
• ignoreReplies: true/false – skips over tweets starting with @. If requesting 1 tweet, and this flag is set, behind the scenes it will request 2 in case the first starts with @ – but if the 2 most recent are replies, nothing will be shown.
• template: the HTML template to use within each li element. See below for template variables.
• prefix: if not using a template, you can use this. Note that you can use template variables in this field.
• timeout: Number of milliseconds before triggering onTimeout. If onTimeout is set, timeout defaults to 10 seconds.
• onTimeout: Function to call when timeout is reached. Context is set to HTML element tweets were going to be inserted into.
• onTimeoutCancel: true/false – if not set, the timeout can trigger, but then the Twitter script could complete and override the cancel. To avoid this, set onTimeoutCancel = true. Defaults to false.
• newwindow: true/false – if set to true, all links in tweets (and otherwise) will open in a new window. Defaults to false.
• callback – Function to call when the twitter render is completed. Doesn’t fire if the script times out.

Some variables:

• text – the actual status message
• id – id of status message
• source
• time – relative ‘friendly’ time
• created_at – raw time
• user_name – real name
• user_screen_name – username
• user_id
• user_profile_image_url – avatar
• user_url – home page
• user_location
• user_description

Add a container:

<div id="twt">
 <p>Loading... <img src="/images/indicator.gif" /></p>
 <p><a href="http://twitter.com/mrevd">Too slow? Here's my profile.</a></p>
</div>

And the script

<script
 src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
 type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8">
getTwitters('twt', {
  id: 'mrevd',
  count: 3,
  enableLinks: true,
  ignoreReplies: true,
  clearContents: true,
  template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

All together, we have a nice widget sans branding ready for styling.