CompleteUsageInstruction

Featured

Updated Aug 12, 2009 by swashat...@gmail.com

#This page will deal with all the details you need to make this thing work. Usage Instruction

Requirement

All what you need to make this twitter ajax based loader work is

jQuery Framework
A standard Web Page (Blog or any general Web site) where JavaScript is enabled wordpress.com blogs
A little knowledge of CSS to modify the styles mandatory

We can have Google to host our jQuery files and google codes to host the JavaScript file of this tool. You can also download and host them yourself! But we shall discuss a standard example only where jQuery and the twitter-loader JavaScript files both are hosted by Google.

Inclusion of the JS files

First, just after the <head> tag of your Webpage template or Blog template add the following script tag to include the jQuery framework

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

If you have already included the jQuery then there is no need to include that again! You may also download the minified copy of jQuery from http://jquery.com and host it your self
Now just after that, add the following tag

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

This will load the necessary JavaScript file for the tool to work.

Or you may download the JS file from here and host it yourself

All done. Now just check the calling technique to load your twitter updates.

Calling Technique

First, for all the options check here. While calling, we first write a HTML div with a proper id to display some loading text/images and then we call the script to append the list on to that div and then remove that loading script! Here is an example,

    <div id="my-twitter">
      <img src="http://i28.tinypic.com/555nwk.gif" style="margin-bottom: -2px; margin-right: 10px;"/> 
         Loading... Please wait!
    </div>
    <script type="text/javascript">
        recentTwitterLoader({
        'TwitName':'swashata',
        'TwitCount':100,
        'ulClass':'twitter-ul',
        'containerID':'#my-twitter',
        'onLoad':false
        });
    </script>

Note that, on the 'containerID':'#my-twitter' the value of the'containerID' should be same as the id of the loading div. You should place a # before the id (as jQuery selectors work in this way). If it is not found on the document then a div with similar id will be written on the page. You can exclude any of the options listed above to use the default values of the corresponding options

So whether be it a Website or Blog, just use the following way of calling, and enjoy this cool widget! For any any info feel free to contact me

► Sign in to add a comment