The Basic Twitter Search Widget
This is the basic widget. It displays the 20 more recent tweets containing the word 'twitter'
Code:
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
More Complex Example
This widget uses several of the widget settings to modify how it looks. It displays the 25 latest tweets containing the word 'google' and is centered. It updates every 10 seconds.
Code:
<script language="javascript">
/* widget config */
var jtw_divname = 'jtw_widget1';
var jtw_search = 'google';
var jtw_width = '400px';
var jtw_height = '500px';
var jtw_scroll = 'yes';
var jtw_widget_background = '#CFF2FF';
var jtw_widget_border = '2px solid #4192AF';
var jtw_center_widget = 'yes';
/* tweet styling */
var jtw_tweet_textcolor = '';
var jtw_tweet_background = 'url(./img/greygrad.png) repeat-x #fff';
var jtw_tweet_newbackground = '#ffe';
var jtw_tweet_border = '1px solid #4192AF';
var jtw_tweet_margin = '5px';
var jtw_tweet_fontsize = '12px';
var jtw_hide_img = '';
/* search and display config */
var jtw_pre_html = '<center><b>Tweets About Google</b></center>';
var jtw_post_html = '';
var jtw_mid_html = '<hr>';
var jtw_num_tweets = '25';
var jtw_tweet_lang = 'en';
var jtw_widget_refresh_interval= 10;
</script>
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
A Fun Example
Here is a goofy example which takes advantage of the jtw_pre_html, jtw_post_html, and jtw_mid_html settings to create one gigantic tweet cheezburger.
Code:
<script language="javascript">
/* widget config */
var jtw_divname = 'jtw_burgers';
var jtw_search = 'burger';
var jtw_width = '370px';
var jtw_height = 'auto';
var jtw_scroll = 'no';
var jtw_widget_background = '#fff';
var jtw_widget_border = '0px solid #4192AF';
var jtw_center_widget = 'yes';
/* tweet styling */
var jtw_tweet_textcolor = '#fff';
var jtw_tweet_linkcolor = '#ff0';
var jtw_tweet_background = '#7F3900';
var jtw_tweet_border = '1px solid #4F2300';
var jtw_tweet_margin = '-4px 20px 0px 20px';
var jtw_tweet_fontsize = '12px';
var jtw_hide_img = '';
/* search and display config */
var jtw_pre_html = '<center><b>CAN HAZ CHEEZBURGER?</b><br><img src="./img/burger-top.gif"></center>';
var jtw_post_html = '<center><img src="./img/burger-bottom.gif"></center>';
var jtw_mid_html = '<center><img src="./img/burger-mid.gif"></center>';
var jtw_tweet_style_misc = 'min-height:28px;';
var jtw_num_tweets = '5';
var jtw_tweet_lang = 'en';
</script>
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
Displaying Tweets as an Ordered List
This widget displays my latest 10 tweets as an ordred list, hiding my avatar. It does not scroll; it is as tall as it needs to be.
Code:
<script language="javascript">
/* widget config */
var jtw_divname = 'jtw_list';
var jtw_width = '';
var jtw_height = '';
var jtw_scroll = 'yes';
var jtw_widget_background = '#C2EFD5';
var jtw_widget_border = '1px solid #aaa';
var jtw_center_widget = 'yes';
/* tweet styling */
var jtw_tweet_textcolor = '';
var jtw_tweet_linkcolor = '';
var jtw_tweet_background = '#C2EFD5';
var jtw_tweet_border = '0px';
var jtw_tweet_margin = '';
var jtw_tweet_fontsize = '12px';
var jtw_hide_img = 'yes';
/* search and display config */
var jtw_pre_html = 'My 10 Latest Tweets:<p><ol><li>';
var jtw_post_html = '</li></ol>The End!';
var jtw_mid_html = '</li><li>';
var jtw_tweet_style_misc = '';
var jtw_widget_style_misc = 'padding:7px;';
var jtw_num_tweets = '10';
var jtw_tweet_lang = 'en';
var jtw_search = 'from:jazzychad';
</script>
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
Blog Sidebar Example
If you want to put a widget in a blog sidebar, these might be some useful settings.
Code:
<script language="javascript">
/* widget config */
var jtw_divname = 'jtw_sidebar';
var jtw_search = 'wordpress';
var jtw_width = 'auto';
var jtw_height = '250px';
var jtw_scroll = 'yes';
var jtw_widget_background = '';
var jtw_widget_border = '1px solid #aaa';
var jtw_center_widget = 'yes';
/* tweet styling */
var jtw_tweet_textcolor = '';
var jtw_tweet_linkcolor = '';
var jtw_tweet_background = '';
var jtw_tweet_border = '0px';
var jtw_tweet_margin = '';
var jtw_tweet_fontsize = '12px';
var jtw_hide_img = '';
/* search and display config */
var jtw_pre_html = 'Wordpress Tweets:';
var jtw_post_html = '';
var jtw_mid_html = '';
var jtw_tweet_style_misc = '';
var jtw_widget_style_misc = 'margin:5px;padding:5px;';
var jtw_num_tweets = '25';
var jtw_tweet_lang = 'en';
</script>
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
Really Wide Widget
If you want a widget to fill up a containing area horizontally, set jtw_width to 'auto' as in the following example.
Code:
<script language="javascript">
/* widget config */
var jtw_divname = 'jtw_wide';
var jtw_width = 'auto';
var jtw_height = '700px';
var jtw_scroll = 'yes';
var jtw_widget_background = '';
var jtw_widget_border = '';
var jtw_center_widget = '';
/* tweet styling */
var jtw_tweet_textcolor = '';
var jtw_tweet_background = '';
var jtw_tweet_border = '';
var jtw_tweet_margin = '';
var jtw_tweet_fontsize = '12px';
var jtw_hide_img = '';
/* search and display config */
var jtw_pre_html = '<center><b>Tweets About Water</b></center>';
var jtw_post_html = '';
var jtw_mid_html = '';
var jtw_tweet_style_misc = 'min-height:28px;';
var jtw_num_tweets = '25';
var jtw_tweet_lang = 'en';
var jtw_search = 'water';
</script>
<script src="http://tweetgrid.com/widget/widget.js" type="text/javascript"></script>
Back to Main
