• Could not connect to Twitter

Site Relaunch - customizing that Twitter Widget

With limited time to post any content to the Blog or Twitter micro-blog, being able to reuse/advartise that content seems like a win-win. Twitter helpfully provide a widget for just this purpose but, out of the box, it’s not quite right for my purposes. But with a little javascript, jQuery and CSS magic that can all be put right.

First a little screenshot to show what the vanilla widget looks like, after a bit of customization that you can perform on the Twitter site (you’ll find the widgets hanging off the ‘Goodies’ link at the bottom of your facebook page:

The widget shown is ok but:

  • I don’t like the header area, with those two Showmedos and a rather redundant Showmedo logo (this is appearing on the Showmedo site).
  • I’d also like to remove the padding to left and right of the tweets to align the text with the rest of the column content.
  • The font-used is lucida-grand but I would prefer to use Verdana, the default font for my site.
  • The ‘twitter’ badge on the bottom left, which is probably most likely to be clicked, takes users to the twitter home page ‘http://twitter.com’ but I would like it to direct to my twitter page ‘http://twitter.com/ShowMeDo’.

With a few a lines of css and jQuery javascript these problems are easily addressed.

First we remove the header by finding its css class, ‘twtr-hd’, and using jQuery to hide it. This is equivalent to setting its css ‘display’ attribute to ‘none’.

$('.twtr-hd').hide();

To change the padding and font-family just add some css to your style-file:

div#contentRight .twtr-widget{
    font-family:Verdana,Arial,Helvetica,"Trebuchet MS",Trebuchet,sans-serif !important;
}

.twtr-widget .twtr-tweet-wrap {
    padding:6px 0 !important;
}

Note the use of the !important flags to override existing settings and escape the css cascade. Now twitter themselves, rather frustratingly, set the widget font-style using an !important tag. This means that in order to override it we need to prioritise our !important using the identity ‘contentRight’ of the right column in which the twitter widget appears.

Lastly, in order to direct users clicking the twitter badge to ShowMeDo’s twitter site we use a little jQuert to change the ‘href’ attribute of the twitter link:

    $('.twtr-doc a').attr('href', 'http://twitter.com/ShowMeDo');

And we have the resulting, pretty satisfactory widget:
Showmedo's customized twitter widget

Please share:
  • DZone
  • del.icio.us
  • Reddit
  • Furl
  • Ma.gnolia
  • email
  • StumbleUpon
  • Technorati
  • TwitThis
  • Slashdot
If you enjoyed this post, make sure you subscribe to my RSS feed!

Related posts:

  1. ShowMeDo is on Twitter
  2. Relaunch, Refresh, Renew
  3. New Services Site for Professional Screencasts
  4. Site updates
  5. Site back up

Comments are closed.