The Ultimate Twitter List Widget

by TweetGrid and jazzychad

Search Widget Examples
(The Search Widget examples show how to use many of the same settings outlined below)

Goal: To make a simple, elegant, highly-flexible, drop-in twitter list widget that anyone can use on their website/blog/profile/whatever.

The Twitter List widget is almost identical to the search widget except you use widget_list.js instead of widget.js, set jtw_list instead of jtw_search, and jtw_widget_refresh_interval is in minutes instead of seconds.

A very simple twitter list widget can be installed on your website by copying and pasting the following code into your site: 

<script src="http://tweetgrid.com/widget/widget_list.js" type="text/javascript"></script>
To set the twitter list name, copy and paste the following code into your site and modify the jtw_list value: 
<script language="javascript">
	/* widget config */
	var jtw_list                 = '@username/listname';  /* full name of the Twitter List */
</script>
<script src="http://tweetgrid.com/widget/widget_list.js" type="text/javascript"></script>
A much more complex and stylized twitter list widget can be installed by copying and pasting the following code into your site, and then modifying some or all of the following settings. Click the setting names to see how they are used.

Advanced examples can be found by clicking here. 

<script language="javascript">
	/* widget config */
	var jtw_divname                = '';  /* unique id of the widget */
	var jtw_list                   = '';  /* list name (e.g. '@twitter/team')  */
	var jtw_width                  = '';  /* width of widget in px, %, or auto */
	var jtw_height                 = '';  /* height of widget in px, %, or auto */
	var jtw_scroll                 = '';  /* add scroll bar to widget, 'yes' or 'no' */
	var jtw_widget_background      = '';  /* background style of whole widget */
	var jtw_widget_border          = '';  /* border style of whole widget */
	var jtw_center_widget          = '';  /* center widget horizontally in container if 'yes' */
	/* tweet styling */
	var jtw_tweet_textcolor        = '';  /* text color of the tweets */
	var jtw_tweet_linkcolor        = '';  /* link color of the tweets */
	var jtw_tweet_background       = '';  /* background style of the tweets */
	var jtw_tweet_newbackground    = '';  /* background style of new tweets */
	var jtw_tweet_border           = '';  /* border style of the tweets */
	var jtw_tweet_margin           = '';  /* marin in px for each tweet */
	var jtw_tweet_fontsize         = '';  /* fontsize in px or em of each tweet */
	var jtw_big_img                = '';  /* display big avatar instead of small avatar */
	var jtw_hide_img               = '';  /* do not display twitter avatar if 'yes' */
	/* display config */
	var jtw_pre_html               = '';  /* html code to display at the top of widget */
	var jtw_post_html              = '';  /* html code to display at the bottom of widget */
	var jtw_mid_html               = '';  /* html code to display inbetween each tweet */
	var jtw_widget_style_misc      = '';  /* misc css style for the widget */
	var jtw_results_style_misc     = '';  /* misc css style for the results */
	var jtw_tweet_style_misc       = '';  /* misc css style for each tweet */
	var jtw_num_tweets             = '';  /* number of tweets to display in widget (up to 100) */
	var jtw_widget_refresh_interval= '';  /* the frequency (in minutes) to refresh tweets*/
</script>
<script src="http://tweetgrid.com/widget/widget_list.js" type="text/javascript"></script>

jtw_divname

Unique identifier used to name the widget.

Default Value: If left unspecified, the default value is jtw_widget
Valid Values: Any combination of letters, numbers, and underscore. Must begin with a letter or underscore.
Examples:

Notes: If you put multiple twitter list and/or search widgets on the same page, you must give each one a unique jtw_divname.

Top

jtw_list

Set the Twitter List that the widget will display

Default Value: If left unspecified, the default value is @twitter/team
Valid Values: Any valid Twitter List name
Examples:

Top

jtw_width

Sets the width of the widget

Default Value: If left unspecified, the default value is 300px
Valid Values: A number of pixels, a percentage, or 'auto' to fill the container
Examples:

Top

jtw_height

Sets the height of the widget

Default Value: If left unspecified, the default value is 400px
Valid Values: A number of pixels, a percentage, or 'auto' to fill the container
Examples:

Top

jtw_scroll

Determins if the widget has a scrollbar for viewing the tweets

Default Value: If left unspecified, the default value is yes
Valid Values: 'yes' or 'no'
Examples:

Notes: Setting jtw_scroll to 'no' and setting jtw_height to a fixed pixel height or percentage will probably produce undesired results

