Work
SubscribeAdd 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
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
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_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)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D62420820.-%3B)
@jordan: How did you get this to work for multiple users’ timelines? Very cool!
Nice. I have started using your script on my site and it works well. My only problem is that its brake the validation if I use template. The validator find then an error: document type does not allow element “a” here. I understand the proplem, but can’t find a solution.
Thanks in advance
Excellent – well wrapped up, been looking for a concise explanation for some time. Thanks.
I’m with adam! A response would be awesome!
I’m desperately trying to display two unique twitter accounts on the same webpage (not blog). And every script I’ve tried comes out as this homogonized mess of one twit with both accounts melded together. Why does something so seemingly simple have to be so painful?
Also, you might want to check the code on this page. You have a busted link:
id: your screen name on Twitter, for example mine is “<a href=”http://twitter.com/rem”
it should be (?):
id: your screen name on Twitter, for example mine is “http://twitter.com/rem
@sie & @adam – this page has two twitter requests going on (one in the header and one in the example). Equally if you want two different accounts – or more than two for that matter, have you tried the examples in the zip file?
http://code.google.com/p/twitterjs/downloads/list
There’s an example showing three different accounts. Very simple, just repeat the call.
my site was displaying “Warning: SimpleXMLElement::__construct() [simplexmlelement.--construct]: Entity: line 10: parser error : Opening and ending tag mismatch:” errors from a php twitter script I had installed to simply pull my last tweet. In googling the error, there are a TON of people’s cached sites out there with the same error. Something must have changed on the Twitter side? Or it was always there, but intermittent? Regardless, your script saved the day and is much sexier. Rock on.
Is there a way for me to send a reply back?
Any way to display last entries containing a given hashtag, instead of an account id ?
Has this ever been successfully integrated within a secure site (https)? I was looking to utilize this to serve Twitter Comments to Intranet users who would otherwise be blocked via outbound proxy blacklisting of Twitter from the workplace network. I have been successful in altering the Twitter “http” links to “https” within the JS files to remove the “unsecure content w/in a secure site” warnings, However the called Twitter content would only display in IE7 & 8 browsers whereas Firefox / IE6 / Chrome will only continue to display the “wait” message…
I use the codes and they work great, I’m trying to learn some styling details. For instance being able to have alternating tweets in a different background color to more clearly separate them, or divide them with a solid line like the blink182 site. Also, this is slightly more of a priority to me, how do you not have the bullet’s show up?
on mine it throws a bullets up.
I’m new to javascript and coding in general, but check out my site to reference what I’m talking about. lcchaven.org thank you.
Nevermind actually, with some fiddling around I finally got it. However scope the site if you are interested :)
Thanks for learning code :) and making one that works.
This is exactly what I was looking for and I wish I had found it sooner instead of looking through all the various widgets and scripts out there that do an assortment of other things except just display your latest twitter posts.
Thanks for developing this JS!
Excellent, there’s so many over complicated solutions out there so finding this was great!
is there a way to have the content refresh after x min or x seconds?
Hi,
Is there a way to make the first tweet in a bigger font than the rest… just like it displays in your twitter.com page?
Thanks.
great stuff and i tried to use your script like on your server you linked to (http://remysharp.com/wp-content/uploads/2007/05/twitter.js) but i see the hash tags aren’t include. Is there a possible chance you’ll addapt this script ?
I don’t like how the new date appearance is in the scripts on google code, i really like it like yours with the mention of days ago and not by hours.
I tried it myself but got stuck.
thx in advance !
Is it possible to filter out (not display) Twitter updates that start with certain words? I want to start using TwitterFeed to send Twitter updates when I write a new blog post. It will unfortunately populate my embedded Twitter timeline (beautifully embedded through your script!) with updates beginning “New article: ….” If you’re on my site reading the embedded timeline, you don’t need to see that there’s a new article. Plus, since I’m only showing 5 updates, I don’t want half of them to be “New article: ….”
So, it would be very cool if I could have the embedded timeline ignore updates that begin “New article: ….”
Thanks for this great script!
@Dries – you shouldn’t really link directly to my own hosted version, because I could remove it or change it and break your site at the same time. Use the one hosted on Google, then you’ll get the latest version:
http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js (also contains hashtags being linked up)
Remy: Thank you for the response regarding having multiple accounts/timelines on the same page. I realize you can make multiple calls and have multiple occurrences. But is there a way to mix the timelines so that they sort together as one timeline of various people? In other words — one time-sorted timeline drawing from multiple accounts?
I echo @adam’s request. Would like to know how to have the multiple accounts appear in one timeline instead of two or more separate timelines.
Hi. Would like to use the PlugIn in Germany. Would like to translate as follows:
function wpcom_time_since( $original, $do_more = 0 ) {
// array of time period chunks
$chunks = array(
array(60 * 60 * 24 * 365 , ‘Jahr’),
array(60 * 60 * 24 * 30 , ‘Monat’),
array(60 * 60 * 24 * 7, ‘Woche’),
array(60 * 60 * 24 , ‘Tag’),
array(60 * 60 , ‘Stunde’),
array(60 , ‘Minute’),
);
Problem: The plural differs in Germany:
Jahr||e
Monate||e
Woche||n
Tag||e
Stunde||n
Minute||n
Sekunde||n
And we say like this:
Instead of (ecample) “4 hours ago” we say
“vor 4 Stunden” (“ago” = “vor”)
Any chance?
I really appreciate this tutorial, it has help me greatly.
Desperately tring to remove the UL and LI from the coding (not just with CSS) but to actually take it out of the code because it interferes with a drop down navigation that the script will be nested in… can you help??? anyone???
Hey Everybody!
Is there a way to make a BREAK between tweets?
So it looks like this:
Jon says: blah blah blah
Jon says: blah blah blah
Jon says: blah blah blah
Instead of:
Jon says: blah blah blah
Jon says: blah blah blah
Jon says: blah blah blah
Can you please my my site? http://www.rogerarrieta.com/dev
comments run into time stamp. Also if I have 2 or 3 comments they over lap. Can I fix this somehow? Thanks. I think this script is awesome.
Hi,
Great script!
I need to filter out tweets from a given device/service (for example do not show tweets from Twitterfeed). How can I do that? Will be great if we have a variable to do this sort of filtering,
Regards
[...] client-side you have  zero load on the server.The following scripts may help you accomplish this:Remy Sharp’s twitter.jsThe page includes step by step instructions, form setting up the script until the html markup. A [...]
This code is fantastic! I only have one question. How do I control how much of each tweet is displayed? Is there a character count somewhere in the code where I can set it to display the entire tweet regardless of character length? Thanks!
hi, i’m using this script here http://ccfotografia.com/siguenos.php it works fine, when twitter is up, but it oftenly crashes and keeps there on loading (Cargando in spanish), i know i can’t control Twitter, can i? But at least it would be nice to load last tweets, regardless they are the most recents ones, in order to avoid the huge black space, and the emptyness of the site, is there a way to acomplish this? Thanks in advance!!!
Any word on removing the li / ul bullets?
Any plans to extend this so that you can grab tweets by hashtag or any other sort of search instead of just by the username?
This code is nearly exactly what I was after. Has anyone been able to get this working with a hashtag instead of id?
Cheers,
Muz.
Anyone wanting to remove the bullets from the list items should add this CSS snippet.
#tweet ul, #tweet ul li {list-style: none; display: block;}Hi,
How can I get rid of the dot in front of the tweet?
Because I’m only displaying one tweet at a time on http://www.brahimusic.com
Tx for the code!
An
Hi,
I use your script on an SSL encrypted site. The browser shows “parts of this page are not encrypted”. I think this results from calls to the twitter api. Any ideas how to solve this? The js is loaded from our https server, so this should not be the problem.
Any plans to support the new Twitter feature, Lists?
Same request for hashtag-filtering here, specific user, only some tweets should be shown. Any help would be really apriciated.
@Any plans to extend this so that you can grab tweets by hashtag or any other sort of search instead of just by the username?
Wow, i found something for the hashtag-filtering:
its called tweet-blender
# Shows tweets from one or more Twitter users (e.g. @tweetblender)
# Shows tweets for one or more topic defined by keywords (e.g. ‘wordpress’)
# Shows tweets for one or more topic defined by Twitter hashtag (e.g. #wordpress))
# Shows tweets for multiple users, multiple topics, and multiple hashtags blended together into single stream
http://kirill-novitchenko.com/tweet-blender/
Looks good. It owuld be perfect to integrate this options to this js. But it works anyway also as widget. :-)
how can i show more than one tweets?
thanks
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
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
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.
can it use search instead of id?
tnx
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?
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.
The script works fine for text/html but not for xhtml/xml in the most of modern browser except Opera.
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.
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.
Simon, your doctype on your site is xhtml but your mime-type not.