Get yourself a great looking custom Twitter badge
Twitter has absolutely exploded over the past few months, it's all over the radio and TV; even some 'celebrities' can't get enough of Twitter - yes I am refferring to Ashton Kutcher.
With a lot of social experiments like this you need and should want to make it your own, by using a custom Twitter badge. Of course you can already customise your background on Twitter among other things, but what can you do about it outside of the birds nest? Once again CSS (bless those CSS gods up there) is on our side and as the ground work of Twitter is essentially one big list <ul><li></li></ul> it's dead easy to style up.
Let start with a basic Twitter badge and explanation of the custom CSS
This is what we're going to create.
First we need the worm, or Twitter's script to get your feed working. The correct place for this is really your <head> but I find the best place is to stick it just before your end </body> tag. I suggest this because for one, the script is coming from a remote site (though you could make it local if you wish) and having it at the bottom of the page will allow the rest of your more important content to load first. Anyway, lets get started and add this in to our page.
HTML
Be sure to take note of src in the second included bit of script. You'll need to replace BenjaminReid with your own username and change count=5 to the amount of tweets you would like to show on your page.
The only other bit you need to get it working is the layout HTML below, which is also provided by Twitter.
HTML
If you're ever doing this for a client and they can only see the source of your page, instead of the full generated source and they want the page to validate just add <li></li> to the list.
CSS
Now for the magic. Add this into your stylesheet and watch it transform. I'll explain it line by line below.
#twitter_div { width: 300px; padding: 10px; background-color: #410323; border: solid 1px #5E0F38; }
ul#twitter_update_list { width: 300px; padding: 0; margin: 0; overflow: hidden; }
ul#twitter_update_list li { width: 300px; padding: 5px 0 5px 0; border-bottom: solid 1px #680441; list-style: none; }
ul#twitter_update_list li a { color: #FFFFFF; border-bottom: dotted 1px; text-decoration: none; }
ul#twitter_update_list li a:hover { color: #CA0A6C; border-bottom: solid 1px; }
First let's just look at each element that's in play. Just reference the colours below to the boxes in the diagram to see what's going on.
#twitter_div
ul#twitter_update_list
ul#twitter_update_list li
ul#twitter_update_list li a
#twitter_div
The <div> that contains the Twitter is given deep background colour that will stand out off the <body>'s dark grey background and a sharp one pixel border to create a nice contrast. It's also got ten pixels of padding to keep the list from butting up against the edges.
CSS
#twitter_div { width: 300px; padding: 10px; background-color: #410323; border: solid 1px #5E0F38; }
ul#twitter_update_list
The main list also given a width just for protection, the padding and margin's have been taken removed to stop the default indentation and the overflow is set to hidden so that we stop something like IE6 kicking out.
CSS
ul#twitter_update_list { width: 300px; padding: 0; margin: 0; overflow: hidden; }
ul#twitter_update_list li
Each list item has had the bullet points removed as they don't look to great in this case, some padding to spread each item out and a border just to define the end of each one that little more.
CSS
ul#twitter_update_list li { width: 300px; padding: 5px 0 5px 0; border-bottom: solid 1px #680441; list-style: none; }
ul#twitter_update_list li a
The <a> tags are styled up as per the rest of my site with a dotted white border which then joins into a solid pink when rolled over.
CSS
ul#twitter_update_list li a { color: #FFFFFF; border-bottom: dotted 1px; text-decoration: none; }
ul#twitter_update_list li a:hover { color: #CA0A6C; border-bottom: solid 1px; }
This should now give you the basic knowledge to style the badge up how you want. I'm going to style up one more and add a little jQuery to highlight each Tweet when's it's rolled over.
The sleek jQuery badge
This is the badge, shiny 'ey?
I've modified the CSS slightly but the main importance is the addition of the nice lookin' but simple jQuery.
This will just change the background colours of each individual <li> depending on which on is being rolled.
JavaScript
$(document).ready(function(){
$('ul#twitter_update_list li').mouseover(function(){
$(this).css({'background-color' : '#b1b1b1'});
});
$('ul#twitter_update_list li').mouseout(function(){
$(this).css({'background-color' : '#d5d5d5'});
});
});
48 comments
Nick wrote on
This is incredibly handy and will come in useful, especially with all the hype surrounding Twitter. I’ll be sure to give this a try! Cheers Ben
Pingback: 50 Twitter Tools and Tutorials For Designers and Developers | Developer's Toolbox | Smashing Magazine
Pingback: 50 Twitter Tools and Tutorials For Designers and Developers | Tasarım,Bilim,Müzik,Kitap,Sanat,Weblog
drale wrote on
Nice guide, I like the color reference box. I don’t like how the time gets wrapped around and think it should be on its own line. It is a single piece of information I believe should not break apart. You can do li span{display:block;} to the tweet which will push the time to a single line.
Nouveller wrote on
Nice call! I’ve actually added that to my sites CSS.
Creative Web Design wrote on
Awesome! This is going to be on the frontpage of our new layout… Expecting that to be launched around the end of the month.
Thanks for the code!
Nouveller wrote on
Let me know when it’s there.
Kira wrote on
Thanks very much! I’ve been looking for a way to prettify the official Twitter badge, and your instructions and template really helped. Really appreciate it.
Pingback: Twitter
Pingback: 10 Cool Twitter Custom Button Generators & Badges - Daily SEO blog
Zean Design Mexico wrote on
Genial, me ayudara mucho en mis proximos proyects… take you.
Ryan wrote on
Thank you so much i literally have been searching for 2 hours to just find a simple twitter feed code thanks.
Joe wrote on
worked like a champ! And you made it so clear and simple to execute.
Thanks
Palmer wrote on
Hey- thanks for the great script! Just what I needed for a customized Twitter feed for a client’s site.
Nouveller wrote on
Glad you found it useful!
Mike @ Twitter Designs wrote on
Hey this is very useful tool especially for those starters on twitter.
I’ll try to improve mine using this tips. if you have time try to check my collections too, thanks!
Pingback: Pretty Pretty Pixel Princess
Ryan wrote on
Tried this. Followed instructions pretty closely, and double-checked code and twitter account settings.
But no tweets showed up
Ryan wrote on
Never mind!
I was putting the script tags in the header, which I thought was acceptable.
But they really need to be at the bottom of the page (above /body tag)
Pedro wrote on
Hello, It is a fantastic and yet beautiful badge.
I wonder if it is possible to diplays twitter user´s list?
http://twitter.com/Nurbana/medios
Thanks
Pedro
Lucas wrote on
Hey there,
Thanks for a great script, pretty much just what I was looking for!
I was wondering though, could you help me out with a solution for having multiple badges on the same page? By that I’m referring to different Twitter accounts.
Thanks again!
//Lucas
Lucas wrote on
I actually figured it out by myself.
I copied the code from http://twitter.com/javascripts/blogger.js and changed the name of the function and also the name of “twitter_update_list”. One JS-file for each twitter account.
Thanks again for your script, couldn’t have done anything without it!
//Lucas
Nouveller wrote on
Nice work Lucas! Hopefully someone else can pick up your tip from this page!
Jon McClay wrote on
THANK YOU SO MUCH! I was going to leave this question in the comments!!! SO GREAT!!! Now to try it out and get through the hurdles…
andys wrote on
Can anybody tell me how to change the timestamp format?
Pingback: Geek is a Lift-Style. »Archive » 50 Twitter Tools and Tutorials For Designers and Developers
Andrew wrote on
Is there anyway you can add the “reply” that appears in the normal Twitter feed as well? Basically, right after the timestamp, I want to have the word “reply” which will bring you to Twitter where you can reply to that individual status.
Thanks,
Nouveller wrote on
Hi Andrew,
Interesting idea. It wouldn’t be possible with this idea without forcing it with JavaScript as you cant really configure the the feed coming from Twitter.
Optionally, you could also parse the feed with PHP and then be able to add in the reply links yourself but either option would work fine.
Where were you thinking about using it? As a reply button wouldn’t come in handy if it was just your feed on your site?
Pingback: Downloads Twitter API » Example Codes
Anish Patel wrote on
Brillent tutorial, explained very well, thank you. I download the JS file and took out the time stamp.
Pingback: Twitter: 50 herramientas y Tutos. « Otto1303
Pingback: Social Media Toolbox
plotki, celebryci, gwiazdy wrote on
Hi there, I discovered your website via Google while searching for a similar topic, your web site came up, it looks great. I’ve bookmarked it in my google bookmarks.
Pingback: get rid of tonsil stones
Furkan Güngör Freelance Web Design wrote on
My brother suggested I might like this website. He was entirely right. This post actually made my day. You can not believe just how a lot time I had spent for this information! Thank you!
Pingback: Crossbow Reviews
Nick BSP wrote on
Working on a new site and when I entered my Username on the second src, it failed to pull up any tweets. When I use yours, it works fine. Any idea why this is happening? Any other places I need to change username/anything I need to change at my Twitter account?
Nick BSP wrote on
Nvm, for some reason, comments made before installing the widget won’t show up. Working now, though! Thanks
Vern Hinchcliff wrote on
extremely practical info. hope to see even more posts shortly!
Pingback: Home Teeth Whitening Remedies
Hindi SMS wrote on
Just desire to say your article is as astounding. The clarity on your post is simply great and i could assume you’re knowledgeable in this subject. Fine together with your permission let me to take hold of your RSS feed to stay updated with approaching post. Thanks 1,000,000 and please continue the rewarding work.
Party Casino wrote on
My organization is constantly thought regarding this, regards for installing.
Dave wrote on
Is there a way to set the links in the twitter feed to behave as follows:
click on it and then open tweet in a new page (thus target=_blank)
Now it behaves like target=_self – it opens in the same page.
How can I easily do this?
Dave wrote on
Solved problem I used following jQuery code in $(document).ready(function(){ }
$(‘ul#twitter_update_list li a’).attr(‘target’, ‘_blank’);
Easy as it is!
terrasell99 wrote on
You can buy real twitter followers from http://terrasell.net with only $30 – 10,000 followers. 24h Delivery with no password needed. Can’t get any better than that:)
Free Logo Design wrote on
Thanks for such an excellent post. It certainly made my day. It is such a pleasure to look forward to your post. Excellent ideas and valuable inputs is what I always look forward to from your end. I am sure all the readers are going to find this extremely helpful.
Pingback: 50 Twitter Tools and Tutorials For Designers and Developer | GirlyTechStuff
Delbert Johnson wrote on
is there a way to do this with facebook also?