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)”

Benjamin Kuchar November 8th, 2009 at 4:38 am

Nice script, I am looking for a way to parse yfrog links so that the associated media is loaded and displayed inline, any idea to get this in?

Ben
Benjamin Kuchar November 9th, 2009 at 12:15 am

Thank you for that great tutorial and script, I modified it to show thumbnails from yfrog.com. I use this script to get mobile updates with twidroid and my myTouch 3G to my blog, you can check it out on http://www.florida-guy.com/about.php
pettifoggist November 9th, 2009 at 12:21 am

One feature I think would be handy is the ability to filter posts from various sources. I'm using this on a Tumblr blog and would love to be able to filter out the posts that I have Tumblr send to Twitter to announce new posts. I'm going to give adding that functionality to it a go, but you may want to consider adding it to the official release.
dennyhalim.com November 11th, 2009 at 10:58 pm

can it use search instead of id?
tnx
Suci November 14th, 2009 at 7:35 am

I'm a newbie, been customizing my tumblr and trying to put twitter on it using .js or .json...
I guess something's wrong, cz it doesn't appear anywhere on my tumblr...
Please help me...
Where can I sent my customized html codes to you?
Rogier November 15th, 2009 at 2:52 pm

Hi there and thanks for this great, clean, easy-to-use script. One question though: does the 'newwindow' object setting work properly or is it just me? I've added it like this, but links in Tweets still open in the same window (IE 8 and Firefox 3.5.5):

enableLinks: true,
ignoreReplies: true,
clearContents: true,
newwindow: true,
template: '<a href... etc.
pawel November 16th, 2009 at 8:09 pm

The script works fine for text/html but not for xhtml/xml in the most of modern browser except Opera.
Simon November 18th, 2009 at 7:51 am

I've been using this for a while now, and it works great. The only problem I have is that the template is invalid XHTML Strict, and I'm too daft to figure out how to clean it up. Ah well.
Mia November 20th, 2009 at 10:29 am

This worked like a charm - no glitches what-so-ever ! and it does work w/HTML & XHTML - as long as one knows where they're placing the script & depending on their Blogging platform . Thank you so much for offering this great script Wishing you much future success within life & career endeavors

M.
pawel November 20th, 2009 at 6:21 pm

Simon, your doctype on your site is xhtml but your mime-type not.
gribbit November 22nd, 2009 at 12:03 am

Is there a way to get the ascii codes (e.g., for ampersands and apostrophes) to display the character rather than codes? Thanks.
Nate November 24th, 2009 at 8:53 pm

I'm having problems trying to get the timezone to display correctly, if there were a variable for that in the code on the html page I would be very appreciative. Thank you for writing such a great script!
AYMB November 27th, 2009 at 4:23 pm

I'm using this script on my site. It's great, and I've received lots of compliments on its smooth function. One thing that I've noticed, though, is that certain characters (ampersand, smart quotes, dashes) show up as ASCII codes rather than characters. For example, my recent update appears as

New Post: Foodie Friday: Thanksgiving [&]#8216;09 [&]8211; The Verdict http://bit.ly/612s4V

[note: I bracketed the ampersands above to ensure that the comment shows with codes; the brackets do not appear on my feed as shown on my blog]

rather than as

New Post: Foodie Friday: Thanksgiving ‘09 – The Verdict http://bit.ly/612s4V

Is there any way to remedy this? Thanks for the great script, and good luck with your move.
Blog Author Remy Sharp November 30th, 2009 at 12:45 pm

@AYMB - if you grab the latest version from the trunk in Google Code, you'll see that I've fixed that bug. Thanks for pointing it out.
AYMB November 30th, 2009 at 7:11 pm

Thanks for the response and bug-fix. I'm hotlinked to the Google code repository, so suspect it's already working. I'll have to see the next time I have a tweet with a character that formerly would have posted ASCII code.

Thanks again!
Louis December 2nd, 2009 at 2:33 am

Hi Remy,

I have been playing around with this javascript file but unfortunately I can't get it to display RT (retweet) entry.
Do you know if it is a setting problem or this javascript currently doesn't offer this function?
Steven Costello December 7th, 2009 at 8:43 pm

Is there a way I can make it so that each li has its own id? and also how do i add an id to the ul?
Kurt December 7th, 2009 at 10:56 pm

From a javascript newbie - how can I use "substr" to limit the length of the text?
Malcolm Murray December 11th, 2009 at 10:01 pm

Remy thanks for writing this library AND then providing all this documentation on your blog - much appreciated
Dario December 13th, 2009 at 1:01 am

Hi there, thnx for the code. Hust a few Qs:

image: http://grab.by/19K8

- How do i get rid of the bullet point?
- As you can tell, i'm trying to get the text to go on top of the white box (while still keeping the image linked to my twitter page). I'm not sure how it's done... can you point me in the right direction please?