Adding Twitter timeline to a Cotonti-powered website

A brief howto describing a way to add twits using JavaScript

This page is not translated yet. Showing original version of page. You can sign up and help with translating.

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.

 


2. esclkm  2011-06-04 08:15

Or you can use my free twitter plugin http://littledev.ru/news/cotonti/cotontifolio/twitter-bot.html

Tottaly customizible templates + auto add twits on new pages

Sadece kayıtlı kullanıcılar yeni yorum yapabilir.