Adding Twitter timeline to a Cotonti-powered website

Using JavaScript to add your Twitter timeline to a Cotonti-powered website is an easy and simple job even for a HTML rookie. The whole thing will take you around 15 minutes and will require nothing more than some simple operations with you theme/skin.

First off, we need to:

#1. 1. Include necessary JavaScript files

For the testing purposes I chose TwitterJS:

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

This string shall be added to the header.tpl within the head block.

#2. 2. Add JavaScript code with parameters

Basically, there are 2 parameters: twits div ID and the output settings:

	getTwitters('myTwits', {
	id: 'cotonti',
	count: 5,
	clearContents: true,
	enableLinks: true,
	ignoreReplies: false,
	withFriends: false,
	template: '%text%',
	prefix: '',
	timeout: '10',
	onTimeout: '',
	onTimeoutCancel: false,
	newwindow: false,
	callback: ''
	});

Brief explanation of the settings:

• id -- your Twitter name
• count -- number of twits (defaults to 1)
• clearContents -- clear content of the container (if any, defaults to true)
• enableLinks -- clickable links (including @replies and #hashtags, defaults to true)
• ignoreReplies -- ignore @replies
• withFriends -- show twits of the followers (defaults to false, disabled for now)
• template -- HTML-template within the li list item (see variables list below)
• prefix -- simle template replacement, i.e. 'I said: '
• timeout -- number of milliseconds before triggering onTimeout
• onTimeout -- function to call when timeout is reached
• onTimeoutCancel -- if not set, the timeout can trigger, but then the Twitter script could complete and override the cancel (defaults to false)
• newwindow -- open links in new window (defaults to false)
• callback -- function to call when the twitter render is completed (doesn't fire if the script times out)

Template variables shall be wrapped in %'s. These are pretty much self-explanatory:

• text
• idstr
• source
• time
• created_at
• user_name
• user_screen_name
• user_id_str
• user_profile_image_url
• user_url
• user_location
• user_description

#3. 3. Adding container for the twits

This should look like:

	<div id="myTwits">
	<p>Loading twits <img src="./skins/{PHP.skin}/images/indicator.gif" /></p>
	<p>Use <a href="http://twitter.com/cotonti">this link</a> to read my twits</p>
	</div>

#4. 4. Styling

Unless you used the template setting, the output HTML-code should be:

	<div id="myTwits">
	<ul>
	<li>
	<span class="twitterPrefix">I said: </span>
	<span class="twitterStatus">Join up with our discussions at cotonti.com!</span>
	<span class="twitterTime">20 minutes ago</span>
	</li>
	...
	</ul>
	</div>

Use this pattern to define styles for your Twitter timeline.