AjaxTwits – Load Tweets on your website with AJAX

Twitter is an amazing service to keep in touch with everyone on the Internet. It’s easy, fast and there are a lot of Twitter applications.

I came up with the idea to Ajaxify (is that even a word?) the tweets on my website. As you can see, it’s on the right, below the last.fm recently played. It’s called AjaxTwits!

This article will show you how to use AjaxTwits and how to install it on your website.

AjaxTwits - Load Tweets on your website with AJAX

Download AjaxTwits zip-archive Example AjaxTwits in action!

Example of AjaxTwits is located at: http://www.gayadesign.com/scripts/ajaxtwits/

AjaxTwits and all it’s files can be downloaded here: http://www.gayadesign.com/scripts/ajaxtwits/ajaxtwits.zip or the old version

Update notice:

There were a few things going from in the AjaxTwits class which have been fixed. Some tweets seems to make AjaxTwits stop working. I also included the date in the Javascript code.
Download the new zip to gain access to the improved code.

If you have an installation of AjaxTwits on your site you can replace the AjaxTwits.php class with the file from the new zip. The Javascript has changed to, but it’s not necessary to change.

What does AjaxTwits do?

  • Load a twitter timeline and / or the replies of a twitter account
  • Cache the results so you don’t stress the twitter servers
  • Avatar finder (auto update if user uploads a new one)
  • Load multiple timelines / replies from different accounts
  • AJAX support with JSON option or XML
  • Front-end Javascript output
  • Automatic hyperlink finder and @username linking
  • Easy to adjust to your likings

Why AjaxTwits?

The problem with loading twitter on the server side part of your website is that it will slow down the load time massively. Which means your pages will load pretty slow.

This is because of the use of external feeds and services, it takes some time to load them. The server will read the XML and RSS feeds very quickly, but PHP still has to load the files from the Twitter servers.

AjaxTwits keeps the load time separate from your website, meaning it will load after your page is loaded and not effecting the user experience. Yes, the services still need to be loaded. But the loading is done afterward.

The caching of results prevents the service to stop loading the feeds. Twitter has a build in limit of requests, so be gentle on their servers.
This also helps to load AjaxTwits very quickly and output tweets in a few milliseconds!

The twitter timeline is also limited to only your tweets and not those of other people. That’s why AjaxTweets also supports search queries performed on http://search.twitter.com/. AjaxTwits has an easy build-in option to get all the reply messages of a user and mix them into the timeline.

What do I need?

  • PHP with JSON and SimpleXML support (PHP 5.2.0 or greater)
  • A Twitter account to consume or a Twitter account of someone else
  • An FTP client to upload contents to the server

How to install:

AjaxTwits is fairly easy to install, the following steps will enable AjaxTwits on your website!

Step 1: Download and upload AjaxTwits

Download AjaxTwits here: http://www.gayadesign.com/scripts/ajaxtwits/ajaxtwits.zip.

Unzip the contents and upload them to your web server. Anywhere you’d like!

Step 2: Adjust the request file

In the “AjaxTwits” folder you just uploaded is a file called “AjaxTwitsRequest.php” and “AjaxTwitsUpdate.php“. Open this file in an editor.

//include AjaxTwits and create an object
include('AjaxTwits.php');
$ajaxTwits = new AjaxTwits;

//set the cache to a writable folder, to save xml files
$ajaxTwits->cachefolder = "AjaxTwits/cache";
//the amount of minutes the feed is cached
$ajaxTwits->cacheTime = 15;

//the amount of items you'll show
$ajaxTwits->itemCount = 6;

//add your twitter account feeds
$ajaxTwits->addTimeline("gayadesign");
$ajaxTwits->addReplies("gayadesign");

//this will output the information, JSON is for the Javascript application
$ajaxTwits->outputFeed("json");

Adjust the following line to your likings:

$ajaxTwits->cachefolder = "AjaxTwits/cache";
This is the folder where the XMLs will be cached. Enter the folder starting in the root of your website. So if you have AjaxTwits installed in /blog/AjaxTwits/ the cache folder should be blog/AjaxTwits/cache.

$ajaxTwits->cacheTime = 15;
The amount of minutes the XML should stay on your server before it will be refreshed. This means that every 15 minutes the timeline will be updated on your site. Adjust to your likings.

$ajaxTwits->itemCount = 6;
The amount of items you want to output on your website.

$ajaxTwits->addTimeline("gayadesign");
Load the public timeline of the given username.

$ajaxTwits->addReplies("gayadesign");
Load the replies of the given user. Every tweet on Twitter containing @gayadesign in this case.

Upload the adjusted file to your server if needed.

Step 3: Make the cache folder writable

Explore the server contents with an FTP client and make the cache folder (default: AjaxTwits/cache) writable using chmod 777.

