Work
SubscribeAdd 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
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
lielement. 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)
Introducing HTML5%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D72537009.-%3B)
Thank you very much, it worked really well!
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.
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
[...] + Add Twitter to your blog: um script para adicionar o Twitter no seu blog, diferente do badge oficial. [...]
@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.
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!
@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.
Fantastic. I've now started it using it on my 'live' site.
Many Thanks!
-N
great work, thx
is this script still working? i cant seem to make it work, and i cant see it working at nikfletcher's page either...
@chrischen - good point! I'm looking in to it now...
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.
[...] twitter plugin has just been upgraded to (optionally) search for links in the twitter text and activate them as [...]
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!
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:
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.
Nice code, hats off to you my friend. Thanks for sharing this tutorial.
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.
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?
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.