How to Customize Twitter Search and Profile Widgets

So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.

They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).

Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.

So, let’s rock!

Our result

Here you can see a preview of our widgets. The first one is our profile widget, and the second is our search widget (searching about tweets related to 1stwebdesigner, of course). You can see our DEMO or DOWNLOAD SOURCE to try your own combinations.

The widget customization

Let’s start with the profile widget, so we can try out some customization.

You can generate your basic profile widget on Twitter’s page.

If you run this code you will see a structure like this:

<div #twtr-widget-N .twtr-widget> <em>- Where N is our widget's ID on page (if you have more than one) and class is the same for all widgets</em>
	<div .twtr-hd> <em>- Widget header, with avatar, screen name and @user</em>
	<div .twtr-bd> <em>- Widget body, with all tweets</em>
		<div .twtr-tweets> <em>- All  tweet's container</em>
			<div #tweet-id-N .twtr-tweet> <em>- Each tweet has his own div with a unique ID</em>
	<div .twtr-ft> <em>- Widget footer, with twitter's link</em>
<em>

With this generic structure in mind we can do all the customizations. But the first thing that we can do to make things easier to customize our widget is to set its background to transparent when you call it’s js, with this:

//this is how we call our widget
new TWTR.Widget({
	  version: 2,
	  type: 'profile',
	  rpp: 4,
	  interval: 6000,
	  width: 300, //we've changed our default width, to make it prettier
	  height: 300,
	  theme: {
		shell: {
		  background: 'transparent', //this is important
		  color: '#333'
		},
		tweets: {
		  background: 'transparent', //this is important
		  color: '#333',
		  links: '#c10000'
		}
	  },
	  features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: false,
		behavior: 'all'
	  }
	}).render().setUser('1stwebdesigner').start();

Let’s start our CSS with the widget’s main box:

.twtr-widget {
	float: left;
	width: 300px; /* this is important if you want to make any positioning */
	margin: 50px 0 0 80px;
	padding: 0 0 15px;
	background: #fafafa url(wavecut.png); /* our cute background */

	/*** cross browser box shadow ***/
	-moz-box-shadow: 0 0 2px #fff;
	-webkit-box-shadow: 0 0 2px #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
	filter:
		progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
		progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
		progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=180,strength=3)
		progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=270,strength=3);
	box-shadow: 0 0 2px #fff;

	/*** kind of cross browser rounded corner ***/
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

The result after this will be a basic widget with a new background, shadow and rounded corners. Well, after that we need to change our widget’s header, so:

.twtr-hd {
	/*** cross browser rgba ***/
	background-color: transparent;
	background-color: rgba(255,255,255,0.3);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#30ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#30ffffff)";
}

Now you may notice that the area where your avatar is, username and @userid has a different background. The funny part is that it works even in IE (oh, yeah, rga on IE). You could make your avatar bigger, change your name’s style, or even hide this stuff if you want. You know, from now on it is all up to your imagination!

If you are one of our loyal readers you may notice that [update link with clean url after approved]we’ve talked about curly quotes with :before[/link]. Long story short, you can create this effect with a few lines of CSS and get a really good result in all major browsers. We’ve customized our tweets list also, with a border, but with this element you will have to force priority with CSS because it has two classes in Twitter’s default CSS:

.twtr-widget .twtr-bd .twtr-tweet { /* they have 2 classes in default, do we have to use 3 */
 	margin: 5px 0 0;
	 padding: 0 0 5px;
	 border-bottom: 1px solid #cecece;
}
.twtr-tweet:before {
	display: block;
	float: left;
	margin: -5px 0 0 5px;
	font-size: 50px; /* let's make it a big quote! */
	content: "“";
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
	font-family: "times new roman", serif;
}

And last but not least, we just hide all that Twitter link stuff. As an alternative, you can hide default content and replace it with CSS (as we’ve done with our curly quote) or jQuery (with text()). So our footer will be:

.twtr-ft { display: none; }

Searches and advanced querys

You can create an advanced widget with search widget. You could, for example, get tweets from all your blog’s writers, and what people are saying about them. This kind of thing is possible because we have advanced search operators.

You can set this in your widget’s “search” attribute. Our example’s js would be something like this:

new TWTR.Widget({
	  version: 2,
	  type: 'search',
	  search: 'from:dsgn_pro OR from:1stwebdesigner OR 1stwebdesigner OR 1wd', // here is our query!
	  interval: 6000,
	  title: 'What do they say about 1stWebdesigner',
	  subject: '1WD related tweets',
	  width: 300,
	  height: 300,
	  theme: {
		shell: {
		  background: 'transparent',
		  color: '#333'
		},
		tweets: {
		  background: 'transparent',
		  color: '#333',
		  links: '#c10000'
		}
	  },
	  features: {
		scrollbar: false,
		loop: true,
		live: true,
		hashtags: true,
		timestamp: true,
		avatars: true,
		toptweets: true,
		behavior: 'default'
	  }
	}).render().start();

