18 May

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

Update - updated 31-May 2008

Updated to specify timeouts, and timeout functions - see options below. Also Twitter have changed their API so 'withFriends' now requires authentication. With friends will be disabled regardless until I find out what the new plan is.

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

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="twitters">
 <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="twitters">
  <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.

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

Jim May 19th, 2007 at 3:55 pm

Thank you very much, it worked really well!
KennyH May 19th, 2007 at 5:55 pm

That's a clever way to work around the AJAX restriction on loading data from a different site. I've been working on a twitter proxy to run on my site so that I could use ajax commands to get twitter data. I like this solution much better.

When I was working on my code, I was having problems with my browser caching the twitter data. It would only update about once an hour or so. Have you seen that issue with this code?

You don't mention licensing of this code anywhere. Copyleft? MIT-style? GPL? Public Domain? Hopefully, one of those.
Nik Fletcher May 19th, 2007 at 6:00 pm

Hi Remy,

This is a really neat piece of code - thank you. I'm using it with RapidWeaver, and it seems to not hide the progress indicator once the tweets have loaded. Sadly my JS knowledge is, well, lacking. Any pointers? Thanks! Nik
:// dharmalog / by nando pereira » Esse Twitter faz coisa May 19th, 2007 at 8:00 pm

[...] + Add Twitter to your blog: um script para adicionar o Twitter no seu blog, diferente do badge oficial. [...]
Blog Author Remy Sharp May 20th, 2007 at 11:41 am

@KennyH - on the browser caching you can try one of the following two to get around the problem:

1) Cache busting - add a random number to the end of the requested URL - then the browser won't cache it, e.g.

var cb_url = url '&cb=' Math.random();

2) Use POST instead of a GET on the request. The browser can't cache POST requests so this also gets around the problem. However, with a POST you need to ensure the server will still serve up the page properly - but it's relatively easy to test.

On the license on the code - I've updated the file with a Creative Commons ShareAlike license - basically: help yourselves.

@Nik - If you drop me an example link I'll take a look at fixing the problem.
Nik Fletcher May 20th, 2007 at 7:49 pm

http://www.nikfletcher.com/20 is the URL. There's an assortment of Scripatculous scripts in there as well, but when I removed all the Javascript except twitters.js, it still appeared to not hide the loading animation. Thanks!
Blog Author Remy Sharp May 20th, 2007 at 8:30 pm

@Nik - my fault - there was a typo in the example I provided (typical). The parameter 'clearContent' should read 'clearContents'. That will fix it.

I've also just released a new version the twitter.js that uses a better load event, i.e. if fires before the images are loaded rather than waiting.
Nik Fletcher May 21st, 2007 at 11:30 am

Fantastic. I've now started it using it on my 'live' site.

Many Thanks!

-N
kosmar May 27th, 2007 at 9:04 pm

great work, thx
chrischen June 4th, 2007 at 7:47 am

is this script still working? i cant seem to make it work, and i cant see it working at nikfletcher's page either...
Blog Author Remy Sharp June 4th, 2007 at 8:29 am

@chrischen - good point! I'm looking in to it now...
Blog Author Remy Sharp June 4th, 2007 at 8:37 am

Hi all,

It looks like the URL that was in the twitter plugin I wrote was recently depreciated by Twitter. I've now updated the plugin and it's working again.

Good catch chrischen - cheers.
Linkify + upgrade to twitter plugin at remy sharp’s b:log June 4th, 2007 at 2:36 pm

[...] twitter plugin has just been upgraded to (optionally) search for links in the twitter text and activate them as [...]
Tim June 15th, 2007 at 9:02 pm

This is exactly what I've been looking for. Thanks for making this available!

How can I format the text, though? I'd like to make the, "about 15 minutes ago" text italicized and a different color so it stands out from the twitter text. I looked around in the js file, but I'm not a programmer and couldn't figure it out. Thanks for your help!

Mads June 27th, 2007 at 10:54 am

Open the twitter.js file in a text editor. You can edit the status messages.

For example, I translated them into Danish so they would fit on my site:

var r = '';
  if (delta < 60) {
    r = 'mindre end et minut siden';
  } else if(delta < 120) {
    r = 'omkring et minut siden';
  } else if(delta < (4560)) {
    r = (parseInt(delta / 60)).toString() + ' minutter siden';
  } else if(delta < (9060)) {
    r = 'omkring en time siden';
  } else if(delta < (246060)) {
    r = 'omkring ' + (parseInt(delta / 3600)).toString() + ' timer siden';
  } else if(delta < (486060)) {
    r = '1 dag siden';
  } else {
    r = (parseInt(delta / 86400)).toString() + ' dage siden';
  }

