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)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D40297350.-%3B)
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