Download latest Twitter

0
11

Following on from how to add Twitter without hanging your blog, as requested, here is a step-by-step guide to adding Twitter to your blog without it hanging your web site.

Below is a working example of loading twitters after the page has completed, thus preventing the whole page from locking up (notice that the spinner will continue until the twitters are loaded) – based on my tweets from myself:

Using my twitter.js script.

Options

The function tags the following parameters:

  • CSS id of target element
  • Settings object

Settings object:

  • id: the ID from twitter.com (either username or numerical ID).
  • 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, 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.
  • currently disabled withFriends: true/false – whether to include friends tweets. Defaults to false.
  • 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. If you want to prefix each twitter, add here, e.g. ‘Remy said’. 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.

For example:

getTwitters('tweet',{
  id:'rem',
  count:1,
  enableLinks:true,
  ignoreReplies:true,
  clearContents:true,
  template:'"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'});

Template variables

All variables should be wrapped in % symbols (see the above example).

  • 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

Finding your ID

The Twitter JavaScript plugin supports both the numerical ID and your username.

For example, my username on twitter is ‘rem’, so my homepage is http://twitter.com/rem.

If I want to use the ID, I can find it in the URL to my RSS feed – which is:

http://twitter.com/statuses/user_timeline/648873.rss

So my username ID is rem and my numerical ID is 648873.

Container HTML

You need to insert a holder element for the twitters to go in to. In the example above, I’ve included some ‘waiting to load’ content – but you don’t have to.

Here’s what I did:

<div id="tweet">
 <p>Please wait while my tweets load <img src="/images/indicator.gif"/></p>
 <p><a href="http://twitter.com/rem">If you can't wait - check out what I've been twittering</a></p></div>

Here are some more progress indicators.

If you include contents inside the holder div, then you’ll need to set the ‘clearContents’ flag.

Add the script

Download the twitter.js script.

Add the following code within the head or (best at the bottom of the) body tag:

<script src="/twitter.js"type="text/javascript"charset="utf-8"></script><script type="text/javascript"charset="utf-8">
getTwitters('tweet',{
  id:'rem',
  count:1,
  enableLinks:true,
  ignoreReplies:true,
  clearContents:true,
  template:'"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'});</script>

(this example will generate my twitter status in quotes on a single line with the ‘ago’ linkable back to the original twitter post)

Note that the getTwitters function will execute after the page has been loaded by your browser. It will fire once the DOM is loaded but before images are loaded.

Styling

If you don’t use a template, then the HTML is generated for you.

Each block of text is contained with in a span and includes it’s own class, e.g. the HTML generated would look like this:

<div id="tweet">
  <ul>
    <li>
      <span class="twitterPrefix">Remy said: </span>
      <span class="twitterStatus">I just had a bizarre spaces moment - moving my cursor to the bottom of the screen switched space - annoying if it hadn't just gone away.</span>
      <span class="twitterTime">20 minutes ago</span>
    </li>
    <li>
      <span class="twitterPrefix">Remy said: </span>
      <span class="twitterStatus">Great quote - Michael J Fox: "my happiness grows in direct proportion to my acceptance, and in inverse proportion to my expectations."</span>
      <span class="twitterTime">7 days ago</span>
    </li>
  </ul></div>

So each block of content is targetable using CSS to style the way you wish.

 

Check this Post

LEAVE A REPLY

Please enter your comment!
Please enter your name here