Nathan July 2nd, 2007 at 9:49 pm

Yeah, this is perfect!

I'd also love to have the ability to format the text. Is there away to append a class to the generated span tags so that they are style-able? Like Tim, I'm not a programmer but assume something like this, or easier, should work.
Bios July 7th, 2007 at 5:37 am

Nice code, hats off to you my friend. Thanks for sharing this tutorial.
Daniel July 8th, 2007 at 7:01 pm

I can't seem to get mine to work: http://www.rapidmac.com
I looked through the JS file and the page code, but I can't figure out what could be causing the problem.
Daniel July 9th, 2007 at 4:11 am

Never mind I fixed it. However, is there any (relatively easy) way to style the times text so it is different from the tweet text?
Troy August 4th, 2007 at 4:13 pm

I have a group blog, 5 members, and was wondering if there was a way to send multiple ids and get 1 tweet per user. I tried multiple copies of the .js and setting divs as twitters1 twitters2 .... but that didnt work, I either got the only the last one to show up, or they others showed up but with the last person's prefix so they were not identified correctly.
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.
links for 2008-02-28 « Bloggitation February 28th, 2008 at 2:22 am

[...] Add Twitter to your blog (step-by-step) (tags: twitter javascript web web2.0 blog programming wordpress) [...]
Shane March 3rd, 2008 at 4:36 pm

Many, many thanks - this is JUST what I was looking for
Hammer March 8th, 2008 at 3:53 pm

With the addition of friends and the template driven output this is really quite fantastic.
Piotr March 22nd, 2008 at 12:31 am

I love the script! It's just what I was looking for. Thanks for sharing! Brilliant work!

Kind regards.
Blog Author Remy Sharp March 22nd, 2008 at 12:55 am

@Piotr - I see from your web site you've reverted back to 1.2 of Twitter.js. Is the new ones not working for you? If you have an example, I don't mind taking a look.
Koka March 28th, 2008 at 2:07 am

Remy, this is a newbie question. Where do I upload the script to? The theme root or the website root?
Blog Author Remy Sharp March 28th, 2008 at 9:45 am

@Koka - it doesn't really matter, but if you want to keep things really simple, stick it in the root of your web site (usually htdocs) and refer to it as /twitter.js
Paul April 3rd, 2008 at 4:25 pm

Absolutely brilliant. The solution to a problem I've had for a good while.Thank you so much!
Unsquare Dance / A Blog in Miniature April 4th, 2008 at 2:44 am

[...] Tools for regular Twitter digest posts and built-in posting from WP, and a combination of twitter.js and the Twitter Widget for my sidebar [...]
Blaenk Denum April 8th, 2008 at 8:34 am

Hey, thanks for this. However, I don't want the resulting information to be within ul and li tags. I'm only telling the function to give me 1 update, and the reason is I want to put it within a p tag, but it keeps giving me an li tag no matter what. I've spent two hours trying to figure out how to do this to no avail and I'm going insane. I would really appreciate if you could help me with this, please.
Add Twitter to your blog (step-by-step) - remysharp.com by CRACKMAC.COM April 9th, 2008 at 4:46 pm

[...] Add Twitter to your blog (step-by-step) Linked is a working example of loading twitters after the page has completed, thus preventing the whole page from locking up. [...]
Isti April 15th, 2008 at 1:04 pm

Hello, it's a cool app, but i have a question.
We have a community blog and we would like to show all of our editors' twits (1 from each). How can i manage this, because this js just show the last one. Is there any easy way to implement it? Thanks.
Blog Author Remy Sharp April 15th, 2008 at 6:04 pm

@Isti - yep it does support exactly what you want.

Just use the script entry each time with a different id and username.

You can see a working example on this page, note the single tweet in the header of the blog, and the list in the blog post.
Isti April 15th, 2008 at 8:47 pm

Where do you call the first getTwitters function? (below the title)

I promise this is my last question, please answer me! Thanks
Blog Author Remy Sharp April 15th, 2008 at 11:00 pm

@Isti - no problem

The first one is being loaded from my [theme]/js/main.js script - which is basically my bootup script.

Here's another example of two tweet functions running on the page for different users
Isti April 16th, 2008 at 10:40 am

Thank you very much!
Patrick Curl @ Theres a Blog in My Soup April 16th, 2008 at 7:25 pm

Wow, nice in depth article, I have been thinking of integrating Twitter into my sidebar, I will definitely have to use this technique, when I do. Thanks!
Paul Jackson April 17th, 2008 at 12:05 pm

