Adding Twitter timeline to a Cotonti-powered website

A brief howto describing a way to add twits using JavaScript

Эта страница еще не переведена на русский. Отображен оригинал страницы на английском языке. Вы можете зарегистрироваться и помочь с переводом.

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  04.06.2011 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

Добавление комментариев доступно только зарегистрированным пользователям