Now what you have to do is try out some variations until you get something that you find really interesting. Some good operators that can help you in this task are:

  • #item - hastag search operator
  • from:USERID - search for anything tweeted by @USERID
  • filter:links - When you add this to your query, it will return only results with links. Pretty useful to search for resources :D
  • :) and :( and ?- They search for positive / negative / question attitude in the results. Pretty awesome, it should be an international operator in all search engines
  • -item (minus) – This is the “not” operator. It excludes all “item” from search.

Are you hungry yet?

There are some alternatives to this widgets that are really worth trying:

TwitStamp

This service generates an image with your last tweet so you can put it anywhere without worrying about js loading cache or anything else. Really useful for mail or forum signatures.

TwitterFans

With this WordPress plugin you can show your followers. It is really close to what you get with Facebook’s likebox.

Twitter feed for WordPress

It does almost the same thing as the Twitter widget, with better WordPress’s integration.

Rochester Oliveira

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. jamie says

    overall great tutorial. was hoping for how to get rid of the thumbnail and name of the twitter account and just feed in the tweet, plus have it loop the other tweets. any guidance/suggestions on this?

  2. says

    Wow! Impressed. I’ve used your example on my website.
    http://www.leighwilliamson.com (bottom right hand corner)
    Im a real novice with web building.
    The problem I’m having is that I’d like to filter my tweets to only show “my” tweets on my website that I hashtagged with #digifood and #digitips. to show only my relevant tweets I make specific to my website.

  3. Paul says

    Excellent post.

    Do you have some examples of how you would code:
    #item – hastag search operator
    :) and :( and ?
    -item (minus) – This is the “not” operator. It excludes all “item” from search.

    Thanks,

    Paul

  4. Ben Haines says

    Great post! Is there anyway to exclude replies? I’ve tried a couple of methods but can’t do it.

  5. Ben says

    Wow, this is great! I’m definitely bookmarking your website. I’m trying to customize everything to be transparent and have tweets show up in quotes in large font. I’m having plenty of problems since I”m new to CSS, but I’m having one BIG problem.

    I need to limit the number of tweets that are visible to just 1. Is this possible? I tried adding the rpp: 1, attribute into the jscript, but it didn’t work.

  6. Ben Clarke says

    Thanks for this great post! Its helped me a great deal when it came down to customising customer profiles and mine! Thanks!

  7. Steve says

    How do you target the “Name” and “Username” or the “Avitar” in the .twtr-hd class? I am trying to change the font properties. Thanks!

    • says

      I figured it out. You must target more specifically the .twtr-hd class with it’s parent ex; “parent .twtr-hd h4″. You must also include the “!important” to the end of the styles you are applying to override the hierarchy. You can select either the h3 (name) or h4 (username) respectively. I would like to know how to change the color though, as adding the “color:#******” doesn’t effect anything. I’ve tried targeting the “a” tag as well with no joy. Any help is appreciated.

      • Rodolfo Alvarez says

        Hey Steve

        I`ve change the color directly in script inside the HTML…

        theme: {
        shell: {
        background: ‘transparent’, //this is important
        color: ‘#fff’ //HERE´S WHERE YOU CAN CHANGE THE COLOR
        }

        It works for me, I hope it helps.

    • says

      Hey Steve!

      Sorry for delay, haven’t seen your coments before.

      So, it’s better target via widget ID, so you’ll overwrite anything. If it’s still doesn’t working try to add !important everywhere :D

  8. Steve-O says

    Great guide! How do you target the name and the username within the .twtr-hd class? Trying to change font and font-size. You also mentioned you could change the avatar size as well. How?

  9. henry says

    how to edit the the footer of the widget to put a follow button
    i supose the code is .twtr-ft { display: true; } what is this part where is in html?

    • says

      Hi henry,
      It’s way easier to just hide the default footer ( as we’ve done with .twtr-ft { display: none; } ) and then just put your own HTML above it.

      []’s

  10. steve says

    how can i customize the h3 and h4 tags used in the widget? I don’t want it to follow the rest of my sites styles for h3/h4. I tried .twtr-hd h3 but that doesn’t seem to do the trick. hm…..

    • says

      Hey steve, how are you?

      Probably you’ll need to use the id of the widget, as “twtr-widget-1″ if it is your first widget on page, 2 if second and so on.

      This is because you have some embed styles.. You could also use !important rule to overwrite previously declared rules.

      []’s

      • steve says

        I am well thanks. I wound up just setting twtr-hd’s display to none, similar to what was done for the footer. Worked better for me because I didn’t really need either.

        Do you know if the twitter search widget only displays tweets that are only a certain amount of days old? Seems like anything older than 3 days it will not post? I thought maybe changing “live” to false would change that, but I guess not.

        Thanks anyway, this tutorial was a huge help!

  11. Dave says

    Nice. Question though – is there an option for tweets to start at the bottom of the widget, then scroll up, blog-style, so that newest tweet is always on top, pushed up from below by older content?

    In other words, is there a features variable that enables you to reverse the tweets direction?

    Or can this be done magically with css?

    Thanks!

    • says

      Hey dave, actualy this is the way it works, the newest tweets on top!

      And if you want it updated from time to time just activate the “live” function (just like our search widget).

      Thank you!
      []’s