Remy, this is a wonderful script and very useful but I have one issue with it. Including an <a href tag in the template section stops the page from validating. I use the script like so:

template: '<a href="http://www.twitter.com/dragindb">Paul is %text%...</a>'

The only way to get it to validate is to remove the a tag. I think to solve the problem, at least in my case, the a tag could be output through the .js file. Unfortunately my javascript skills are severely lacking. What do you think? Do you have any other ideas?
Blog Author Remy Sharp April 17th, 2008 at 3:34 pm
@Paul - two different ways are available:

1) split out the string like this:
```
template: '<' + 'a href="http://www.twitter.com/dragindb">Paul is %text%...<' + '/a>'
```
2) Or put your JavaScript in a separate file and import it via a <script src="xyz.js" ></script>
Thimo Jansen April 17th, 2008 at 5:41 pm

Is it possible to refresh the displayed Twitters every 5 minutes or so? I tried to call the getTwitters function with a setTimeout, but this doesn't seem to work.
ahem... April 23rd, 2008 at 9:08 pm

Alert: Your link to AJAX indicators is a porn-spam site.

Not that I don't enjoy porn, but, you know, I was also interested in AJAX indicators.
Blog Author Remy Sharp April 23rd, 2008 at 9:41 pm

Good catch! Duely updated to a site that hasn't been hijacked by anti-spinner campaigns!
Brian April 25th, 2008 at 5:00 am

Remy, this is awesome stuff. One question though - any thoughts as to why invoking this for multiple twitter feeds doesn't work in IE7 (only one instance loads) or *shudder* IE6 (no tweets ever load)? Even on this very page, I can only get one set of your tweets to load.

Everything is beautiful on Firefox; I just have to remember to check IE more often.
Thomas April 25th, 2008 at 8:44 am

Hi, this is js exactly what I'm looking for but I'm not able to get it running.
I have the .js and css-file in place but can't figure out how to place the call in the template and in a page itself (I'm using inline js for WordPress for that matter).

Any help appreciated.
Blog Author Remy Sharp April 25th, 2008 at 8:52 am

@Brian - Thanks for spotting the bug. It's now fixed in IE. Cheers!

@Thomas - if you've got an example I'll take a look for you. Drop me a link on this blog if that's okay.
Thomas April 25th, 2008 at 12:38 pm

@Remy here is the link http://randgaenge.net/
Brian April 25th, 2008 at 1:41 pm

Fix worked perfectly Remy. Thank you much, and best of luck on your ride.
Hugo King April 26th, 2008 at 4:12 pm

This is fantastic, I was just about to hack in a few additions to an older version of this when I found it had been updated. Couple of features I'd like to see are:
Detecting links (to any site) and writing a link tag around them;
Correcting grammar by adding a full stop to the end of any status without a punctuation mark.
These could both the turned on by options.
Blog Author Remy Sharp April 26th, 2008 at 4:18 pm

@Hugo - it's actually in the documentation, but not in the source, but try: enableLinks: true in the config and it'll make links clickable.
Hugo King April 27th, 2008 at 6:19 pm
@Remy - Ah yeah, I realised this about 5 mins after pressing submit on my comment, it's great! Also I created a prototype function for correcting any lack of trailing grammar, it's as follows:
```
String.prototype.grammarify = function() {
  if (!( /W$/.test( this.replace(/^s+|s+$/g, '') ) )) {
    return this + '.';
  }
};
```
Hugo King April 28th, 2008 at 2:45 pm

Also I noticed that if you have ignoreReplies set and your recent tweets are all replies (more than 1) then nothing is displayed. It's easily fixed by tweaking the script, but maybe an option for this?
By the way, ignoreReplies is a great feature!
Blog Author Remy Sharp April 29th, 2008 at 10:18 am

@Huge - I don't know why I didn't do that earlier. I thought I'd have to keep re-requesting, but I changed the code a while ago to limit based on the count passed in. Anyway, grab version 1.10 and it should fine a tweet amongst the @replies.

Note that the max it can get is 20 tweets, so if the last 20 are all @replies, it won't show anything.
Mat May 10th, 2008 at 9:12 am

Sorry, but after lot or hour spend to debug it, i can't make your script working on my site.

I've been make a test page espacially without others scripaleous and prototype.. not working:
http://2009.mat.be/test.asp

It still loading

Can you help me?

Mat
Blog Author Remy Sharp May 10th, 2008 at 11:10 am
@Mat - you've not specified the element ID correctly. Check out the two lines that are highlighted:

http://codedumper.com/atasi#8,13

