AJAX based twitter Status Loader written on jQuery – Open Source Widget from iTg for Blog/Website

After the success of our first Project on AJAX based Blogger Recent Post loader, we finally came up with the brand new and OPEN SOURCE AJAX based Twitter Status loader. You can see the demo here or on our blog itself! This is basically an jQuery/AJAX widget which loads the recent updates from any twitter user, upto a number of 200. Just like any other AJAX based widgets, the main advantage of the widget is that, it will load the twitter status or updates after the complete loading the whole page. Also it will load in background so you will not notice any decrement in the loading time of your site. Now, do you remember how the down time of twitter got a bad impact on your site recently? So, AJAX based widget is the best solution for you in that case!

Also, we have minified the JavaScript in order to save the bandwidth (only 2.2KB) and you can either download it or host directly from Google Codes. So read below, to know more about implementation guide and features…

Best Features of AJAX Based Twitter Update/Status Loader:

• Based totally on AJAX/jQuery. Loading is much faster and does not slow down your Web page loading time.
• You can show the tweets of any account up to a number of 200. All are easily customizable using simple Options.
• You can append any loading text or Image to the container. It will be removed once the widget has loaded the twitter status properly and has listed them down inside the container. We have given you a free and ready-made image on the examples. Also you can check here for Free AJAX type loading image generators.
• You should previously include a container div with an unique Id to load the tweets. Also, if the given container id is not found, then it will write a div with the id you have specified, on the particular position of the document where the function is called.

Below are usage and guide…

What does the AJAX based Twitter loader do actually?

It is based on the Twitter Status API. Using AJAX, we call the twitter JSON API of user-timeline with proper parameter and pass through our function to extract the status from the response. A result of the list would look like this:

<ul class="twitter-ul">

  <li>

    <span>@<a href="http://twitter.com/omarabid">omarabid</a> check zedge.net or mobile9.com or ownskin.com [for themes]! If u need nething else u can ask me :)</span> <a class="c1" href="http://twitter.com/swashata/statuses/3244440953">1 day ago</a>

  </li>

  <li>

    <span>Trying to make an AJAX twitter loader widget using the Twitter API <a href="http://apiwiki.twitter.com/Return-Values">http://apiwiki.twitter.com/Return-Values</a> It is quite cool B-)</span> <a class="c1" href="http://twitter.com/swashata/statuses/3206105498">3 days ago</a>

  </li>

  <li>

    <span>Send FREE SMS from Internet to any Mobile Phone using top 5 SMS sites <a href="http://cli.gs/5YLre">http://cli.gs/5YLre</a></span> <a class="c1" href="http://twitter.com/swashata/statuses/3204928144">3 days ago</a>

  </li>

  <li>

    <span>RT @<a href="http://twitter.com/anterpreet">anterpreet</a> #Sponsored #Tweets launches – Is it for you? <a href="http://su.pr/2h9QpF">http://su.pr/2h9QpF</a> A cool answer is NO</span> <a class="c1" href="http://twitter.com/swashata/statuses/3165527675">6 days ago</a>

  </li>

  <li>

    <span>Rock on with these 10 cool iPhone music apps <a href="http://bit.ly/PEtnO">http://bit.ly/PEtnO</a></span> <a class="c1" href="http://twitter.com/swashata/statuses/3164725497">6 days ago</a>

  </li>

  <li>

    <span>40 (NEW) High Quality #Adobe #Photoshop #Tutorials: <a href="http://digg.com/d3zohK?t">http://digg.com/d3zohK?t</a></span> <a class="c1" href="http://twitter.com/swashata/statuses/3164497512">6 days ago</a>

  </li>

</ul>

I have followed the design of the basic twitter Blogger widget to make this AJAX based widget.

#1 ~ Implementation Guide: Including the Source JavaScript:

The widget depends on the jQuery framework [latest]. So you should have the framework on your template. As we know that Google hosts jQuery for us, so in the following example we shall discuss using Google jQuery hosting. Also we shall let Google code to host the Widget JS file. You will also have an option to download and host the JS file yourself!

Here is what you need to do…

• On your Blog/Website template, just before the closing </head> tag add the following lines of codes.

  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

  <script type='text/javascript' src='http://ajax-based-twitter-status-loader.googlecode.com/files/twitter-loader-ajax-minified-v1.js'></script>

  This will include both the jQuery and the JavaScript file for this Widget

• Note that you don’t need to add the jQuery framework again

  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

  if you have it already.

• Alternately, download the minified Source JavaScript from here and host it yourself. You need to specify the URL accordingly for that. Say,

  <script type='text/javascript' src='javascript/twitter-loader-ajax-minified-v1.js'></script>

  if you host the JS files, from inside a folder called javascript

• Now, we are done including the JS files. Lets have a quick look at the options and calling technique.

#2 ~ Full Option Lists available for the Widget:

Before discussing about the call back technique, lets take a quick look on the options…

#3 ~ Callback Technique to load Recent Tweets using the AJAX based Widget:

This is pretty much simple. After including all the necessary JavaScript files [only 2, jQuery and the source of this widget], just add a HTML/JavaScript Widget for Blogger, Text Widget for WordPress or just paste the code, anywhere on your Webpage…

Of course, you need to change the TwitName and TwitCount essentially and optionally other values. You can also exclude some options, to make them carry the default values like,

<script type="text/javascript">

    recentTwitterLoader({

    'TwitName':'swashata',

    'TwitCount':10,

    'containerID':'#my-twitter'

    });

</script>

Now just save the Widget, your Web page and re-load the page! You should see the Widget in action now!

Also change the contents inside the <div id="my-twitter">…</div> to show any loading image, text you want.

#4 ~ Styling up the list using CSS:

As said before, this actually makes a list of HTML unordered list <ul>. So styling up with CSS is easy. Depending on what ulClass you have chosen, you can style up using the following snippet of CSS

twitter-ul.ul {

    /* Main ul style here */

    }

twitter-ul.ul li {

    /* The list li styles here */

    }

twitter-ul.ul li span {

    /* Insider Span style here | Although not necessary, but you can do almost anything with CSS ;) */

    }

twitter-ul.ul li a {

    /* Style for the hyperlink inside the list */

    }

For information on customizing unordered lists [also known as bullet lists] check here and here.

Note that, for Blogger, you need to add the CSS styles before the closing ]]></b:skin> and for WordPress or General Websites, in the main style.css or similar file.

#5 ~ Important Links at once:

• Project Page: Click Here
• Download the minified JS file and Source JS file for developers: Check Here
• Usage Instruction on Google Codes: Click Here
• Recommended Reading: Styling your Unordered lists using CSS

So that was our second open source project based on AJAX. We hope you have liked it. Do give your Feedback and if you face any bug/problem please feel free to either contact me or post your comments here. I shall try my best to resolve the issue. Also you can ask for any feature request! But, please do give your feedback to help us improve ourselves more!