This is for saving XML on the server.

Step 4: Include AjaxTwits on your webpage

In the header (<head>) of your HTML add the following code:

<script src="js/AjaxTwits.js" type="text/javascript"></script>
<link href='css/AjaxTwits.css' rel='stylesheet' type='text/css' />

This will load the necessary Javascript + the styling of the widget.

Step 5: Get the HTML of the widget ready

Add this to your HTML on the place you want to include the widget:

<ul id='AjaxTwits'>
    <li id='AjaxTwitsLoader'>
        <em>Loading tweets</em>
    </li>
</ul>
<script type="text/javascript">
    getAjaxTwits("AjaxTwits/AjaxTwitsRequest.php", 6);
</script>

The tweets that are loaded will be inserted into the unordered list with id AjaxTwits. The list item AjaxTwitsLoader will be deleted.

Adjust getAjaxTwits("AjaxTwits/AjaxTwitsRequest.php", "AjaxTwits/AjaxTwitsUpdate.php", 6); to your preferences.

The first parameter is the location of the AjaxTwitsRequest.php file. The second parameter is the location of the AjaxTwitsUpdate.php file. The third parameter is the amount of items to show.

Conclusion:

That's all you have to do! Not that much right?

You can adjust the CSS and mess around with the Javascript if you like.

Hope this will help you create a nice Twitter widget on your website.

Liked this article? Sharing is caring!

