Documentation / Quick help & how-to's / Adding Twitter timeline to a Cotonti-powered website

Adding Twitter timeline to a Cotonti-powered website

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:

HTML

1	`<script` `src="<a href="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"` `rel="nofollow">http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js</a>" 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:

HTML

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

#4. 4. Styling

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

HTML

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