18 May

Add Twitter to your blog (step-by-step)

Update - updated 25-Aug 2009

You can now directly hotlink from Google to remain up to date without having to change your script, see code below.

Hotlink from Google

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

Download to self host

Download latest Twitter.js

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:

Please wait while my tweets load

Using my twitter.js script.

Options

The function tags the following parameters:

CSS id of target element
Settings object (details below)

Settings object:

id: your screen name on Twitter, for example mine is "rem"
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, includes @replies and #hashtags, 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.
newwindow: true/false - if set to true, all links in tweets (and otherwise) will open in a new window. Defaults to false.
callback - Function to call when the twitter render is completed. Doesn't fire if the script times out.

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

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

You can download the twitter.js script or you can hotlink directly from the Google code repository (as seen in the example below).

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

<script 
 src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" 
 type="text/javascript">
</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.

Comments, feedback or suggestions will be more thank welcome.

You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)

405 Responses to “Add Twitter to your blog (step-by-step)”

What is JSONP? October 8th, 2007 at 9:30 am

[...] Twitter’s JavaScript blog plugin works in exactly the same way. You create a function to handle the data from Twitter, and insert a script tag. Once the script is inserted, it calls the function passing the Twitter data as a JSON object. [...]
Stefaan November 1st, 2007 at 9:15 pm

Great code! How do I remove the bullet before the text?
Laura November 5th, 2007 at 5:54 pm

Yes, I'd also like to figure out how to remove that pesky bullet...thanks in advance
10drill November 21st, 2007 at 8:11 am
Remove the bullet with css:
```
twitter_update_list li {
  list-style-type: none;
}
```
Nate November 26th, 2007 at 7:29 pm

I did the css trick with my blog, http://natenews.tumblr.com. Is there a better way to re-align it after the indent besides adding: margin-left: -40px; ?
Douglas Karr January 2nd, 2008 at 2:48 am

Perfect! Thanks Remy! We need to make this a WordPress plugin!
Borbs January 5th, 2008 at 1:55 pm

This is great! But I have a question: is there a way to DO NOT SHOW the REPLIES? I thought about the clearContents, but I don't know if this is possible... =]

Thank you! =]
Blog Author Remy Sharp January 5th, 2008 at 2:43 pm

@Borbs - do you mean that out of a list of, say 10 tweets, you want to ignore any that start with @myfriend?

If so, I'm in the process of doing some small upgrades to the script and I can include this feature as an option.
Blog Author Remy Sharp January 5th, 2008 at 6:50 pm
@Borbs - I've updated the twitter.js script to also support an ignoreReplies option.

I've also fixed HTML entities from appearing in the tweet and wrapped each logical block in a span with it's own class name:
```
SPAN.twitterPrefix
SPAN.twitterStatus
SPAN.twitterTime
```
Tommy January 8th, 2008 at 1:43 am

Hi remy, thanks for the great script and also taking the time to help individuals like me implement it to my site.

Im trying to work out how to format the text to be trebuchet Ms bold 7pt White whn it shows the twitters.

i promise i have tried but cannot get the css to work, i have absolutely no idea how to write css and link it to the Twitter result.

Can you help please

thanks

Tommy
Blog Author Remy Sharp January 8th, 2008 at 1:51 am
@Tommy - if you want all the text to be bold and white - this will do (assuming you're using 'twitters' as the ID on the container):
```
#twitters {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 7pt;
  color: #fff;
  font-weight: bold;
}
```
If you wanted to target specific blocks of content, such as just the time and make it, perhaps blue (you get the idea):
```
#twitters SPAN.twitterTime {
  color: #00f;
}
```
Tommy January 8th, 2008 at 2:26 am

Remy, i will try this right now thanks for a very very prompt reply.

T
Tommy January 9th, 2008 at 12:55 am

Hi Remy, can i just say wherever you are in the world, thank goodness. great help for a novice with pretty rudimentary coding skills. Your help was second to none and your script rocks. thanks so much for taking your time out and helping another Webhed.

you truly are a decent fella.

Best Regards, Cheers!

Tommy

http://www.innocentinteractive.com (My portfolio)
_ram-jaane' January 10th, 2008 at 5:34 pm

Probably no issue with the script at all but I'm having trouble with 2 pages acting differently:

http://ramchandra.me.uk/blog/
http://ramchandra.me.uk/about/

I've followed the exact same steps & in firefox -- spot on!
in IE however I get "Operation Aborted" message on the Blog page (not on the About) .. very weird. I'll update to your latest & greatest script & see if that helps.
_ram-jaane' January 10th, 2008 at 5:42 pm

Whatever change you made in that release -- fixed it Yay!
Jay Robinson January 11th, 2008 at 5:06 pm

Thanks a lot, Remy. This is a really cool script.

You can see it in my link: http://jayrobinson.name

Or check out my other site, a travel blog while I'm abroad: http://nopeanutbutter.com
Hammer February 2nd, 2008 at 7:18 pm

Any way to pull the tweets of my friends as well as my own like Twitter does with one of their flash options?
Lester Chan's Website February 5th, 2008 at 1:27 pm

Twitter

I have “Twitterlise” this site (via Remy Sharp), my WordPress site (via Twitter for WordPress), my Facebook profile (via Twitter Application For Facebook), my Windows Live Messenger (via Twessenger) and my Messenger Plus! Live (via Twit4Li...
Sarah February 19th, 2008 at 6:07 am

Hi, I am currently using your script and I love it. Definitely the one after looking around for hours. I have a question. Where in the .js file could I put the date in parentheses?
Blog Author Remy Sharp February 26th, 2008 at 12:53 pm

@Sarah + @Hammer - I'm going to release the new version of the script today.

New features include, the ability to include friend's tweets, use of variables in the text (i.e. in the prefix you want the appropriate name to appear), and the biggest change - template driven output.

This will give you complete control over how the twitter appears, and in your case Sarah, you'll be able wrap the date or do as you please.