Get yourself a great looking custom Twitter badge

Posted on

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

Basic layout of the badge

#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?

Add your comment

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>