Hurricane Gustav Twitter Widget

[Return Home]

Hurricane Gustav Twitter Tracking
Last 50 results...

You can add a Hurricane Gustav Twitter Tracking widget to your websites/blogs/wikis/whatever by inserting two pieces of code in your pages. One is the actual widget code, and the other is the CSS information to style the widget.

First, the widget code:

Basic Widget

This widget will return the 50 most recent tweets with the word "gustav" occuring in them.

Insert the following code into your HTML. 

<div id=gw_div>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js" type="text/javascript"></script>
</div>
Requirements:
You must give the div an id, in this case it is gw_div (short for "gustav widget div").

Options:

The following are options you can pass to guswidget.js.

type
The following types are allowed:

Example: 
<div id=gw_div>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js?type=links" type="text/javascript"></script>
</div>

rpp
This determines the number of tweets to display in the widget. You can specifiy any number from 1 to 100. The default is 50 if left unspecified.

Example: 

<div id=gw_div>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js?rpp=25" type="text/javascript"></script>
</div>

divname
This specifies the id of the div in which the tweets will appear. This is useful for having multiple widgets on one page. Each widget must have a different divname. The default divname is "gw_div" if left unspecified.

Example: 

<div id=gus_widget_2>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js?divname=gus_widget_2" type="text/javascript"></script>
</div>

Combining options: You can combine options, as in the following example: 

<div id=gus_hashtag>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js?type=tag&rpp=30&divname=gus_hashtag" 
        type="text/javascript"></script>
</div>

CSS Styling

There are 3 id's that can be styled in the widget:

gw_div (or a the id specified by divname)
This is the containing div id for the widget. You control the size of the widget by setting the size attributes for this div id. It is highly recommended that you set overflow: auto; for this id so that the tweets will scroll within the widget.

gw_results
This is the containing div id for all of the tweets.

gw_tweet
This is the containing div id for each individual tweet.

This is a minimum set of CSS styling for these 3 id's to give you a basic widget: 

#gw_tweet {

}
#gw_results {
	margin: 0px;
	padding: 0px;
}
#gw_div{
	border: 1px solid #000;
	width: 300px;
	height: 400px;
	overflow: auto;
	padding: 10px;
}

Misc

You can put text/html inside of the widget to appear before and after all of the tweets, but the tweets will appear precisely where you put the <script> tag.

Exmaple: 

<div id=gw_div>

Text to appear inside the widget, but before the tweets goes here... 
like a title or something.

<script src="http://jazzychad.com/twitter/gustav/guswidget.js" type="text/javascript"></script>

Text to appear inside the widget, but after the tweets goes here...
like a link, or footer, or something

</div>

Example Widgets

Basic Widget

Widget Code 

/* HTML CODE */

<div id=gw_div>
<p>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js" type="text/javascript"></script>
</div>

/* CSS CODE */

#gw_tweet {
	font-size: 12px;
	background: #D1EFEE;
	margin: 0px 10px 0px 10px;
	border: 1px solid #A7DFDE;
}
#gw_results {
	margin: 0px;
	padding: 0px;
}
#gw_div {
	border: 1px solid #000;
	width: 300px;
	height: 400px;
	overflow: auto;
	padding: 10px;
}

Bigger widget with 100 news results, a title, and centered

Hurricane Gustav Twitter Tracking

Widget Code 

/* HTML CODE */

<div id=gw_bigger>
<b>Hurricane Gustav Twitter Tracking</b>
<p>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js?type=news&rpp=100&divname=gw_bigger" type="text/javascript"></script>
</div>


/* CSS CODE */

#gw_tweet {
	font-size: 12px;
	background: #D1EFEE;
	margin: 0px 10px 0px 10px;
	border: 1px solid #A7DFDE;
}
#gw_results {
	margin: 0px;
	padding: 0px;
}
#gw_bigger {
	background: #f8f8f8;
	border: 2px solid #000;
	width: 400px;
	height: 500px;
	overflow: auto;
	padding: 10px;
    margin: 0 auto;
}

Small widget with different background, links in tweets, text above and below tweets, and centered

Hurricane Gustav Twitter with Links

Please be safe!

Widget Code 

/* HTML CODE */

<div id=gw2>
<b>Hurricane Gustav Twitter with Links</b>
<p>
<script src="http://jazzychad.com/twitter/gustav/guswidget.js?type=links&rpp=10&divname=gw2" type="text/javascript"></script>
<p>
<b>Please be safe!</b>
</div>


/* CSS CODE */
#gw_tweet {
	font-size: 12px;
	background: #D1EFEE;
	margin: 0px 10px 0px 10px;
	border: 1px solid #A7DFDE;
}
#gw_results {
	margin: 0px;
	padding: 0px;
}
#gw2{
	background: #39f;
	border: 2px solid #000;
	width: 300px;
	height: 300px;
	overflow: auto;
	padding: 10px;
    margin: 0 auto;
}