How to Add Your Own Twitter List Widget

» Posted by on May 12, 2010 in coding, social networking | 0 comments

P

twitter or catklaw.

It's #WriterWednesday over on twitter today. The (#) symbol is a hashtag, a way users keep track of certain topics on Twitter. You can find a great list of current hashtags here. #WriterWednesday or it's shortened form #WW is a chance for twitter users to share some writing friends names for others to follow. It includes writers, authors, editors, and publishers. There are other special days as well, one of the largest being #FF or #FollowFriday, where people recommend anyone the like to follow.

My challenge was recommending all the writers I follow. I want to give each one an individual shout out, but on certain Wednesdays, it's just a little too hectic. Today, I'd remembered seeing a few times when Alyssa Milano posted up on a single page all the people she loved in her followers list. Trust me, she is the Queen of the twitter realm. She can make sweeping surges in charity events with a single mention on twitter. She uses twitter effectively and should be followed.

Anyway, I'd wanted to do something similar rather than just directing people to a twitter list ON twitter. Hello Google. Do a search on 'twitter lists' and it only took me two links to find exactly what I was looking for.

About 6 months ago, Mashable posted up an article "Twitter Lists Widget: Embed Your Lists on Your Blog". It gave me a good overview, but the script it posted didn't resolve correctly, or I wasn't customizing it right. The site did lead me over to "The Ultimate Twitter List Widget". Now, this one works!

I put it up on Sybir because I wanted to have a consolidated view of the writers I follow.

See? Click the image to see it live on the site.

Twitter Lists

As for which script I used? The more advanced one on the Ultimate Twitter List Widget.

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>

Now, you can add your own! It only took me a few seconds to tweak it the right way.

Sources

Submit a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>