Top

jtw_widget_background

Sets the background property for the widget

Default Value: If left unspecified, the default value is #fff
Valid Values: Any valid CSS background property value
Examples:

Top

jtw_widget_border

Sets the border property for the widget

Default Value: If left unspecified, the default value is 1px solid #aaa
Valid Values: Any valid CSS border property value
Examples:

Notes: For no border, set to 0px.

Top

jtw_center_widget

Setting to center the widget in its container

Default Value: If left unspecified, the default value is no
Valid Values: 'yes' or 'no'
Examples:

Top

jtw_tweet_textcolor

Set the text color for the tweets

Default Value: If left unspecified, the default value is #000
Valid Values: Any valid CSS color value
Examples:

Top

jtw_tweet_linkcolor

Set the link color for the tweets

Default Value: If left unspecified, the default value is #00f
Valid Values: Any valid CSS color value
Examples:

Top

jtw_tweet_background

Sets the background property for each tweet

Default Value: If left unspecified, the default value is #f8f8f8
Valid Values: Any valid CSS background value
Examples:

Top

jtw_tweet_newbackground

Sets the background property for new incoming tweets

Default Value: If left unspecified, the default value is the value of jtw_tweet_background
Valid Values: Any valid CSS background value
Examples:

Top

jtw_tweet_border

Sets the border property for each tweet

Default Value: If left unspecified, the default value is 1px solid #aaa
Valid Values: Any valid CSS border value
Examples:

Notes: For no border, set to 0px.

Top

jtw_tweet_margin

Set the distance from the edge of the widget the tweets should appear

Default Value: If left unspecified, the default value is 1px
Valid Values: Any number of pixels, or set of pixels
Examples:

Top

jtw_tweet_fontsize

Sets the fontsize for each tweet

Default Value: If left unspecified, the default value is 14px
Valid Values: Any valid CSS font-size value
Examples:

Top

jtw_big_img

Display a big avatar instead of a small avatar

Default Value: If left unspecified, the default value is no
Valid Values: 'yes' or 'no'
Examples:

Notes: Big avatars are 48x48 pixels, small avatars are 24x24 pixels.

Top

jtw_hide_img

Setting to hide the twitter avatar images in each tweet

Default Value: If left unspecified, the default value is no
Valid Values: 'yes' or 'no'
Examples:

Top

jtw_pre_html

HTML to display in the widget before displaying the tweets

Default Value: If left unspecified, the default value is <center><b>Twitter List Widget</b></center>
Valid Values: Any HTML
Examples:

Notes: To have nothing displayed before the tweets, set jtw_pre_html to a space (' ').

Top

jtw_post_html

HTML to display in the widget after displaying the tweets

Default Value: If left unspecified, the default value is nothing
Valid Values: Any HTML
Examples:

Top

jtw_mid_html

HTML display between each tweet

Default Value: If left unspecified, the default value is nothing
Valid Values: Any HTML
Examples:

Top

jtw_widget_style_misc

Misc CSS Style properties to assign to the widget

Default Value: If left unspecified, the default value is nothing
Valid Values: Any valid CSS style attributes/properties
Examples:

Top

jtw_results_style_misc

Misc CSS Style properties to assign to the part of the widget containing all of the tweets

Default Value: If left unspecified, the default value is nothing
Valid Values: Any valid CSS style attributes/properties
Examples:

Notes: The Results section contains all of the tweets, and does not include the areas of the widget that contain the jtw_pre_html or jtw_post_html content

Top

jtw_tweet_style_misc

Misc CSS Style properties to assign to the individual tweets

Default Value: If left unspecified, the default value is nothing
Valid Values: Any valid CSS style attributes/properties
Examples:

Top

jtw_num_tweets

The number of tweets to display in the widget

Default Value: If left unspecified, the default value is 20
Valid Values: Any number between 1 and 100
Examples:

Notes: Currently the widget will always return 20 tweets due to a limitation in the Twitter API. When this is fixed this setting will automatically work.

Top

jtw_widget_refresh_interval

Frequency (in minutes) to look for new tweets

Default Value: If left unspecified, the default value is 5
Valid Values: Any non-negative integer (0, 1, 2, 3, ...)
Examples:

Notes: If set to 0, the widget will not refresh. Refreshing the widget counts against the visitor's API rate-limit, so please be careful not to use them all up!

Top

This site is part of the JazzyChad Network.
Quantcast