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)

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

AYMB March 23rd, 2010 at 3:42 am

I’ve seen several questions/requests in the comments (one of them mine!) concerning support for multiple Twitter feeds (so that they’re woven together into one timeline). Perhaps you can clarify whether that is possible. I know Tweetblender will do this, but I much prefer your script.

Thanks again for a wonderful script!
AYMB March 26th, 2010 at 11:31 pm

Hate to be a pest — just wanted to bump this a final time…. Thanks!
Stu April 9th, 2010 at 6:54 pm

Just wanted to say thanks Remy – this is exactly what I was looking for. Something small, fast and easy to style. Perfect. Good work!
jules.maas May 20th, 2010 at 8:54 pm

ugh. I feel so dumb, I just know I’m missing something here. I’ve added the script and container HTML, downloaded the most recent .js files…but I CAN NOT get this to work at all, regardless of linking to google’s .js or mine. The only hint I’ve found is the following error on my live webpage:

Message: Expected ‘;’
Line: 1
Char: 10
Code: 0
URI: http://www.twitter.com/statuses/user_timeline/RoswellJudoClub.json?callback=twitterCallback1&count=20&cb=0.9483407327380756
Curmudgeon June 4th, 2010 at 3:48 pm

I also just want to say this is *Exactly* what I was looking for – small, fast and easy. Good work! Thank you for the time you saved me!
Mark D August 8th, 2010 at 9:59 pm

Thanks for this script – I’m a designer who is expected to develop. Really appreciate simple scripts with clear explanations on implementation and even better CSS classes!
Xael September 1st, 2010 at 1:58 pm

I’m developing this website for a client, and this tutorial really saved me hours of figuring out how to insert his Twitter stream into a static HTML.

Thank you for your very detailed and simple to follow tutorial!
Klavs Rudzitis September 5th, 2010 at 11:35 am

How do I make it show retweets made by that user?
Except that, this is a great script! Thank you!
Jim September 6th, 2010 at 3:31 pm

HI, I’ve added the code, only when I load the page I get the Twitter preloader, but after it disappears it is not replaced with my Tweets in Firefox 3.6.8

My pages are PHP. Is that the problem?

Jim
Wesley Jordan September 10th, 2010 at 5:23 am

remy – i just wanted to say thanks – works great
Wesley Jordan September 10th, 2010 at 5:25 am

one more thing – I want to send my condolences – I have 2 daughters and I can’t imagine the pain you are feeling
Johnny September 14th, 2010 at 11:15 pm

A couple of people had mentioned the bullet point that is showing up when using this — they said they fixed it without giving any explanation how…

Couple someone please explain how to get rid of the Bullet Point that shows up in front of my tweet when using this script?
Daniel September 15th, 2010 at 11:46 pm

Two things, one important, one not.

Important: so sorry for your loss. There are no words, and all this pales in comparison.

Less important: for folks banging your head against tweets not showing in IE, what template are you passing? I originally was passing

<li>%text%</li>

but IE errors when the li is passed in. It accepts a, img, and span just fine. But not li. So I redid it so that no li was passed in, and IE is now happy. Or, as happy as it ever gets.
sebastian green September 23rd, 2010 at 12:31 pm

Remy,

just wanted to say thanks for this. Saved me a lot of time.

Just one quick questions, is there any way to make it user #tags rather than a user id?

Seb
claro mensajes September 26th, 2010 at 4:18 am

HI, I’ve added the code, only when I load the page I get the Twitter preloader, but after it disappears it is not replaced with my Tweets in Firefox 3.6.8
Coder September 29th, 2010 at 11:08 pm

Thanks for posting this and also thanks for posting the hot link source code, very helpful! Thanks :-)
Maarten September 30th, 2010 at 6:17 pm

Wow, really nice. It is working fine. One question tho:

Besides my twitter stream I also want multiple searches for “#keyword” to get displayed. I like the code something to be like this for the searches.

* search for #keyword1(some script only to point out what to search for, butt still using the basic code you provided)
* search for #keyword2
* search for #keyword3

Hope someone understands what i’m trying to do. Willing to buy you some coffee for solution :)
Toronto Wedding Photography September 30th, 2010 at 11:34 pm

Thanks for the post. I’ve been trying to figure out how to properly add twitter to my blog and this post has been great help.

Cheers!
Hampus October 2nd, 2010 at 11:52 pm

Hey! The script works fine and i am very pleased with it, it’s great!

I don’t know if it is because i have my time-zone set in twitter settings but i get a 3h difference from my actuel tweet-time. I have converted the script to 24h time, but the problem accurs with the original script too.

Solution?

THX!
videos youtube October 5th, 2010 at 2:11 am

Hampus , You are right that really works if you follow those steps the intergration will be right.
inteblio October 7th, 2010 at 8:51 pm

Great – fantastic, super fantastic. I found you off this – http://think2loud.com/adding-twitter-to-your-website-with-javascript/
James October 15th, 2010 at 9:52 am

Hm, is there any way to include retweets?
Roy October 19th, 2010 at 4:25 am

Hi, I am also trying to get re tweets to show up, is there a solution for this yet?

ps thanks for the script, it works great otherwise.
Nick October 25th, 2010 at 11:07 pm

Retweets seem a necessary addition. Please, update your script to display them.
mathaba October 28th, 2010 at 5:42 am

Great script, but we too, like many others here, are asking a question that no one has answered yet (looked through all 22 pages of comments!) how to enable RETWEETS (RE-TWEETS) to show up? Seems that’s not possible as yet? Will it be? Hopefully any reply could also go to our email as we’d be unable to monitor this forum, thank you.
Karlo November 8th, 2010 at 6:27 pm

