18 May

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

Hotlink from Google

<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></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". This can also be a list (in the format of user/list-name, ie. rem/conferences) or a hash tag.
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_str%/">%time%</a>'
});

Template variables

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

text - the actual status message
id_str - id of status message (note that id was used before, but for the ids to be correct, you need to use id_str)
source
time - relative 'friendly' time
created_at - raw time
user_name - real name
user_screen_name - username
user_id_str
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 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_str%/">%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)

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

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?
Miki July 9th, 2008 at 3:15 pm

Thank you Remy for this elegant script.

The only thing I don't understand is how to set onTimeout: {Function}.
After 5 seconds I just want to display something like “twitter.com seems to have problems delivering my latest tweets.”.

How do I accomplish this?
Thanks in advance
DaleAnthony.com V3 ‘Retro’ | abe design studio July 10th, 2008 at 8:15 am

[...] Twitter Script by Remy Sharp [...]
Stas Sushkov Journal - Create a javascript widget for your site in 5 easy steps July 13th, 2008 at 9:32 pm

[...] article. Get the latest twitter.js from Google Code. Create your load.js with some code like this, full specifications can be found on Remy Sharp’s blog: getTwitters( 'incearca',{ id:'incearca', count:1, [...]
Alexander July 14th, 2008 at 11:52 am

I think there is a bug in the timeout routine. If you run test.html from the twitterjs-1.11.1-release.zip package, you'll notice that onTimeout is immediately triggered upon execution of the script (and not just when timeout is reached).

TJ July 15th, 2008 at 9:00 pm

Hey all,

I've spent the past two days trying desperately to get this to work to allow me to add Twitter reliably into a basic web site I'm building using iWeb 2...

I'm a complete noob with HTML and CSS coding, although I have some Flash experience. I've managed to customise the Twitter widget to look right, but now I'm stuck trying to make it load without hanging the site and with a nice 'loading' animation. In an ideal world, I'd end up with something that works like this : http://alexstubbs.com/

Can anyone give me any pointers? Or perhaps send me complete code for me to look at/hack apart? Many thanks in advance for any help, and sorry for such a noob question. Below is what I have so far...

Cheers,


<ul id="twitter_update_list"></ul></div>

<style>

  ul#twitter_update_list { list-style-type:none; padding-left:0px;margin-left:0px; margin-right:0px; margin-top:0px;  }
  li { font-size: 0.75em; font-family: Inaimathi; color:#999999; border-bottom:1px dotted #999999 ;border-left:1px dotted #999999; padding-left:10px; padding-bottom:10px; padding-top:10px; border-right:1px dotted #999999; padding-right:10px; }

a:link {
text-decoration:none;
color:#666666;
}

a:hover {
text-decoration:underline;
color:#990033;
}

body {background-color: #333333}
li {background-color: #242424}

</style>
</style>

</head>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Hazel_Mills.json?callback=twitterCallback2&amp;count=5"></script></font></font></font>

Blog Author Remy Sharp July 15th, 2008 at 9:30 pm

@TJ - erm...yes is the answer I can give. Though you seemed to have skipped the entire point of this post. If you scroll back to the top, you can download a custom script I've written (rather than use the twitter blogger.js script) and by following the directions, without writing any new code, it will add Tweets to your site (as per the example in this post and at the top of my blog). Good luck.
Alexander July 18th, 2008 at 8:00 am

Remy, have you looked at the issue I posted two posts above? I tried to debug the code to see what's wrong -- but my JS know-how is very rusty. Also, given that Twitter is quite often "down for maintenance" (like right now), it'd be great if your JS code could somehow catch this situation.
The Bastard July 18th, 2008 at 10:31 am

[...] you would like to add twitter to a page on your website or blog, Remy Sharp has a very good guide although the link to twitter.js seems outdated. You can get the code to [...]
MikeO July 23rd, 2008 at 6:58 pm

Hi Remy. Like the twitter.js script a lot. Ran into a bit of a problem with IE which I think is caused by IE sending an If-Modified-Since header. Twitter responds with a 200-OK and an empty response so the callback fails. Adding "since" param to the API call seems to do the trick. Have you seen this? Mike
Jon July 24th, 2008 at 2:23 am

Hi Remy - awesome script, thx.

Working a treat, and got it styled nice over here http://www.rogerwilco.com.au/rightnow.html

Oddly though, it only works on Firefox and Safari, no go for IE.
I've probably missed something simple, I can't see what it is.

If you get a moment, it would be great if you could check it out.

The container loads, but the the 'loading' message just stays on... No time-out message, no tweets...

Thanks again, -Jon
Mike Ormond's Blog : Getting Twitter Updates On My Blog July 24th, 2008 at 1:25 pm

[...] the easy bit over. Next I wanted to display my recent Tweets and I stumbled across the excellent Twitter.js script from Remy Sharp. This implements a similar mechanism to jQuery for determining when the DOM [...]
Phil July 25th, 2008 at 5:51 pm

same thing as Jon. No workey in IE. :(.
Blog Author Remy Sharp July 25th, 2008 at 6:04 pm

@Jon + Phil - thanks for the feedback. I'm able to replicate the bug in IE and will be releasing a patch very shortly. Cheers - Remy.
Jisse July 29th, 2008 at 3:48 am

Hi, Remy.
Very nice work, it's really usefull. I have just a question, I need to bold the first words (before a ":") of the text, and as I am kind of a noob in JS, I don't find where I should insert the function.
Thanks again,
Jisse
Jisse July 29th, 2008 at 8:32 am

Hi again,
I have edited the twitter.js source, it's not a big deal if you manage to identify what are the different functions. If you want I can quote the code, but I think it's useless since the function is really specific.

Thanks for your script

Jisse
Chee July 30th, 2008 at 7:04 am

Great script however it doesn't seems to update very fast. It is still displaying the previous update despite my last update being 20mins ago? It's not cache, cookies etc as I have cleared all of them! Any idea?
Blog Author Remy Sharp July 30th, 2008 at 8:30 am

@Chee - the update speed (i.e. if you've posted a tweet and it hasn't updated via twitter.js) is purely down to Twitter's API. Essentially all the code is doing is inserting the tweets from Twitter's API then giving you a whole bunch of extra options.
Binesh July 30th, 2008 at 12:24 pm

This is great stuff..
Thank you so much Remy.
ronmcu July 31st, 2008 at 12:10 pm

@Remy: I love your script! Were you able to post an update already?

I'm having the same problems with IE7. The first time I load the page the tweets are shown. When I do a reload of the website (F5) the tweets are no longer shown.

I used your site to test it too - same problem: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/

Having the same problem with Opera. Everything works fine with Firefox, and Safari for PC though.

Looking forward to your reply.

Best, Ron

Scott July 31st, 2008 at 1:37 pm

I can only get one twitter feed to load when I have two feeds coded. Code is like this:

getTwitters('twittersShort', {
    id: 'user1',
    prefix: '<a href="http://twitter.com/%screen_name%" rel="nofollow">%name%</a> said: ',
    clearContents: true,
    count: 1,
    withFriends: false,
    enableLinks: true,
    ignoreReplies: true
});

getTwitters('twitters', {
    id: 'user2',
    prefix: '<a href="http://twitter.com/%screen_name%" rel="nofollow">%name%</a> said: ',
    clearContents: true,
    count: 1,
    withFriends: false,
    enableLinks: true,
    ignoreReplies: true,
    template: ' "%text%" <em><a href="http://twitter.com/%user_screen_name%/statuses/%id%" rel="nofollow">%time%</a></em>'
});

Call will not post, but email me if you need details.

I have removed actual user names because this is a project I am working on for someone else.

Blog Author Remy Sharp August 1st, 2008 at 8:19 am

@Scott - initially I can't see anything wrong with that code. Have you tried the test from the full zip? It's got three Twitter blocks in it, and they should all work. It might be something in your HTML perhaps?

@everyone re: IE - definitely going to fix this - I've just been a bit overloaded with work. I'm able to replicate the bug, so I'll be tackling it very soon. Keep an eye out here and I'll post the update. Thanks for baring with me!
Dave August 2nd, 2008 at 1:08 am

On my site http://blog.davereid.net/ I'm getting a JavaScript error: 'TwitterCallback2 is not defined'. Anyone else having this problem? Remy any ideas?
Jesse August 6th, 2008 at 4:07 pm

Awesome script, thank you so much for your talents and time on this. I'm anxiously awaiting the IE fix. Did that crop up because of a change in Twitters API?

Thanks again.
Greg August 9th, 2008 at 1:12 am

This is awesome, thanks!
Building your own desktop Twitter client - Twitter API » Own Business August 13th, 2008 at 9:19 pm

[...] Step by Step - Add Twitter to your blog [...]
Greg August 15th, 2008 at 11:11 pm

Out of curiosity, is there a reason the script maxes out at 20 twitter updates? Will twitter get upset over time if you pull more than that at one time?

PS - Yes, I realize you can just modify the javascript to allow for more posts, but I don't want to do this if it's going to cause issues.
Adding Twitter to your website with Javascript - Think2loud August 16th, 2008 at 4:06 am

[...] Twitter.js by Remy Sharp [...]
James August 16th, 2008 at 6:33 pm

Hi I like your plugin and every ones contribution, it has been very helpful, however I'm having some issues with it on my website: http://www.jamesapps.com it doesn't seem to be appearing correctly, can anybody help?

Thank you
Jake Strawn August 17th, 2008 at 8:32 pm

Just what I was looking for... great code, very fast to load... nice work!

I just got it working on my homepage at http://himerus.com
Jake Strawn August 17th, 2008 at 8:38 pm

hmmmmm.... one thing I do see missing that I could really use would be a callback function...

I currently set all of my external links to open in a new window, and would like to keep the flow with this as well...
Enlaces de la semana 5 — Viciao2k3 August 18th, 2008 at 3:26 am

[...] javascript, integrar twitter en tu blog [...]
Tech Me » Blog Archive » Twitter in Blog/Website.. August 18th, 2008 at 7:03 pm

[...] The procedure is pretty not-so-complex sorts. And with a simple but informative article like this your work is greatly reduced. Thanks Remy [...]
Amit August 19th, 2008 at 3:29 am

@Remy: Awesome work man. Thats what i was dearly looking for. Great pointer to start with. Though it's working amazingly well, i will be customizing its looks over the time.
Thanks a lot dude
Pablo DiCiacco August 21st, 2008 at 2:53 am

Thank you so much for providing a method which works 100% of the time. I was struggling with other js methods which only showed twitter posts if it had been updated recently, and all widgets available do not allow the customization I needed. Thanks,
Pablo
Nick Pettit August 21st, 2008 at 3:15 am

This is AWESOME. I was hacking around with the Twitter API and got some of this going, but you made a lot of considerations I wouldn't have even thought of. Really nice work, thanks so much for contributing to the web.

Nick Pettit August 21st, 2008 at 3:44 am

P.S. For anyone trying to post multiple feeds from the same Twitter account, I have a hack that will work for up to two feeds.

For one of the calls to getTwitters, use your Twitter username. For the second one, use your Twitter id. For example:


  getTwitters('first_tweet', {
    id: 'colpanic',
    count: 1,
    enableLinks: true,
    ignoreReplies: true,
    clearContents: true,
    template: '%text%'
  });
  getTwitters('more_tweets', {
    id: '15895001',
    count: 5,
    enableLinks: true,
    ignoreReplies: true,
    clearContents: true,
    template: '%text%'
  });

Nick Pettit August 21st, 2008 at 5:03 am

Hmmm... might have to retract my previous comment. I think the browser may have been caching things weirdly. Investigating...
Nick Pettit August 21st, 2008 at 5:18 am

OK, last comment, I promise. I think the problem I ran into was just the limit on the Twitter API.
Stefan August 26th, 2008 at 6:05 pm

Is there a way to make tweets NOT display in a list? I just find it annoying that I'm trying to display a single tweet, yet it displays in a list.
The “Tech. Arch.” August 29th, 2008 at 1:46 pm

[...] For this blog, I just added my last 5 “tweets” to my new “recent Twitter chatter” panel on the sidebar by following Remy Sharp’s excellent article. [...]
Brandon Stewart August 30th, 2008 at 5:30 am
Hi Remy,

Your code was an absolute life saver for me, having problems with my site loading and now its great after what seems like a nice plug and play piece of code.

I was hoping you could help me integrate this bit of script into your code if you had time:
```
function chat_string_create_urls(input)
{
    return input
	.replace(/(ftp|http|https|file)://[S]+(|$)/gim,
'External Link & Image to display')
    .replace(/([^/])(www[S]+(|$))/gim,
'External Link & Image to display');
} 
```
Thank you again,
Brandon
grotos September 2nd, 2008 at 9:38 am

There's still problem with Opera: Tweets load on the first time, but when you refresh site they are gone. Is there any solution to this issue?
POSTWORK » Blog Archive » About this blog September 9th, 2008 at 9:42 am

[...] slightly modded version of the Whitewash theme. There’s some Javascript which I pilfered from http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/ which pulls down my latest Tweet form twitter and displays it on the right sidebar.Apart from that, [...]

remy sharp's b:log

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

Hotlink from Google

Download to self host

Options

Template variables

Container HTML

Add the script

Styling

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

2 day Node Masterclass

Post Details

Related Posts

Popular Today

Noteworthy

License