127 Comments on this subject

  1. Gaya said:

    Yeah, I though that half way through. First it was called AjaxTwitter. But AjaxTwits had a better ring to it. And I use the word tweets in the tut. Anyway, hope you still liked it ^^

  2. Freek said:

    I did exactly what the tutorial said but, I only get a screen with a black rectangle and the text: “Loading tweets”.

    (http://www.freekplak.net/twitter/)

    I guess I did something wrong or my ftp doesn’t suport the scripts or so anyone an idea what I could have done wrong?

    did chmod 777 and editted cachefolder to: twitter/AjaxTwits/cache

    Thanks in advance, would be great if it works :)

  3. Justin said:

    Thanks for the great ajax script, Gaya!

    I’m having some trouble getting it to work though.

    I got the same black rectangle as Freek… got any advice on this, Gaya?

  4. Gaya said:

    Hey Justin,

    Try the following code in top of the AjaxTwitsRequest file:

    ini_set(“display_errors”,”2″);
    ERROR_REPORTING(E_ALL);

    Setting it in the ini file won’t work in most situations.

  5. ray said:

    Hi’ I also downloaded ajaxtwits and tried installing it onto my website but I’m experiencing the same thing like Justin and Freek. I did everything in the tutorial but all I get is a blackbox that says “loading tweets”

    Could there be something else if 2 other people are experiencing the same problem in trying to get this work?

  6. Gaya said:

    Hey Ray!

    Freek’s problem was that the PHP version was too old. And Justins problem I couldn’t look into.
    If you send me a link through the contact form, I could that a look for you :)

    Thanks for checking my blog :)

  7. Jamie said:

    I’m also having trouble getting the script to work.

    On the page where the widget should be loading, I get:

    Loading tweets getAjaxTwits(“js/ajaxtwits/AjaxTwits/AjaxTwitsRequest.php”, 6);

    Any thoughts, Gaya? I sure hope we can make this work…this script is brilliant!

  8. Bobby said:

    I would like to know if this script will support multiple feeds and intertwine/combine them chronologically. The introduction says “Load multiple timelines / replies from different accounts,” but I’m not sure if that’s the same thing as I just described. I’ve been using this script to combine feeds:

    http://www.aftergeek.com/2008/02/combine-multiple-twitter-feeds-on.html

    But I’ve been desperately looking for a combined-feed ajax solution that won’t hang my site. Thanks.

  9. Gaya said:

    Hey Bobby! This script combines the feeds and sorts them according to time. So the tweets get mixed and laid out over time :) Hope this answers your question. Cheers!

  10. Hi!

    I get this error, when trying to use the script:

    Feil: unterminated regular expression literal
    Kildefil: http://jfm.no/ny/template/ajaxtwits/js/AjaxTwits.js
    Linje: 38, kolonne: 5
    Kildefil:

    The XML is here: http://jfm.no/ny/template/ajaxtwits/AjaxTwits/AjaxTwitsRequest.php

    The code i`m using to get the last tweet is:

    Loading tweets

    getAjaxTwits(“http://jfm.no/ny/template/ajaxtwits/AjaxTwits/AjaxTwitsRequest.php”, 1);

    Where have i gone wrong?

  11. Gaya said:

    Hi Jarand. That looks like a Javascript error. Seems like you are trying to push XML to your Javascript. This example is meant to only consume JSON, so try outputting JSON in the AjaxTwitsRequest.php file.
    Hope this helped you :) Good luck!

  12. Bobby said:

    Gaya — Thank you. This works beautifully, including for multiple feeds. Excellent work!

    I can’t find where the “loading” text is located. I’d like to edit it and perhaps even replace it with a spinner or animated gif.

    Thanks again!

  13. Bobby said:

    OK. I swear I’m not an idiot given my past two posts. But these are stumping me:

    (1) How do I hide the avatar? I tried remming out the avatar output in ajaxtwits.php but I still get it. Can it be that they’re still cached and will eventually clear?

    (2) Is there a way to get a relative time output per tweet (posted x mins/hrs/days ago)?

  14. miker said:

    bobby’s ? for posted x mins ago reminds me ifno — can line code be added for outputtting feedname in front like so — feedname: [feed] [post x ago]

  15. SanJoSharks said:

    @Bobby: U were able to get multiple feeds? How? I thought this would work in AjaxTwitsRequest:

    $ajaxTwits->addTimeline(“x-feed”);
    $ajaxTwits->addTimeline(“y-feed”);
    $ajaxTwits->addTimeline(“z-feed”);

    But it just hangs up the script and it gets stuck at loading…. How’d you do it? Has anyone else done it?

  16. Gaya said:

    @Bobby, @miker:
    You can change this in the Javascript by adding: ans.item[i].date somewhere. You did it to my own feeds. You can also remove the avatars in the Javascript (It’s needed or it will error).

    @SanJoSharks:
    I’ve experienced some problems with AjaxTwits myself. I’ve upgraded the script and will share it with you later (maybe tonight). Hope that will fix some things.

  17. Bobby said:

    Thanks for the quick response, Gaya! Looks like there’s been a flutter of interest suddenly.

    As for the date, if I wanted the Twitter URL to be linked to the relative date, this obviously doesn’t work:

    a.className = “twitter-link”;
    a.innerHTML = “ans.item[i].date”;

    What’s the proper syntax? Also, miker’s question sounds interesting: Is there an ans.item[i].date equivalent variable/call for feedname that can be used to precede a post like he wrote? That’d be awesome!

  18. Gaya said:

    Yeah, nice of people to have interest all of the sudden :)
    you don’t need the quotes to insert the date.

    a.innerHTML = ans.item[i].date;

    will do.

    For the feed name: there is nothing I have for that. sorry.

  19. Bobby said:

    Thanks for the help with the date. And, by trial and error, I found how to output the user name. Right now, I’m using this:

    a.innerHTML = “[posted " + ans.item[i].date + ” by ” + ans.item[i].user + “]”;

    That outputs “[posted DATE by USER]“!

    What I would really like to do, and I hope someone can help (I’m a JS idiot but know HTML/CSS well) is how to edit the js to accomplish an output like below. (Sorry, but don’t know how to post styled text in this comment box.)

    underlinebeginUSERunderlineend: POST [posted urlbeginDATEurldend]

    If anyone can show me how to add the underlining, colon, and brackets (without linking the brackets), I would GREATLY appreciate it.

    Sorry about all the detail questions, but I can’t wait to get this script live in my site!

  20. Bobby said:

    Answering my own question….

    To get this output:

    *user*: *message* [posted *2009/05/25*]

    I used the following code:

    var message = hyperlinks(ans.item[i].description);
    message = twitter_users(message);

    li.innerHTML += “” + ans.item[i].user + “: “;
    li.innerHTML += message + ” [";

    var a = document.createElement("A");
    a.href = ans.item[i].url;

    a.className = “twitter-link”;
    a.innerHTML = “posted ” + ans.item[i].date;

    li.appendChild(a);

    li.innerHTML += “]”;

    twitter.appendChild(li);

  21. El Pero Grande said:

    Great work here! Goodonya, Mr. Gaya, sir.

    Just put in site last nite and voila ,….two feeds working well together…until twitter went down for fordy minyutes. During that time I have loading message whole time on mozilla and firefox but a friend beta testing said in ie6 (blech) he got a timeout error screen.

    so my question is can there be timeout control added if twits dont load within certain time it gives ‘twitter is down’ message?

  22. Gaya said:

    @Bobby:
    Seems like you’ve been busy :D! Good! I love seeing other people trying to get the best out of code you didn’t write yourself. I’ll reply to your mail very soon :)

    @El Pero Grande
    Gracias signor! About the timeout: Good thinking! If I am going to implement the timeout thing, I’ll let you know :) Glad you liked the script!

  23. mikeyp said:

    i’ve noticed that a couple times a day the script gets stuck at “loading”. clearing the cache makes it work immediately. does that suggest a known problem, and is there anything i can do to fix it? thx.

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>