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://twitterwidget.jazzychad.com/tw/searchwidget.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.
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_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';
</script>
<script src="http://twitterwidget.jazzychad.com/tw/searchwidget.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://twitterwidget.jazzychad.com/tw/searchwidget.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://twitterwidget.jazzychad.com/tw/searchwidget.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://twitterwidget.jazzychad.com/tw/searchwidget.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://twitterwidget.jazzychad.com/tw/searchwidget.js" type="text/javascript"></script>
Back to Main