As most of you already know, Twitter is growing in leaps and bounds. With an estimated 4.5 million users on Twitter, Twitter is easier & quicker than writing a blog, it lets you be part of the conversation, and it can be used for almost everything.
In the same vein, jQuery is just as popular, and in its three years of existence, it has become the JavaScript framework of choice for organizations and developers the world over, including NASA, Google and WordPress.
Today, I’m going to show you how to add your Twitter feed to your website using jQuery, a bit of CSS and some XHTML.
What you’ll need
- jQuery (of course). You can download it from http://docs.jquery.com/Downloading_jQuery or if you use SVN, checkout the latest version from http://jqueryjs.googlecode.com/svn/trunk. We recommend you download the minified version of jQuery.
- Tweet. You can download Tweet from http://tweet.seaofclouds.com/
- 5 minutes
Let’s write some code
The first thing you’ll want to do is reference the jQuery files in the head section of your page:
<script src="/path/to/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="/path/to/jquery.tweet.js" type="text/javascript"></script>
You can also choose to put the following code in the head section of your page or, place it directly into the jquery.tweet.js file:
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
username: "YOUR TWITTER USERNAME",
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
To make this code snippet work on your site, simply add in your Twitter username in the correct location, and enter the number of twitter updates you would like to display (3 is the example used above).
If you decide to place the previous code snippet into the jquery.tweet.js file, don’t forget to remove the and the code snippets.
The last thing you need to do is insert some code where you want the Twitter feed to appear:
<div class="tweet"></div>
And that's all you need to do! You now have your own Twitter feed on your own website. You may want to style the output (an unordered list) as you wish using CSS.
I’d be interested in hearing your thoughts, comments, and questions about this post. Please post them up below in the comments section. ↓
Possibly Related Posts:
If you enjoyed this post, please leave a comment or subscribe to our RSS feed to have future articles delivered to your feed reader.