It should read:
```
getTwitters('twitters', {
```
Mat May 11th, 2008 at 7:55 am

I'm feeling so stupid... lol But for my defense, it's written nowhere...

I've now anothers problems:
- Preload-test don's disapear: http://2009.mat.be/test.asp
- There is a bullet before and i've not specified that in templace
- on the true page (not the test one) twitters state is loaded after google syndication. Can i load it before?: http://2009.mat.be/content.asp?id=cv

Regards,

Mg
Blog Author Remy Sharp May 11th, 2008 at 12:18 pm

@Mat to try and answer your questions:

1. The documentation is both in the code (see @params) and as the very first thing on this page - but not to worry
2. The test page looks like it's change - there's only a couple of divs in it now.
3. That's the <li> element. You'll need to style that with CSS, something like ul { list-style: none; }
4. No - I suspect not. What's happening is Google's ads are loading at the page loads. If Google were to go down (highly unlikely) then it would hang your web page. This is the crux of my script. Twitter does go down, and if you have the traditional script they offer, when Twitter is down, it'll hang your web page from loading too. So, my Twitter script waits until the DOM has finished loading, then tells the page to load the tweets.

I hope that all helps. Cheers.
HelloKit May 11th, 2008 at 2:35 pm

I can't seem to get my Twitters to load. If you could look at my site and tell me what I'm missing, I'd really appreciate it!
Mat May 11th, 2008 at 2:37 pm

Please check here:

it does not disaeper:
http://2009.mat.be/content.asp?id=welcome&theme=1
Blog Author Remy Sharp May 11th, 2008 at 2:43 pm

@HelloKit - please see Mat's comment above your own.

@Mat - you've added the property clearContent when it should be clearContents
HelloKit May 11th, 2008 at 2:55 pm

Wow, I'm stupid. Never mind. It was the container ID.
HelloKit May 11th, 2008 at 3:14 pm

Okay, I just have one more small issue. I used CSS to remove the bullet, and margin-left: -40px to kill the indent, but that only works in Firefox. In IE, the negative margin causes the text to cut off. Is there a way to edit twitter.js to just get rid of the UL and LI elements altogether?
Mat May 11th, 2008 at 5:34 pm

perfect - THis was because i've too much trying before your first answer..

1) i've the same problem as HelloKit about indent.
2) What about the possibility to slowly hide the loading div and slowly show the loaded one with something like : http://github.com/madrobby/scriptaculous/wikis/effect-opacity

I've tried but don't see where to put some code but without acceptable results:
Code:
http://2009.mat.be/include/scripts/twitter_load.js
Results:
http://2009.mat.be/content.asp?id=welcome&theme=1

Thanks again... for you so helpfull advices
Mat
Blog Author Remy Sharp May 11th, 2008 at 7:15 pm

@Mat + HelloKit - indent: #tweet ul { margin: 0; padding 0; } #tweet li { margin: 0; padding: 0; } then work from that. Good luck.
Mat May 12th, 2008 at 7:05 am

Thanks. But you don't answer me to:

What about the possibility to slowly hide the loading div and slowly show the loaded one with something like : http://github.com/madrobby/scriptaculous/wikis/effect-opacity

Mat.
HelloKit May 12th, 2008 at 3:05 pm

Thanks, Remy. I just finally figured that out on my own, but thanks so much for all your help! My badge now looks exactly the way it did before with the official Twitter badge, minus the annoying @replies, and with a cool "loading" animation. I love it!
TIM May 12th, 2008 at 9:09 pm

Great code - saved me tons of load time - you can see it in action here: http://timothysykes.com
Sarah May 13th, 2008 at 5:03 pm

I just came back here and saw you updated the script. I replaced the script, however, the new script doesn't work for me. The tweets are not showing up. Can you help me please?
Blog Author Remy Sharp May 13th, 2008 at 5:15 pm

@Sarah - I should be able to. What the URL of the page?
Sarah May 13th, 2008 at 8:22 pm

I found the problem and got rid of it. I had to give the div an id name similiar to the name in the script.
Mat May 14th, 2008 at 5:00 am

Hi.

It's me again.

What about the possibility to slowly hide the loading div and slowly show the loaded one with something like : http://github.com/madrobby/scriptaculous/wikis/effect-opacity

I've tried but don't see where to put some code but without acceptable results:
Code:
http://2009.mat.be/include/scripts/twitter_load.js
Results:
http://2009.mat.be/content.asp?id=welcome&theme=1

Reagrds,

Mg
Mat May 15th, 2008 at 9:38 am