Hi there, I am exploring all this in order to have it included in my new website. Point is: I have to fill out my Twitter-password every time the page is loading.. It seems to me that having it included in the html-code might be a possibility?? Does anybody has a solution on this?
Mike November 10th, 2010 at 9:27 am

Hi everyone,

How do you get rid of the bullet points from the feed as it is mucking up the alignment of the twitter feed?

Thanks
e November 12th, 2010 at 8:46 am

Is there currently any way to concatenate each tweet? If not, are you considering adding the ability to do so in future updates?

For example, for design reasons, I would like to show only the first 35 characters of each tweet, followed by three trailing dots (…).
Kyle November 16th, 2010 at 9:53 pm

Is there any way you can add something to the UL tag in the HTML that gets printed by the script?

For example: ul data-role=”listview” data-inset=”true”

?
Joel November 19th, 2010 at 11:19 pm

Add this to your css to get rid of bullets:
#tweet ul {list-style-type:none;}
Miguel November 27th, 2010 at 4:43 am

hello, anyone knows how to make it automatic updates of tweets? without having to refresh the site?

Thanks!
Stephanie December 6th, 2010 at 12:54 am

Hey guys, any idea on the Retweets yet? I’d love to get those also showing.
Kurppa January 7th, 2011 at 8:04 am

Any change for 24hour clock and without the ‘AM’ & ‘PM’ in Europe we don’t use those :). As I really don’t know how to change the code regarding the time-functionalities. Please help.
Beben Koben January 12th, 2011 at 11:21 pm

After performing a search for the twitter style widget, and here i got one cool widget too…
awesome, thanks^^
Into the lists on my posts ;)
dave January 20th, 2011 at 5:49 am

Is it possible to add the “retweet” and “reply” buttons?
If so how do you do it?
Graham January 22nd, 2011 at 4:11 am

Your code pulls my twitts in the browser fine, but when I go to view the source code that my browser rendered, I can not find the html code for my twitts.

All I see is this below. How do I get your script to write the twitts in my code?

I want to make sure when the search engines visit my site that they too can read my twitts in the source code.
fernando January 24th, 2011 at 12:34 pm

on my page everything goes well, but w3c don’t validate de linlk document type does not allow element "a" here
â€¦template: '"%text%" %time%'
Anyone can help me!!
thanx
LaatR January 24th, 2011 at 5:32 pm

I’ve implemented the script on a website of one of my customers. I’m using a link (in the template) to Twitter with the following code: http://twitter.com/%user_screen_name%/statuses/%id%. Unfortunately, sometimes the link does’nt work and the following text is shown on Twitter: “Sorry, that page doesnâ€™t exist!”. It seems something goes wrong with the ID, because the real ID is (sometimes) some numbers higher than the one that is shown. How can I fix this?
Blog Author Remy Sharp January 31st, 2011 at 5:36 pm

@LaatR – change %id% to %id_str% – I just remembered that Twitter updated their API, so I’ve updated this post to reflect the change too.
LaatR February 2nd, 2011 at 9:54 am

Grazie mille, works fine now!
Taty February 4th, 2011 at 12:18 am

Hey Remy, is there any known issue when using Cufon to style the Twitter text?? Would you mind taking a look at a website I’m coding? Somehow can’t style the plugin generated text with Cufon, thought it was ’cause of the double quotes in some words, should I escape some code to generate plain text?? https://github.com/tatygrassini/Brilliante_Layout
Rafael February 9th, 2011 at 4:21 am

How could i style the time for tweet? also i want to get rid the “about” minute ago something. Is there any way to do that?
Ken February 9th, 2011 at 6:14 pm
Hey Remy, thanks so much for the twitter.js script. It’s one of the simplest and easiest to use I’ve seen. Anyway, I’m having trouble with the time stamp parsing. For some reason, a time that should read “5:40 AM Jan 28th” is coming out as “0 / 28 1:40 pm”

My template code is:
```
template: '%text% <a href="http://twitter.com/%user_screen_name%/status/%id_str%/">%time%</a>'
```
I tested it with a different twitter account, and that one works fine. Any idea what’s going on?
andrei February 11th, 2011 at 9:08 pm

Great plugin, been using it for a while now. But it seems it has some errors, or so says JSLint on jsfiddle :) Maybe you could resolve those errors because if I minify it along with other scripts, it kinda kills all of them :)
Kevin Fairdosi February 13th, 2011 at 12:33 pm

Any way to get this script to generate the html such that each list item had a different class? ie. , tweet 2, tweet 3, etc. This would be useful because I’d like to make each tweet a slightly lighter color, as if it were fading off as the tweet got older. Can anyone advise on this? Feel free to shoot me an email at kevindosi at gmail dot com.
Ruben February 16th, 2011 at 12:58 am

Dear Remy: I am using this script, but it put a lot of empty space up and down of the twit. How I can clean that empty spaces ? I tried with CSS and don’t work. Thanks !!
Steve February 27th, 2011 at 10:21 pm

Wonderful script! I need to give the unordered list tag an ID. I found the spot in twitter.js to do it, and I can manage to shove stuff inside the ul tag. (line 104) My problem is I’m not good enough to get it to look like <ul id="ticker01">. Can someone give me a hand? Thanks!
Fred March 1st, 2011 at 9:07 pm

Great Work! Just a quick question…

Is it possible to output a particular list on my twitter account to my website instead of my ID?
Edward March 15th, 2011 at 12:43 pm

Great script, I am going to use it for a Salsa dansschool website I am building right now for my dans teacher. Works really fine in the test fase. How do you show ALL the REPLIES on tweets in the page? I think that could be rather important for making appointments, changing schedule, cancelling lessons etc.
osb March 20th, 2011 at 7:28 am

Remy, for a future release, can you please add an option where we can disable the ul li tags for the output? I have issues trying to remove them