Work
SubscribeAdd Twitter to your blog (step-by-step)
Update - updated 31-May 2008
Updated to specify timeouts, and timeout functions - see options below. Also Twitter have changed their API so 'withFriends' now requires authentication. With friends will be disabled regardless until I find out what the new plan is.
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
Settings object:
- id: the ID from twitter.com (either username or numerical ID).
- 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, 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.
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
Finding your ID
The Twitter JavaScript plugin supports both the numerical ID and your username.
For example, my username on twitter is 'rem', so my homepage is http://twitter.com/rem.
If I want to use the ID, I can find it in the URL to my RSS feed - which is:
http://twitter.com/statuses/user_timeline/648873.rss
So my username ID is rem and my numerical ID is 648873.
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
Download the twitter.js script.
Add the following code within the head or (best at the bottom of the) body tag:
<script src="/twitter.js" type="text/javascript" charset="utf-8"></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.
Thank you very much, it worked really well!
That's a clever way to work around the AJAX restriction on loading data from a different site. I've been working on a twitter proxy to run on my site so that I could use ajax commands to get twitter data. I like this solution much better.
When I was working on my code, I was having problems with my browser caching the twitter data. It would only update about once an hour or so. Have you seen that issue with this code?
You don't mention licensing of this code anywhere. Copyleft? MIT-style? GPL? Public Domain? Hopefully, one of those.
Hi Remy,
This is a really neat piece of code - thank you. I'm using it with RapidWeaver, and it seems to not hide the progress indicator once the tweets have loaded. Sadly my JS knowledge is, well, lacking. Any pointers? Thanks! Nik
[...] + Add Twitter to your blog: um script para adicionar o Twitter no seu blog, diferente do badge oficial. [...]
@KennyH - on the browser caching you can try one of the following two to get around the problem:
1) Cache busting - add a random number to the end of the requested URL - then the browser won't cache it, e.g.
var cb_url = url '&cb=' Math.random();2) Use POST instead of a GET on the request. The browser can't cache POST requests so this also gets around the problem. However, with a POST you need to ensure the server will still serve up the page properly - but it's relatively easy to test.
On the license on the code - I've updated the file with a Creative Commons ShareAlike license - basically: help yourselves.
@Nik - If you drop me an example link I'll take a look at fixing the problem.
http://www.nikfletcher.com/20 is the URL. There's an assortment of Scripatculous scripts in there as well, but when I removed all the Javascript except twitters.js, it still appeared to not hide the loading animation. Thanks!
@Nik - my fault - there was a typo in the example I provided (typical). The parameter 'clearContent' should read 'clearContents'. That will fix it.
I've also just released a new version the twitter.js that uses a better load event, i.e. if fires before the images are loaded rather than waiting.
Fantastic. I've now started it using it on my 'live' site.
Many Thanks!
-N
great work, thx
is this script still working? i cant seem to make it work, and i cant see it working at nikfletcher's page either...
@chrischen - good point! I'm looking in to it now...
Hi all,
It looks like the URL that was in the twitter plugin I wrote was recently depreciated by Twitter. I've now updated the plugin and it's working again.
Good catch chrischen - cheers.
[...] twitter plugin has just been upgraded to (optionally) search for links in the twitter text and activate them as [...]
This is exactly what I've been looking for. Thanks for making this available!
How can I format the text, though? I'd like to make the, "about 15 minutes ago" text italicized and a different color so it stands out from the twitter text. I looked around in the js file, but I'm not a programmer and couldn't figure it out. Thanks for your help!
Open the twitter.js file in a text editor. You can edit the status messages.
For example, I translated them into Danish so they would fit on my site:
Yeah, this is perfect!
I'd also love to have the ability to format the text. Is there away to append a class to the generated span tags so that they are style-able? Like Tim, I'm not a programmer but assume something like this, or easier, should work.
Nice code, hats off to you my friend. Thanks for sharing this tutorial.
I can't seem to get mine to work: http://www.rapidmac.com
I looked through the JS file and the page code, but I can't figure out what could be causing the problem.
Never mind I fixed it. However, is there any (relatively easy) way to style the times text so it is different from the tweet text?
I have a group blog, 5 members, and was wondering if there was a way to send multiple ids and get 1 tweet per user. I tried multiple copies of the .js and setting divs as twitters1 twitters2 .... but that didnt work, I either got the only the last one to show up, or they others showed up but with the last person's prefix so they were not identified correctly.
[...] Twitter’s JavaScript blog plugin works in exactly the same way. You create a function to handle the data from Twitter, and insert a script tag. Once the script is inserted, it calls the function passing the Twitter data as a JSON object. [...]
Great code! How do I remove the bullet before the text?
Yes, I'd also like to figure out how to remove that pesky bullet...thanks in advance
Remove the bullet with css:
I did the css trick with my blog, http://natenews.tumblr.com. Is there a better way to re-align it after the indent besides adding: margin-left: -40px; ?
Perfect! Thanks Remy! We need to make this a WordPress plugin!
This is great! But I have a question: is there a way to DO NOT SHOW the REPLIES? I thought about the clearContents, but I don't know if this is possible... =]
Thank you! =]
@Borbs - do you mean that out of a list of, say 10 tweets, you want to ignore any that start with @myfriend?
If so, I'm in the process of doing some small upgrades to the script and I can include this feature as an option.
@Borbs - I've updated the twitter.js script to also support an
ignoreRepliesoption.I've also fixed HTML entities from appearing in the tweet and wrapped each logical block in a span with it's own class name:
Hi remy, thanks for the great script and also taking the time to help individuals like me implement it to my site.
Im trying to work out how to format the text to be trebuchet Ms bold 7pt White whn it shows the twitters.
i promise i have tried but cannot get the css to work, i have absolutely no idea how to write css and link it to the Twitter result.
Can you help please
thanks
Tommy
@Tommy - if you want all the text to be bold and white - this will do (assuming you're using 'twitters' as the ID on the container):
If you wanted to target specific blocks of content, such as just the time and make it, perhaps blue (you get the idea):
Remy, i will try this right now thanks for a very very prompt reply.
T
Hi Remy, can i just say wherever you are in the world, thank goodness. great help for a novice with pretty rudimentary coding skills. Your help was second to none and your script rocks. thanks so much for taking your time out and helping another Webhed.
you truly are a decent fella.
Best Regards, Cheers!
Tommy
http://www.innocentinteractive.com (My portfolio)
Probably no issue with the script at all but I'm having trouble with 2 pages acting differently:
http://ramchandra.me.uk/blog/
http://ramchandra.me.uk/about/
I've followed the exact same steps & in firefox -- spot on!
in IE however I get "Operation Aborted" message on the Blog page (not on the About) .. very weird. I'll update to your latest & greatest script & see if that helps.
Whatever change you made in that release -- fixed it
Yay!
Thanks a lot, Remy. This is a really cool script.
You can see it in my link: http://jayrobinson.name
Or check out my other site, a travel blog while I'm abroad: http://nopeanutbutter.com
Any way to pull the tweets of my friends as well as my own like Twitter does with one of their flash options?
Twitter
I have “Twitterlise” this site (via Remy Sharp), my WordPress site (via Twitter for WordPress), my Facebook profile (via Twitter Application For Facebook), my Windows Live Messenger (via Twessenger) and my Messenger Plus! Live (via Twit4Li...
Hi, I am currently using your script and I love it. Definitely the one after looking around for hours. I have a question. Where in the .js file could I put the date in parentheses?
@Sarah + @Hammer - I'm going to release the new version of the script today.
New features include, the ability to include friend's tweets, use of variables in the text (i.e. in the prefix you want the appropriate name to appear), and the biggest change - template driven output.
This will give you complete control over how the twitter appears, and in your case Sarah, you'll be able wrap the date or do as you please.
[...] Add Twitter to your blog (step-by-step) (tags: twitter javascript web web2.0 blog programming wordpress) [...]
Many, many thanks - this is JUST what I was looking for
With the addition of friends and the template driven output this is really quite fantastic.
I love the script! It's just what I was looking for. Thanks for sharing! Brilliant work!
Kind regards.
@Piotr - I see from your web site you've reverted back to 1.2 of Twitter.js. Is the new ones not working for you? If you have an example, I don't mind taking a look.
Remy, this is a newbie question. Where do I upload the script to? The theme root or the website root?
@Koka - it doesn't really matter, but if you want to keep things really simple, stick it in the root of your web site (usually htdocs) and refer to it as
/twitter.jsAbsolutely brilliant. The solution to a problem I've had for a good while.Thank you so much!
[...] Tools for regular Twitter digest posts and built-in posting from WP, and a combination of twitter.js and the Twitter Widget for my sidebar [...]
Hey, thanks for this. However, I don't want the resulting information to be within ul and li tags. I'm only telling the function to give me 1 update, and the reason is I want to put it within a p tag, but it keeps giving me an li tag no matter what. I've spent two hours trying to figure out how to do this to no avail and I'm going insane. I would really appreciate if you could help me with this, please.
[...] Add Twitter to your blog (step-by-step) Linked is a working example of loading twitters after the page has completed, thus preventing the whole page from locking up. [...]
Hello, it's a cool app, but i have a question.
We have a community blog and we would like to show all of our editors' twits (1 from each). How can i manage this, because this js just show the last one. Is there any easy way to implement it? Thanks.
@Isti - yep it does support exactly what you want.
Just use the script entry each time with a different id and username.
You can see a working example on this page, note the single tweet in the header of the blog, and the list in the blog post.
Where do you call the first getTwitters function? (below the title)
I promise this is my last question, please answer me! Thanks
@Isti - no problem
The first one is being loaded from my [theme]/js/main.js script - which is basically my bootup script.
Here's another example of two tweet functions running on the page for different users
Thank you very much!
Wow, nice in depth article, I have been thinking of integrating Twitter into my sidebar, I will definitely have to use this technique, when I do. Thanks!
Remy, this is a wonderful script and very useful but I have one issue with it. Including an <a href tag in the template section stops the page from validating. I use the script like so:
template: '<a href="http://www.twitter.com/dragindb">Paul is %text%...</a>'The only way to get it to validate is to remove the a tag. I think to solve the problem, at least in my case, the a tag could be output through the .js file. Unfortunately my javascript skills are severely lacking. What do you think? Do you have any other ideas?
@Paul - two different ways are available:
1) split out the string like this:
2) Or put your JavaScript in a separate file and import it via a <script src="xyz.js" ></script>
Is it possible to refresh the displayed Twitters every 5 minutes or so? I tried to call the getTwitters function with a setTimeout, but this doesn't seem to work.
Alert: Your link to AJAX indicators is a porn-spam site.
Not that I don't enjoy porn, but, you know, I was also interested in AJAX indicators.
Good catch! Duely updated to a site that hasn't been hijacked by anti-spinner campaigns!
Remy, this is awesome stuff. One question though - any thoughts as to why invoking this for multiple twitter feeds doesn't work in IE7 (only one instance loads) or *shudder* IE6 (no tweets ever load)? Even on this very page, I can only get one set of your tweets to load.
Everything is beautiful on Firefox; I just have to remember to check IE more often.
Hi, this is js exactly what I'm looking for but I'm not able to get it running.
I have the .js and css-file in place but can't figure out how to place the call in the template and in a page itself (I'm using inline js for WordPress for that matter).
Any help appreciated.
@Brian - Thanks for spotting the bug. It's now fixed in IE. Cheers!
@Thomas - if you've got an example I'll take a look for you. Drop me a link on this blog if that's okay.
@Remy here is the link http://randgaenge.net/
Fix worked perfectly Remy. Thank you much, and best of luck on your ride.
This is fantastic, I was just about to hack in a few additions to an older version of this when I found it had been updated. Couple of features I'd like to see are:
Detecting links (to any site) and writing a link tag around them;
Correcting grammar by adding a full stop to the end of any status without a punctuation mark.
These could both the turned on by options.
@Hugo - it's actually in the documentation, but not in the source, but try:
enableLinks: truein the config and it'll make links clickable.@Remy - Ah yeah, I realised this about 5 mins after pressing submit on my comment, it's great! Also I created a prototype function for correcting any lack of trailing grammar, it's as follows:
Also I noticed that if you have ignoreReplies set and your recent tweets are all replies (more than 1) then nothing is displayed. It's easily fixed by tweaking the script, but maybe an option for this?
By the way, ignoreReplies is a great feature!
@Huge - I don't know why I didn't do that earlier. I thought I'd have to keep re-requesting, but I changed the code a while ago to limit based on the count passed in. Anyway, grab version 1.10 and it should fine a tweet amongst the @replies.
Note that the max it can get is 20 tweets, so if the last 20 are all @replies, it won't show anything.
Sorry, but after lot or hour spend to debug it, i can't make your script working on my site.
I've been make a test page espacially without others scripaleous and prototype.. not working:
http://2009.mat.be/test.asp
It still loading
Can you help me?
Mat
@Mat - you've not specified the element ID correctly. Check out the two lines that are highlighted:
http://codedumper.com/atasi#8,13
It should read:
I'm feeling so stupid... lol But for my defense, it's written nowhere...
I've now anothers problems:
- Preload-test don's disapear: http://2009.mat.be/test.asp
- There is a bullet before and i've not specified that in templace
- on the true page (not the test one) twitters state is loaded after google syndication. Can i load it before?: http://2009.mat.be/content.asp?id=cv
Regards,
Mg
@Mat to try and answer your questions:
1. The documentation is both in the code (see @params) and as the very first thing on this page - but not to worry
2. The test page looks like it's change - there's only a couple of divs in it now.
3. That's the
<li>element. You'll need to style that with CSS, something likeul { list-style: none; }4. No - I suspect not. What's happening is Google's ads are loading at the page loads. If Google were to go down (highly unlikely) then it would hang your web page. This is the crux of my script. Twitter does go down, and if you have the traditional script they offer, when Twitter is down, it'll hang your web page from loading too. So, my Twitter script waits until the DOM has finished loading, then tells the page to load the tweets.
I hope that all helps. Cheers.
I can't seem to get my Twitters to load. If you could look at my site and tell me what I'm missing, I'd really appreciate it!
Please check here:
it does not disaeper:
http://2009.mat.be/content.asp?id=welcome&theme=1
@HelloKit - please see Mat's comment above your own.
@Mat - you've added the property
clearContentwhen it should beclearContentsWow, I'm stupid. Never mind. It was the container ID.
Okay, I just have one more small issue. I used CSS to remove the bullet, and margin-left: -40px to kill the indent, but that only works in Firefox. In IE, the negative margin causes the text to cut off. Is there a way to edit twitter.js to just get rid of the UL and LI elements altogether?
perfect
- THis was because i've too much trying before your first answer..
1) i've the same problem as HelloKit about indent.
2) What about the possibility to slowly hide the loading div and slowly show the loaded one with something like : http://github.com/madrobby/scriptaculous/wikis/effect-opacity
I've tried but don't see where to put some code but without acceptable results:
Code:
http://2009.mat.be/include/scripts/twitter_load.js
Results:
http://2009.mat.be/content.asp?id=welcome&theme=1
Thanks again... for you so helpfull advices
Mat
@Mat + HelloKit - indent:
#tweet ul { margin: 0; padding 0; } #tweet li { margin: 0; padding: 0; }then work from that. Good luck.Thanks. But you don't answer me to:
What about the possibility to slowly hide the loading div and slowly show the loaded one with something like : http://github.com/madrobby/scriptaculous/wikis/effect-opacity
Mat.
Thanks, Remy. I just finally figured that out on my own, but thanks so much for all your help! My badge now looks exactly the way it did before with the official Twitter badge, minus the annoying @replies, and with a cool "loading" animation. I love it!
Great code - saved me tons of load time - you can see it in action here: http://timothysykes.com
I just came back here and saw you updated the script. I replaced the script, however, the new script doesn't work for me. The tweets are not showing up. Can you help me please?
@Sarah - I should be able to. What the URL of the page?
I found the problem and got rid of it. I had to give the div an id name similiar to the name in the script.
Hi.
It's me again.
What about the possibility to slowly hide the loading div and slowly show the loaded one with something like : http://github.com/madrobby/scriptaculous/wikis/effect-opacity
I've tried but don't see where to put some code but without acceptable results:
Code:
http://2009.mat.be/include/scripts/twitter_load.js
Results:
http://2009.mat.be/content.asp?id=welcome&theme=1
Reagrds,
Mg
no more answer?
@Mat - as much as I hate saying 'no' - I don't have the time to write the upgrade you're requesting. If you want to have a crack, you need to edit the actual twitter.js code and change the line that delivers the UL:
what do you think about that:
http://2009.mat.be/content.asp?id=cv
regards,
Mg
@Mat - good work. I'd get a better matte on the spinner and it would be perfect.
Hi again.
I've a suggestion of update:
- setting a timout period after what somes action is possible: clearcontents, or displaying other things.. because lot of time twitter is down and is seems to load continuously..
Regards,
Mat
@Mat - with Twitter's recent outage that's exactly what I'm planning to do. Except with the advantage that even if the timeout is hit, the tweets could still load (depending on the browser timeout).
Watch this space.
I'm wondering if there's an easy way to paginate the results? I understand that the Twitter API limits requests to 20 at a time. It would be great if there could be an AJAX driven pagination to requests 21-40, etc.
Has anyone else tried this? Had success or failure?
Thanks in advance for any and all advice!
thanks, this was really helpful. now people don't have to wait for the sidebar to load my tweets before seeing the rest of the page load up.
@Mat. Love v1.10 for changing the max amount of tweets fetched, removing the 'too many replies' bug.
I think a timeout would be good. I've played with this before using a JavaScript timer with
_twitterTimer = setTimeout ('onTimeoutFunction()', 5000);on making the call to fetch the tweets andclearTimeout(_twitterTimer);on reaching a callback. With a function ofonTimeoutFunction()obviously updating the target with a 'failed' message (which is triggered after the time limit - in miliseconds). I had the feeling it was a little buggy however and there's probably a better way to do this.I'd also love to see some form of caching, this would improve loading time (obviously) and be a nice way to behave to the twitter server, but I'm not sure how this would be implemented! That's your job mister developer
Anyway, mucho thanks for the awesomeness again.
Thanks so much for this code. After some minor noodling this has accomplished exactly what I set out to plug in to my own site tonight, and I'm so very grateful for the work you did here. Keep it up.
As a side, (and I should mention I'm no programmer, so this might not be a great way to handle this...) I came up with a 'fake it' solution for the loader/timeout piece discussed here, to serve my own needs for the time being. I created an swf asset to drop into the progress indicator space, which cycles a loader graphic a few times then eventually lands at a "sorry, unavailable" type message. When twitter content loads it clears this out using your script, otherwise the 'sorry unavailable' message remains. Sample at kayos.com, upper right corner.
Thanks again, seriously.
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/
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.
[...] 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/ [...]
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?
[...] Add Twitter to your blog (step-by-step) [...]
[...] Twitter Script by Remy Sharp [...]
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?
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
[...] Twitter Script by Remy Sharp [...]
[...] 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, [...]
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).
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,
TJ
@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.
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.
[...] 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 [...]
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
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
[...] 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 [...]
same thing as Jon. No workey in IE. :(.
@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.
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
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
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?
@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.
This is great stuff..
Thank you so much Remy.
@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
I can only get one twitter feed to load when I have two feeds coded. Code is like this:
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.
@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!
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?
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.
This is awesome, thanks!
[...] Step by Step - Add Twitter to your blog [...]
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.
[...] Twitter.js by Remy Sharp [...]
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
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
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...
[...] javascript, integrar twitter en tu blog [...]
[...] The procedure is pretty not-so-complex sorts. And with a simple but informative article like this your work is greatly reduced. Thanks Remy [...]
@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
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
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.
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:
Hmmm... might have to retract my previous comment. I think the browser may have been caching things weirdly. Investigating...
OK, last comment, I promise. I think the problem I ran into was just the limit on the Twitter API.
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.
[...] 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. [...]
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:
Thank you again,
Brandon
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?
[...] 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, [...]
can someone help out a brand newbie. i have some basic css and html knowledge, but seriously lacking on the javascript.
can someone just correct me where i dont understand.
currently ive basicly just added the javascript code from twitter.com to my index file and it seem to be getting the updates. to use this method, it sounds that i must first copy this twitter.js file to the same folder where my index is. then copy the code...
getTwitters('tweet', { id: 'rem', count: 1, enableLinks: true, ignoreReplies: true, clearContents: true, template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/" rel="nofollow">%time%</a>'});
in either my head tage or at the end of the body? am i right so far?
and if so, do i still leave the javascript that i originally got from twitter.com as i have it. or is this script completely replacing it?
and in the above code, what all do i need to update with my info?
i see a place where it has id: 'remi' so im guessing that i need to replace that with my twitter name or number. is there any other entries in this java script that i need to replace with my own.
is there any thing in that twitter.js file i need to replace?
currently im just trying to get basic functionality and know that it is working. ultimately all i want is something indicating that its loading if twitter is acting up, and to display an indication that twitter is down if for some reason twitter dont load.
hello everyone,
ok i figured out the answer to the above question that i posted about how to set everything up.
the next question that i have is that, after attempting to load the twitters with the progress gif going, if for some reason the twitters dont load after about 10secs, i want the loading gif to disapear and to have a message pop up saying that "something is wront with twitter..."
sorry for the inexperience, in the mean time ill fish through these 150 post for an answer.
can you also tell me how to test the above, for example can i create an error in the code and have it try to load twitter, then after 10sec bring up the message?
please help..
Well, I was really excited about this. However, it doesn't work on Firefox.
Nevermind. It works intermittently in either browser for me. Seems like an error on my part.
Hey, so I feel pretty dumb for even asking... but is this code possible to use with a Tumblr blog? If so, how? As you can tell, noob only begins to describe me.
Twitter Code Enhancement...?
Remy, fantastic code! I really appreciate the great code you've provided here!
I recently decided to implement Twitter on to one of our blogs for my wife and I. In doing so, we found this great script over at AfterGlide that allowed us to deliver both of our tweets in one single timeline: http://www.aftergeek.com/2008/02/combine-multiple-twitter-feeds-on.html
However, as you're obviously aware, Twitter has a habit of going down or going pretty slow at times. This in turn causes my website to stop loading for the user as their browser waits for Twitter to respond.
I searched around and found your additional amazing script that works through that loading issue.
So now I have two scripts with equally desired functionality (multiple user tweets in order of 'tweet' time + faster page loads with a pleasant 'please wait while my tweets load' message) but very little knowledge on how to incorporate them together. If I could somehow understand how to take your code and insert it into Jeremy's, or vice versa, I think we'd have a perfect winner here.
Is this something you might be interested in looking into? I'm going to query Jeremy, the author of this other code, with the same request. If neither of you are interested in combining your two code bases, then I'll guess I'm stuck trying to learn it myself. But I figured I try the path of least resistance first - LOL!
If nothing else, thanks for listening and thanks for the great code to begin with!
- Bruce
I've looked into the Opera problem a little: it seems as if the Twitter callback doesn't provide any data after refreshing the page (i.e. the obj array is empty). The Twitter REST API documentation doesn't mention anything about the callback parameter, but I managed to stumble across this:
http://www.wait-till-i.com/2008/04/11/opera-rest-apis-module-patterns-and-generated-script-nodes
although there are no sightings of that particular error message.
Not being the JavaScript guru I wish to become, I'm trying to wrap my head around the "mad currying" parts of the code
@Remy: thanks for this great piece of script!
Cheers,
Martin
@Martin Häger,
so how to force Opera to display this script correctly?
Tweets that I delete still show up, until a new tweet is added. Any idea why?
@Bryan - that's really odd. The twitterjs only shows what Twitter sends through - so it sounds like the API is still sending through the deleted items. Perhaps raise it on getsatifaction.com ?
Hi Remy - this is great stuff!
I just have a quick question - is it possible to have 2 blocks of JS for the same user? I am trying to display the twitters of the same person on 2 different pages of the same site, using different html in the 'template'.
So far, I have only been able to make it work by using the username in one block of JS, and the numerical ID in the other. Just wandered if there was another way to do this?
Any advise would be much appreciated! Cheers!
Great article. Definately usefull. Thanks a lot to the author.
Worked a treat - thanks for sharing!
@Paul - You Said "
@Paul - two different ways are available:
1) split out the string like this:
(I didn't do this one)
2) Or put your JavaScript in a separate file and import it via a
<script src="xyz.js"></script>I put it in a separate file called social.js and linked to it.
but it won't load my tweets, what's going on. Heres the code which is just before the body tag but I have tried it in the head section
inside the social file is this
and in my "social sidebar"
Its ok I screwed up some code, my bad >:(
The script doesn't seem to be working today. Perhaps something changed with Twitter?
@Amos - nice spot. Though no - it's not my script. I've just checked the 'net' tab in Firebug and it looks like Twitter's API is throwing an internal server error:
http://www.twitter.com/statuses/user_timeline/rem.json?callback=twitterCallback1&count=20
I'm sure they've got their code monkies on it and should fix it soon enough (fingers crossed!)
I notice that in your newest version (1.11.1) you incorrectly use "setTimeout" function because it take millisecond till timeout as a parameter.
from line 143
and from line 180
because you use value of 10 millisecond instead of 10000 millisecond (10 second)
the code from line 180 should be
sorry for my bad english but I hope you'll get the point...
@NuttyKnot (I edit your code down a touch - I hope you don't mind). I don't know how that got in because I remember seeing that before and fixing it, I just have reversed it back in! Thanks for pointing it out - I'll sort it now.
I can see that its working at your page but I have spent the last 90minutes trying to make it working but can't do it. I even tried this on a blank page with nothing else and it didn't even work on that one too.
I created a file load.html with twitter.js in the same directory. Contents of load.html were:
Even this is not working. Any help would be appreciated!
@Ashfame container div id should be "tweet" (as in the function)
"@Ashfame container div id should be "tweet" (as in the function)"
Thanks; this was really stumping me.
Maybe edit the sample code, in the step by step, to have the id read tweet or put twitter in the sample js.
Hi, Remy! First, I want to thank you for writing this code. For those of us who aren't Java developers, it makes life a lot easier.
I have a very stupid question, though -- I'm adding this to an iWeb page using the iWeb "HTML Snippet" tool. I put together a CSS file with some of the code listed above to get rid of the bullets and format the text. How do I call this from the HTML?
Thanks in advance for your help.
Ignore my first message (above). I figured out how to call that. However, the "bulletproofing" is not working in my undoubtedly crappy CSS file.
Some day I will learn how this all works... Today, I'm trying to get an article written. I'd sure appreciate your help.
Thanks!
How difficult would it be to define a custom tweet prefix to ignore in the same way @replies are ignored? Example: my new blog posts get tweeted with a prefix of "[confoozled.com]". Having these show up on the blog is kind of redundant. Instead of having to quickly think up something new to say after I post an entry, it would be nice if these just didn't show to begin with.
Looks like Twitter have broken things again. Just since yesterday, I keep getting the spinning wheel when tweets are trying to load ("Please wait while my tweets load")....any ideas as to a work around for this? I see the the same thing happening here, so it's not just at my end.
Thanks.
why is that the content disappears on page refresh? The first time it shows all the tweets... but when you refresh the page they disappear? It does this locally for me as well as online
OK, all is well again. Twitter had a bug and they just fixed it. You can follow this thread if interested...
http://getsatisfaction.com/twitter/topics/my_blogs_twitter_feed_wont_remain_keeps_disappearing_help
Hi there. I still can not make it work..Anybody able to tell why? this is the simple page I'm including the script into: http://www.morenafiore.com/new/twitter.html
@morena:
set id to containing div to "tweet", not "twitters"
Great script; I've used it to replace Twitter's "official" script, so I can exclude replies and change the template. One suggestion, though: In the documentation on this page, you name the container "twitters" in the HTML but refer to it as "tweet" in the JavaScript. Consistency would make this a bit less confusing. Thanks!
@Trevor + everyone else that pointed it out - thanks! I've now sorted out the example so that the ID is consistently referred to using the same name. Sorry for the confusion!
Remy, what about Opera? The alternative script: http://tweet.seaofclouds.com/
works fine - I mean after refresh tweets don't disapear.
@grotos - basically there's some strange Opera/Twitter thing going on, where the result is coming back empty. I'm certain it's on the server side - because the content changes, but it's to do with Opera too. Just try putting the JSON hit in Opera, then hit it again, it'll come back empty.
The 'seaofclouds' works because they're hitting the Twitter search API. I've been toying with moving to the search API, particularly as it can also support getting some friend tweets.
Perhaps it's time to move across to the different API now?
How can I add linebreaks (or {br}) in between the twitter entries? Help please.
@Remy: Thanks for clarifying. for now I'll have to stick to 'seaofclouds' solution.
[...] Twitter Plugin: Add Twitter to your blog step-by-step. [...]
Hi all!
For me, the script works fine, thks Remy
but I noticed that wont refresh from some hours ago... That's a problem of Twitter or of my implementation of the script?
That's my page:
http://www.ekilater.com/
Thanks in advance!
Iván
Ok, no prob.
I noticed that the thing is the script doesn't load any twitt starting with @..
That's normal, right?
Thanks! just what i was looking for and really easy to implement!
Hey Remy, just wondering if you fixed the IE bug talked about back in August.
It looks like the feed on your site now works in IE, but still not working for me, and haven't seen anything in your comments to suggest it's been fixed.
I downloaded the latest and tested it on my test server, didn't work for me. Maybe I missed something else?
What's the score?
My website uses Smarty templates and this bit of code:
is causing a syntax error. Any advise?
[...] Add Twitter to your blog (step-by-step) [...]
Thanks so much for this--great script, all the way around. I'm having some inconsistent results with this script in IE only; the feed loads sometimes but not others. When it does not load the "Please Wait...etc" stays up there and will not leave. Any thoughts on what might cause this?
Thanks,
Nick
[...] and are tech minded you can even add Twitter to you blog by using this script by Remy Sharp: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/ All the codes and step by step instructions are found at his blog at [...]
Is it possible to only show the message that contains the keyword I want?
Let's say, I want to show my tweet that only has the work "PHP" and not the other one?
Thanks for your help.
Hi thanks for the code it's awesome
but actually I dont want to use tag
how can I do that?
Works really well thanks.
Rob
Hi Remy.
Excellent!
Just one small point. When twitter returns an error I can see no way way catching it and displaying the error.
I tried editing your code, but my JS skills are not up to it. I couldn't see why the renderTwitter function didn't run when an error was returned, even though the ready state was fired (I think)!
Here's a sample error generated by sending a phoney twitter ID:
twitterCallback1({"request":"\/statuses\/user_timeline\/sdfsdsdfsdf.json?callback=twitterCallback1&count=20","error":"Not found"})
You also get an error if you exceed 100 requests per hour.
Just a suggestion for the next release. Sorry I was too useless to do it for you
Steve
RRR'r Twitter me timbers... Excellent script, I've gotten the bug of late so this will be implemented asap. Thanks very much.
This is a fantastically easy-to-use piece of webdev. Thank you very much!
Remy, amazing job, I knew nothing about Twitter and was helping a friend broadcast it on her website. Had it up and running withing minutes. Love the way it is called so effortlessly. Thanks!
Awesome script, works perfect for me, but I have one question. I am showing the most recent tweet in a larger font and I have older tweets below it. So the layout I want to use is one tweet then 5 tweets underneath. The script pulls everything fine, but on the list of 5 I want to pull 5 after the most recent. I'm not sure how to edit the js file to fix this. I was also thinking of pulling in 6 and using css to format the top one. Any tips on how this can be done?
Hey Remy, Nice script! I got a question ,. how can i have several tweets in the timeline? Is it possible with your script?
ORSUM - simply ORSUM
Took the code as it is and integrated it into people's profiles on my website - like this - http://www.runsaturday.com/Profile/TabId/82/UserId/3/Default.aspx
Then took the code and extended it to allow a search term to be used (I suspect there were other ways of doing this but I wanted to play!) - http://www.runsaturday.com/Talk/Twittering/tabid/108/Default.aspx
Have had some problems running it under Opera (eeek - opera) and some problems with the timezone returned from searches - but overall simply ORSUM
Next time I'm in Brighton I shall buy you a beer (and chips)
Here's an attempt at my code...
- but postable removed all the + characters!
We too are having the problem... Please wait while my tweets load
If you can't wait - check out what I've been twittering
Please help- any ideas!? Thanks.
Got a problem
I've implemented it, perfectly, everything works fine in Firefox, but not in Safari! It works if i empty my cache through Safari, then refresh. If i just click refresh without clearing anything, it doesn't show! I'm using the latest Safari 4 Beta, so i guess this is just a bug, but i was wondering if you have any tips? I've tried attaching some metadata cache scripts, but nothing seems to work.
Thanks!
Hi, Rem,
Thanks for the plug in!
I installed it on my personal website and it was working for for days, but today I noticed a change: it seems like any new tweets show only the first time I load my page. If I reload, the tweet disappears, and it just shows blank. What could be going on? I don't think I changed anything.
Thanks!
Nevermind, I figured it out. It seems to be a problem with Safari 4. Go figure.
Thanks a lot, Remy. This is far superior to the script twitter makes available.
When I use this in Safari 4 (mac), it loads fine the first time, but if I refresh the page, it'll clear the "Loading…" text but fails to actually load my tweets. But If I empty the cache, it'll load it the tweets again.
I tried changing "getTwitters('tweet', { " to "postTwitters('tweet', { " but this won't load the tweets at all.
Is there a fix for this? I love the script, but its a bummer it'll work in every browser but Safari 4.
Script works for the most part pretty great... though the new version seems to not pull anything up in Safari 4, and version 1.11.2 does pull the tweets up, but it keeps the loading text at the bottom. any ideas? thanks!
Hi, my doudt is how i can do for the post have one limited number of characters, its possible? In PHP language i can read the string, but in this case I cant read the variable %text%. Somebody can help me?
Hi Remy
I just pulled the widget from Twitter.. and it seems to work for what I want - except the space around the div area
..will using your set-up give me more control over the display?
See here at the foot of my home page:
http://www.ezs3.com/public/main.cfm
TomC
I have been playing with your script and the twitter widget script. I have been able to add in the usernames and icons. But it looks like i am unable to add friends statuses. Though in the twitter widget you can just change user_status to friends_status and i can get the updates. Unfortunately i don't know how to add in their usernames or icons. I have downloaded the blogger.js file, but i am not sure what i need to alter.
Any help would be appreciated. Thanks. you can dm on twitter @aaronjbates
Will this work for displaying the tweets of multiple Twitter users, e.g. for a family:
Dad
tweets
Mum
tweets
etc.
Great script ... just what I needed. It also works well embedded in a gadget for iGoogle. Tried to use Twitter's scripts at first, but couldn't figure out the css to change the Time formatting. Your script made it easy, though.
I've copied the templates as you have them, but I can't get more than one tweet to display correctly. 1 twitter is fine, but if I set the count to 2 or more, they try to display on top of each other. It appears that it isn't creating new list tiem () on my site.
Anybody have any ideas as to why?
Wow, that's great code, thanks!
Now go teach Twitter how to do their jobs properly
thanks for this great app for my website, though i have some problems with opening the (xxx days ago) link, it opens in my iframe.. I've set _blank , but doenst work.. please help?
I think there is an error in your css file. The last piece should read:
#twitters SPAN.status {
font-style: italic;
}
Also, I made two changes in order to get tag queries to work. One triggers a tag query using '#' in the id, e.g. '#sxsw'. One change is in the line before the "renderTwitters" call:
if ("results" in obj) {obj = obj.results;} //BP
renderTwitters(obj, options);
and a 3 line replacement for the url assignment:
var url;
if ('#' === id[0]) {url = 'http://search.twitter.com/search.json?q=%23' + id.substring(1,id.length) + '&callback=twitterCallback' + guid + '&count=20';}
else {url = 'http://www.twitter.com/statuses/' + (options.withFriends ? 'friends_timeline' : 'user_timeline') + '/' + id + '.json?callback=twitterCallback' + guid + '&count=20&cb=' + Math.random();}
Here's the template I used:
template: ' %from_user% said: "%text%" %created_at%'
This seems to work for IE and Firefox on Windows and Firefox on Mac, but not Safari. Any ideas on how to make it work for Safari would be appreciated.
Its working...Thanks Remi......
Hi.
I have the same problem as Justin. I'm using this implementation inside an iframe and need the links to open in a new window. Any ideas how to make that happen?
Any clues are really, really appreciated.
thanks in advance,
Keith.
I'm trying to change the date format to:
20 March 2009
I've gotten this far...
20 Mar
but i dont know where or what to change to make the month the full text and put in the year also
thanks, great great script!
-Statice
[...] 1. Download twitter.js from Google 2. To install the code so that it doesn’t “hang”, follow Remy Sharp’s excellent step by step guide [...]
[...] Option 2 - The Unofficial Way: 1. Download twitter.js from Google 2. To install the code so that it doesn’t “hang”, follow Remy Sharp’s excellent step by step guide [...]
Hi Rema. love your work. got it going to follow my mate lance armstrong on my site. Do you have any view on how I might combine multiple tweets from different people into one list in time order? thanks
Does anyone have any problems with the script and IE6 or IE7. It seems to not work for me. It does perfectly for other browsers. Not sure if its the script of other scripts on my site. thanks
I love the tool, but my %text% just runs off the page and doesn't line-break. any idea why?
http://tinyurl.com/c6qxbv
This seems like a great and popular solution - just seeing how long this thread has been opened and how many people have commented. My question (and maybe I am missing something obvious): is this solution superior to the embed solutions that Twitter provides (Flash and JS/HTML)? Or was it developed before that was available from Twitter?
I'm looking for a way to display a set of specific tweets in a blog post. ie. A user tweeted during a presentation and I want it to always display those specific tweets. Is it possible to get the script to display specific tweets with their status id instead of having it load the latest tweets?
Whew, you sure have a lot of comments on this page. Just wanted to add one (sorry, heh) and say this is a great script, and I was able to implement it flawlessly into my personal blog. Thanks!
I get a problem in IE7/6 too. I downloaded the latest version but nothing loads at all. Every other browser works fine - Chrome, Opera, Firefox, Safari.
Strangest part is, it works fine in IE7 when i come to this site. What could be the issue there?
Sorry, but I am a little confused, perhaps it's just because it is late. But never-the-less I can't seem to make this work. Here is what I did...
I've uploaded the Twitter.js file to my server. I've added the following script to my header:
getTwitters('tweet', {
id: 'rem',
count: 1,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '"%text%" %time%'
});
(I have changed the user screen name to match mine).
I've added the following to my sidebar:
Please wait while my tweets load
If you can't wait - check out what I've been twittering
But what I am confused about is what is the code that goes in the sidebar that calls the script into the sidebar.
The user_profile_image_url for avatar has been updated to profile_image_url in remy's latest JS release.
I thought it'd be best to post it here since the post itself wasn't updated and I was wondering why my avatar wasn't loading at first.
My bad. It's still the same. But I couldn't find the documentation the %user_profile_image_url% is wrapped in IMG tags.
Ahhhh this is perfect. Removing those @ replies is essential! Excellent, so glad I found this page.
This is PERFECT, I had been hunting for AGES to find away to get rid of the @replies.
How do I get rid of the bullet point... in the Java Script? In the div? in the script? HELP!
is there a way to provide a message if the username is bad or have been deactivated?
Hi micah Honeycutt, do you manage to solve the text run off the page issues.
Just remove the line white-space: nowrap; at the twitter.css will solve it.
.twitters ul {
list-style: none;
padding: 0;
white-space: nowrap; (remove this line)
}
Hope this will help.
I don't understand this. How do I add this to a Blogger blog?
Could you spell it out to me as though I'm a two year old? Because I think this should be easier.
Thank you,
Gambit
Is there any way to force the feed to reload?
I'm using ajax tabs, and though the twitter feed works when the site is loaded, when a user navigates away and then back to the twitter feed, it won't reload.
Here's the site so far: mrfalconmusic.com/remysharp
The feed loads at first, but if you click on another tab, then back, it won't.
Warning: watch your step.
Cool! Thanks! How does a site like http://www.twixdagen.se work? It got several twitter feeds into one feed.
I cannot get rid of that dang bullet. Im not sure if im not sure whats wrong. i know i add twitter_update_list li {
list-style-type: none;
} but then what?
I dont know what i was thinking yesterday. I wasnt paying attention at all. /facepalm
Hi
Thanks for the code. It all works for me except that I can't get replies to show. I have the ignoreReplies: false flag set. I'm new to Twitter so I'm assuming a reply is when I send a Tweet to @username
Any thoughts appreciated
Thanks
Tim
nice work...but it broke every single javascript link on my ASP.NET 2.0 page.
also, I had to use
getTwitters(
'twitter_update_list',
'tylerazevedo',
1,
{ enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '%text% %time%' }
);
to get it to work...notice i moved the { over 2 or 3 parameters.
I assumed this was because in the file (1.12.2) I downloaded you only defined the params I enclosed in brackets as optional.
This is the only javascript I have on the page since I'm more of a server side developer....the error I am getting on any browser when the page loads says that whatever element is referenced in the javascript immediately after my reference to your file is null. So if it is in the head, it says 'theForm' is null. If I put it before a content place holder it says 'theContentPlaceHolder' is null.
This is only if I reference it as a file. If I put the javascript directly on the page it works fine. But I'd rather not bloat my master page
I fixed it by creating a new script block and declare a worthless variable immediately after the script block used to reference your file. It works, just kinda funny that I have to do that.
Great script! Any chance of this API being updated to support blasting out tweets from an account rather than just pulling down the feed?
Great script - thank you! Quick query for you please - I have incorporated your script into my signature on my forum. However, if I have multiple posts in a thread on any given page, the tweets only appear in the first instance and not for the remaining posts containing my signature on that page. So basically, how do I get the script to fill in all the <div id="tweet"> boxes and not just the first one? Thanks
@10drill: Thank you! Just what I needed.
This is really a great script, especially the spinner while content loads in the background! That is a function that I would desperately like to add to this multitweet script, which allows multiple scripts to be strung together chronologically. That multitweet script works brilliantly, but for the all-to-common Twitter delays that greatly delays the rest of the page-load. I wonder if anyone would be kind enough to show how to adapt the spinner/background-load portion of remy's script with the multitweet script? Thanks.
I can't get this to load anything.. I'm an above average programmer and followed the directions to a 't' but my tweets never show up at http://www.freediskspace.com.. can anyone help??
...I put the second bit of code into a separate js file, which has seemed the solve the problem. Thanks, great code!
Hi Remy. really love this script you have written, though I am having one issue, and it only appears in Opera.
9:27 PM 22 Mayth - this is the date format I am seeing, but only in Opera, it would appear to be fine in Ffox, Safari, IE and Chrome however. Is this a known issue, or do you know a work around to solve it?
Many thanks! Jonny
This is great! Is there any way to send the links to a new page? Thanks!
Two questions
1. How do I get the date/time to display in a different format?
2. How do I get it to stop trying to load after a certain time.. though it does load lastit does hang up other javascript from displaying properly..basically i just need an ontimeout function that does nothing?
it only hangs part of the page for a few seconds and only in FF and Safari, not in IE
here is a page example.. the tabs will not display until twitter is loaded... again this does not hang up in IE
http://www.levelninesports.com/head-xenon-skis-156cm-p-5072.html
handy code! I placed it on a blog. What the heck did I do to get the post time all messed up? If I tweet at 7:15 pm (and the time shows correctly on Twitter) why does my blog display my post as 2:15 am? Is there a setting in this code that I've overlooked? My blog uses wordpress if that makes any difference.
hi,
Very nice js, thank you.
But I have a problem with IE8 (always IE...) :
The tweets are loading fine, but when I try to display the page with their new "compatibility display" thing, tweets are not loading anymore.
I don't understand where it does come from, I think I have put the code right... but on your page tweets are always loading fine with IE8, with or with "compatibility display" enabled, could you check this please ?
Thanks.
(sorry my english is not very good :/ )
Is there a way to call another JS method once the twitter feed displays? I am using twitter js with CurvyCorners and the dynamic HTML breaks in IE7/8. I need to call a redraw method on curvy corners but I do not know when the tweets load at the moment.
One more person here to say your script is awesome!!
Wow g8, I was finding this script for my site. Thanks for sharing ur knowledge
WORKS LIKE A CHARM! THANKS REM! you are an internet artist!
I've done hours of research, this is probably the best twitter feed code out there. I have one question for you.. I want to display a feed from Twitter rather than an id from a specific account.
For example Twitter search's feed of 'cnn': http://search.twitter.com/search.atom?q=cnn Is there a way to tell this script to pull up this feed rather than a users feed?
Thank you
great script perfect for what i needed can i use this script in commercial projects ?
Hey Remy,
So i am using this code to add twiiter feed to my home page- I would like to add multiple people in one container or "box"
Please advice
thanks
nuidee
Hi Remy,
Thanks very much Remy. I am going to add twitter into this blog: http://www.everlastgenerators.com/welding-equipments/blog.php
Is there a way to not have bullets next to each twitter update? I'm baffled. I've sifted through the code for well over an hour to no avail haha.
Any help would be greatly appreciated.
Thanks for a great script!!! However I wonder if there's an easy way to get access to password protected tweets too? Maybe a workaround? Thanks!
Very useful piece of javascript code!
And as you have also developed the Dotclear plugin to go with, I really had nothing else to do to use it.
Not being fluent in javascript, I was wondering if there would a simple way to get only the 'fav' tweets for a user. The reason for this is the following : we wanted to give visibility to people who tweet about us by displaying their tweets only. We add them to our tweeter account's favourites on the go.
And we think it's a good way to help our 'passing by' readers connect to others who share a strong enough interest in what we do to RT us.
Anyway, thanks for this great tool.
Is there a way to implement this on facebook fbml boxes? Standard twitterbadges are not working
Loving this script, especially how easily it can be styled via css.
Remy - your script is perfect - but I cannot get it to work within Typepad - loaded the container script - 100% AOK - but when I copy and post the JS script from your webpage - it totally disappears - when I download the entire script (1.2.2) and then copy and post - it is remaining as text - all this while following the instructions from Typepad -
Script can be added to a Post or Page using the HTML editor. Click the
HTML tab on the Compose page and paste in the code. You will not be
able to use the Rich Text editor when adding complex script to your
post or page.
Can you assist - thanks -
Buff
I set enableLinks:false, but i still keep getting functioning links in the output. is there a way to disable them, or make them open in a new window? thanks
This is Great!
Is there a way to have only tweets with a particular #tag load? For example, yammer only reads tweets with #yam and it's very convenient.
Remy -
Forget the first message - june 26 - 12:45 - got the whole script working - very slick -
I do have a problem - using Typepad - the objective is to have feed to individual posts - i.e. - post #1 gets the feed of tweet t#1 - post 2 gets the feed of tweet #2 - etc -
What is happening is that when the posts are viewed as stand alones - i.e - with their permalink address - one post per page - the script is perfect -
However - when the main page of the blog is pulled up - shows post #1 - #2 - #3 etc - all the feeds show up in the newest post - i.e. - post #1 shows the feeds for #1 - #2 - and - #3 -
The folks at typepad are stumped - as am I - their suggestion - which I already tried - was to load multiple scripts into the file manager - i.e - 1.2.2 & 1.2.2a & 1.2.2b - giving each post its own script to pull from - that did not work - the consolidation in one post - with nothing showing in the #2 or #3 posts continued -
Is this a limit of your software - am I doing something wrong - is there a workaround -
Thanks
Buff