Using the Twitter widget

8 Apr 2010 | Posted by: Keir Cleland
Using the Twitter widget

Since the lovely people at Twitter have decided to hide away their old style HTML widget in favour of the horrible flash ones I thought it would be a good idea to show how to do it!

Two bits of code are required to do this....

Step 1 - The widget

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/USERNAME" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>


Paste this where you want you're twitter feed to appear, we'll go into styling it later!
*replace USERNAME with your Twitter username

Step 2 - Javascript

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=5"></script>


Paste this just above the </body> tag on any page you wish to display the widget.
*replace USERNAME with your Twitter unsername

Step 3 - Styling

This is not the most flexible widget to style, but you can have a good go at getting it to look pretty good.

#twitter_update_list { }
#twitter_div { }
ul#twitter_update_list { }
#twitter_update_list li span { }
#twitter_update_list li span a { }
#twitter_update_list li a { }


By adding this to your stylesheet, you can control the looks of the widget. Play about with it and have fun!


 

Please rate this article

Click the stars below to give this article a mark out of 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 5 / 10


Post your comments...

We would really appreciate any comments or additions that you have. Include a link in your comment and if we think your comment is appropriate we will publish it. If found this article in any way useful we would really appreciate you bookmarking the page with any of the social bookmarking links provided.

Brilliant, works a charm, much better than their new widget they've released which I've had issues with customizing its font
Posted By: Yusuf - 6 Aug 2010
Thanks for your comments!
Posted By: Keir


Name:
(optional, shown on site)
Email:
(optional, never shown on site)
Code:
(case sensitive)		 captcha
Your feedback: