Twitter Goodies!

Check it out- Twitter has all new widgets to display your tweets, or create a custom widget with tweets of your choosing!

It's like adding a mini version of Twitter to your website, facebook or MySpace page. Twitter is all about sharing information and the new Twitter widgets allow you to do this in even more places!

Adding A Twitter Widget To Your Website

Access widgets from the ‘goodies’ link in the footer of all Twitter web pages. To add a Twitter widget to your social network, website or blog:

1. Log into Twitter
2. Click Goodies at the very bottom of the page
   
3. Select ‘Widgets’
4. Select 'My Website'
5. Select a profile widget (to show your tweets) or a search widget (customized by you!)

Profile widgets display recent tweets from a specific user. Search widgets display highly customizable search results in real time (perfect for live events, conferences, brands etc.).

Adding profile widgets

Profile widgets display the public tweets of anyone on Twitter. Try entering a few user names to test it out!

1. Enter the name of the user whose tweets should display in the widget.
2. Decide whether or not to 'loop old results' (This means, show old tweets if there are no new ones. We recommended this unless you're a 24-7 tweeter.)
3. Click 'Appearance' to change the colors of your widget (You can enter the numeric color codes to perfectly match your website or blog!)
4. Click 'Dimensions' to change the size of your widget (You wont be able to preview the size in the widgets page.)
5. Test your settings to make sure everything looks right
6. Click ‘Finish & Grab Code’ at the bottom of the page, and add the code to your website.

Once you've added the widget code to your site, voila! You've got tweets!

Adding Search Widgets

Customize your Twitter Search Widget using the three left hand tabs on the widget screen: Settings, Appearance and Dimensions. Note: search widgets will not work on facebook and MySpace.

1. Fill out the settings for your widget: the 'Search Query' field determines the display of the real-time search results. This can be something as simple as ‘San Francisco,’ or you can experiment with advanced search queries.
   
2. Decide whether or not to 'loop old results' (Recommended only for low volume queries!)
3. Click 'Appearance' to change the colors of your widget (You can enter the numeric color codes to perfectly match your website or blog!)
4. Click 'Dimensions' to change the size of your widget (Customize the Width (px) and Height (px) of your widget to fit the area of the page where you want it (minimum size is 150px wide and 100px high). You wont be able to preview the size.)
5. Test your settings to make sure everything looks right
6. Click ‘Finish & Grab Code’ at the bottom of the page, and add the code to your website.

Add the code to your website and display real time tweets!

Adding A Twitter widget to MySpace

Twitter has special widgets just for MySpace. Display tweets from your Twitter profile on your MySpace page! To add a Twitter widget to your MySpace:

1. Log into Twitter
2. Click Goodies at the very bottom of the page
   
3. Select ‘Widgets’
4. Select 'MySpace'
5. Copy the HTML and add it to your MySpace account

Voila! Your tweets will post to your MySpace profile in real time. Note: You can't customize these like the profile and search widgets.

Adding the Twitter application to Facebook

Show your tweets in Facebook! Each time you tweet, your Facebook friends will see your updates.

To add Twitter's Facebook application:

1. Log into Twitter
2. Click Goodies at the very bottom of the page
   
3. Select ‘Widgets’
4. Select 'Facebook' and click 'Facebook application
5. Click 'Install Twitter in Facebook'
6. You'll be redirected to Facebook, where you'll be asked to sign in and approve the application

Advanced Technical Magic!

Want to do more with your Twitter widgets? Do fancy javascript magic and make your widgets super specialized. Check out Twitter engineer Dustin's widget documentation- he built them, and he's telling (almost!) all the secrets.

Sneak preview: the features object

Written by @ded and excerpted here:

So there is a features object that you can pass into your constructor. There are currently four of these features. Albeit mostly self explanatory, they each do this:

• hashtags: defaults to true. setting to false will hide them.
• timestamp: defaults to true. setting to false will hide them.
• avatars: defaults to true for search. and false for profile widget. setting to false will hide them.
• fullscreen: (I love this feature!) defaults to false. setting to true will give you a full viewport sized widget, perfect for displaying on large screens at events, conferences, etc.
  
  

Overall, these features are pretty great. I especially love the hashtag and fullscreen features since they are perfect for pairing. Let’s say for instance you’re running a conference like SxSW — you could search for “#sxsw OR #sxsw09″ — and in the results, hide the hashtags so it doesn’t distract the readability of all the searches. Neat, eh?

Some examples

I went ahead and installed the widget on my own site — And here’s a few examples:

• fullscreen, hidden hashtag search for #iranelection
• fullscreen iphone to:apple (hey, we all do it)
• Or sometimes you just want to know what Evan Weaver is doing

Check out Dustin's website for examples of his widget magics in action.