no more answer?
Blog Author Remy Sharp May 15th, 2008 at 4:43 pm
@Mat - as much as I hate saying 'no' - I don't have the time to write the upgrade you're requesting. If you want to have a crack, you need to edit the actual twitter.js code and change the line that delivers the UL:
```
 ul.appendChild(li);
```
Mat May 17th, 2008 at 5:53 pm

what do you think about that:
http://2009.mat.be/content.asp?id=cv

regards,

Mg
Blog Author Remy Sharp May 17th, 2008 at 11:50 pm

@Mat - good work. I'd get a better matte on the spinner and it would be perfect.
Mat May 21st, 2008 at 8:49 pm

Hi again.

I've a suggestion of update:
- setting a timout period after what somes action is possible: clearcontents, or displaying other things.. because lot of time twitter is down and is seems to load continuously..

Regards,

Mat
Blog Author Remy Sharp May 21st, 2008 at 10:48 pm

@Mat - with Twitter's recent outage that's exactly what I'm planning to do. Except with the advantage that even if the timeout is hit, the tweets could still load (depending on the browser timeout).

Watch this space.
parker May 23rd, 2008 at 3:50 pm

I'm wondering if there's an easy way to paginate the results? I understand that the Twitter API limits requests to 20 at a time. It would be great if there could be an AJAX driven pagination to requests 21-40, etc.

Has anyone else tried this? Had success or failure?

Thanks in advance for any and all advice!
Ish May 28th, 2008 at 5:19 am

thanks, this was really helpful. now people don't have to wait for the sidebar to load my tweets before seeing the rest of the page load up.
Hugo King May 28th, 2008 at 10:51 pm

@Mat. Love v1.10 for changing the max amount of tweets fetched, removing the 'too many replies' bug.

I think a timeout would be good. I've played with this before using a JavaScript timer with _twitterTimer = setTimeout ('onTimeoutFunction()', 5000); on making the call to fetch the tweets and clearTimeout(_twitterTimer); on reaching a callback. With a function of onTimeoutFunction() obviously updating the target with a 'failed' message (which is triggered after the time limit - in miliseconds). I had the feeling it was a little buggy however and there's probably a better way to do this.

I'd also love to see some form of caching, this would improve loading time (obviously) and be a nice way to behave to the twitter server, but I'm not sure how this would be implemented! That's your job mister developer

Anyway, mucho thanks for the awesomeness again.
Don May 31st, 2008 at 6:25 am

Thanks so much for this code. After some minor noodling this has accomplished exactly what I set out to plug in to my own site tonight, and I'm so very grateful for the work you did here. Keep it up.

As a side, (and I should mention I'm no programmer, so this might not be a great way to handle this...) I came up with a 'fake it' solution for the loader/timeout piece discussed here, to serve my own needs for the time being. I created an swf asset to drop into the progress indicator space, which cycles a loader graphic a few times then eventually lands at a "sorry, unavailable" type message. When twitter content loads it clears this out using your script, otherwise the 'sorry unavailable' message remains. Sample at kayos.com, upper right corner.
Thanks again, seriously.
Blog Author Remy Sharp May 31st, 2008 at 2:14 pm

All - grab the latest version of twitter.js 1.11 which now includes timeout functionality.

Documentation for the parameter is in the non-minified code or above in this blog post.

http://code.google.com/p/twitterjs/
Chris More June 10th, 2008 at 3:39 pm

I added this code to my Web site, but I'm having problems with the spinning gif for the load. If I keep the html the same as your included test, it works, but the spinning animation and text never go away. Am I missing something? I removed it for now, but I'd like to add it back since sometimes twitter takes a bit to load.
Tweets per JS holen - Vertiefungsprojekt - Blog zu unserem Vertiefungsprojekt June 13th, 2008 at 9:51 am

[...] JavaScript Lösung zum einbinden von Tweets von “Freunden” auf die eigene Seite: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/ [...]
Tim June 25th, 2008 at 1:38 pm

I've fixed it. I just had wasn't correctly pointing to the js file. Oops! Is there anyway to have my twitter wrap to another line rather than having it use horizontal scrolling?
links for 2008-06-26 | Martin Pluss June 26th, 2008 at 3:39 am

[...] Add Twitter to your blog (step-by-step) [...]
DaleAnthony • Blog • DaleAnthony.com V3 ‘Retro’ June 26th, 2008 at 1:15 pm

[...] Twitter Script by Remy Sharp [...]
Gadisa July 1st, 2008 at 1:52 pm

thanks for the script Remy, and the step-by-step ... it works great!
still I have a question ... is it possible to protect the twitter page but still show the last tweet on a blog?