How to Customize Twitter Search and Profile Widgets
Rochester OliveiraSo 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.
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Herbert Kleinschmidt
Posted 10 days ago 25Excellent tutorial! In combination with http://www.kristarella.com/2009/01/display-your-tweets-without-a-plugin/ I could show just one single-lined tweet as animated running text in my header.
Eduardo
Posted 26 days ago 24Thank you very much!
It helps me a lot :D
Ben Clarke
Posted 28 days ago 23Thanks for this great post! Its helped me a great deal when it came down to customising customer profiles and mine! Thanks!
Malin
Posted 50 days ago 22Hey,
In the Search Timeline the newest tweets are at the bottom. Is there any way of fixing this ?
example :
http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/06/twitter-search/twitter-search/index.html
ric
Posted 106 days ago 20i dont get it, where do i add/edit the css classes?
Rochester Oliveira
Posted 51 days ago 21Hi ric, it is in your stylesheet, of course. In this example they are all inside one page but your website probably has its own stylesheet.css!
[]‘s
Steve-O
Posted 133 days ago 16How do you target the “Name” and “Username” or the “Avitar” in the .twtr-hd class? I am trying to change the font properties. Thanks!
Steve-O
Posted 132 days ago 17I 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
Posted 129 days ago 19Hey 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.
Rochester Oliveira
Posted 132 days ago 18Hey 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
Steve-O
Posted 133 days ago 15Great 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?
henry
Posted 144 days ago 13how 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?
Rochester Oliveira
Posted 143 days ago 14Hi 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
steve
Posted 219 days ago 9how 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 h3but that doesn’t seem to do the trick. hm…..Rochester Oliveira
Posted 219 days ago 10Hey 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
Posted 218 days ago 11I 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!
Rochester Oliveira
Posted 212 days ago 12Hey steve, yes I’ve seen this limit too. Just that queries with higher amount of results we have a better number of days I think..
[]‘s
dfunno
Posted 241 days ago 6great post and thanks…
Rochester Oliveira
Posted 241 days ago 8Hi dfunno,
Thank you, we have much more posts like this to go ;)
[]‘s
Dave
Posted 243 days ago 5Nice. 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!
Rochester Oliveira
Posted 241 days ago 7Hey 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
Nanang Gunawan
Posted 244 days ago 3its good Oliveira…
thanks for your post..
Rochester Oliveira
Posted 243 days ago 4Hey Nanang,
You are welcome! :D
[]‘s
Minimal
Posted 245 days ago 1Very useful for me. Thanks for your tips, R. Oliveira.
Rochester Oliveira
Posted 245 days ago 2Hey Minimal, I really hope it helps you guys :D
[]‘s