The Ultimate Twitter Search Widget

NEW! Twitter List Widget Now Available! Click Here.

by TweetGrid and jazzychad

Widget Examples

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

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

<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
To set the twitter search phrase, copy and paste the following code into your site and modify the jtw_search value: 
<script language="javascript">
	/* widget config */
	var jtw_search                 = 'keyword';  /* keywords or phrase to send to search.twitter.com and display */
</script>
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
A much more complex and stylized twitter search 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_search                 = '';  /* keywords or phrase to send to search.twitter.com and display */
	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_tweet_lang             = '';  /* language of tweets to display (2 letter country code) */
	var jtw_widget_refresh_interval= '';  /* the frequency (in seconds) to look for new tweets*/
</script>
<script src="http://tweetgrid.com/widget/widget.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 search widgets on the same page, you must give each one a unique jtw_divname.

Top

jtw_search


Default Value: If left unspecified, the default value is twitter
Valid Values: Any valid search phrase accepted at http://search.twitter.com/
Examples:

Notes: You do not need to worry about urlencoding the search phrase. The widget will take care of that for you. You can learn more about creating complex search phrases by reading twitter's search operator page. Search phrases are limited to 140 characters, as per twitter's search API limitation.

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 Search 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:

Top

jtw_tweet_lang

Language of tweets to display

Default Value: If left unspecified, the default value is all languages
Valid Values: Any ISO_639-1 two-letter language code
Examples:

Notes: This setting is experimental and depends on twitter's classification of the tweet's language. A list of ISO_639-1 codes can be found here.

Top

jtw_widget_refresh_interval

Frequency (in seconds) to look for new tweets

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

Notes: If set to 0, the widget will not look for new tweets.

Top

This site is part of the JazzyChad Network.
Quantcast