Tutorial: Pulling Your 5 Most Recent Tweets via Ajax
Get our posts emailed to you with our monthly newsletter, subscribe here.
For web developers just breaking into social media there are dozens of fantastic APIs you can work with. Most notably the Twitter API has gotten a lot of attention in recent years. And such rightly so, as the developers at Twitter have been working nonstop to improve endpoints and other miscellaneous settings.
The API has also been online long enough that 3rd party developers have created their own web apps and released the code as open source. In this tutorial I’ll be working with exactly this type of open source jQuery plugin called tweet! which can pull recent tweets from any user account. The plugin also comes with some default styles which we’ll play around with. We could also pull tweet data from searches, lists, and favorites as well.
Live Demo Preview – Download Source Code
Building the Document
First I’m going to setup a new index.html file with the basic HTML5 doctype. Also I want to include an external style.css, along with the most recent CDN version of jQuery.
I also grabbed the most recent .zip of tweet.js which you can download from Github right here. Extract all the files and move the /tweet/ folder into the same directory as index.html. All we really need is the jquery.tweet.js library which includes all of the default functionality.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Recent Tweets Widget - Demo Page</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="tweet/jquery.tweet.js" type="text/javascript"></script>
</head>The demo tweet folder also includes a stylesheet which we can copy/paste into our own style.css. Then we have the freedom to mess around with different properties while still keeping some of the original styles intact.
Initializing Tweets
The function call has a lot of default parameters which you’ll have to follow along to the point. I am targeting a class .tweet which will be our container for these most recent tweets to display. The following block of JS was added right into the header underneath the final two JavaScript files.
<script type='text/javascript'>
jQuery(function($){
$(".tweet").tweet({
username: "jakerocheleau",
join_text: "auto",
avatar_size: 64,
count: 5,
auto_join_text_default: "",
auto_join_text_ed: "",
auto_join_text_ing: "",
auto_join_text_reply: "replied to",
auto_join_text_url: "retweet",
loading_text: "loading tweets..."
});
});
</script>Most of the variable settings should be self-explanatory. You can update the username value to whatever account you’d like to pull from. Also the avatar sizes can be changed into any dimensions if you need them to fit smaller or larger spaces. But with this structure in place let’s take a look inside the body element.
<body>
<html>
<div id="wrapper">
<h1>All your Recent Tweets</h1>
<section class="tweet"></section>
</div>
</body>
</html>This content area is super minimalist since we don’t need a whole lot of blocks. The wrapper div is set to a maximum width of 720px and centered on the page. Inside I’ve created a section element with the class .tweet. This is where all our tweets will be initially loaded into. Try saving these changes and open the demo in your web browser.
Working with Default Stylesheets
Right now the application should work by pulling JSON response data from Twitter, then organizing everything an unordered list. Unfortunately nothing is styled properly at this point unless you’re including the external tweet CSS. All this custom HTML code for list items could be edited inside the jquery.tweet.js file. But it will take some time studying and looking over the existing code so you don’t accidentally break anything.
Now we can finalize our application with some real custom styles. I’ve opened the jquery.tweet.css and copied everything into my style.css doc. Then I’m updating some of the .tweet_list styles to change the overall background and color scheme.
.tweet_list {
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
list-style: none;
margin: 0;
padding: 0;
overflow-y: hidden;
background-color: #fff;
margin-bottom: 40px;
}
.tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: 0.5em;
list-style-type: none;
padding: 1.8em 1.2em;
line-height: 1.5em;
}
.tweet_list li a {
color: #3c6baa;
}
.tweet_list li a:hover {
color: #5b86c1;
}
.tweet_list li img {
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
padding-top: 10px;
}
.tweet_list .tweet_even {
background-color: #ebf1f9;
}I added rounded borders for the image avatars just for a bit of eye candy. I’ve also changed the anchor link text and updated background colors for the tweet list. The JS library includes a default .tweet_even class which alternates the background color for every-other tweet.
Fancy Styles with CSS
This last bit of CSS I’ve included directly at the top of style.css. Since the tweet.js stylesheet didn’t include any designs for the body, I’ve appended a CSS3 background gradient effect using similar blue colors. So now the Twitter widget can switch between white/light blue backgrounds with a bright teal gradient wrapping the whole document.
body {
background: #b6ebee;
background: -moz-linear-gradient(top, #b6ebee 0%, #8adee2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6ebee), color-stop(100%,#8adee2));
background: -webkit-linear-gradient(top, #b6ebee 0%,#8adee2 100%);
background: -o-linear-gradient(top, #b6ebee 0%,#8adee2 100%);
background: -ms-linear-gradient(top, #b6ebee 0%,#8adee2 100%);
background: linear-gradient(to bottom, #b6ebee 0%,#8adee2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6ebee', endColorstr='#8adee2',GradientType=0 );
}
#wrapper {
width: 720px; margin: 0 auto;
}
h1 {
font-family: "Calisto MT", "Bookman Old Style", "Goudy Old Style", Garamond, "Hoefler Text", Georgia, serif;
background: url('twitter-gold-digger.png') 0px 0px no-repeat;
padding-left: 70px;
font-size: 3.2em;
line-height: 1.5em;
margin-bottom: 10px;
color: #363636;
text-shadow: 0px 1px 1px #fff;
}Additionally for the header text I’m using a customized font stack from cssfontstack.com. It’s a great resource for compiling custom font families without going through all the default sets. For the small Twitter icon I just searched through Find Icons for some relevant designs. This Twitter golddigger PNG neatly popped up as one of the first results.
This is truly all the customization we need for creating a powerful Twitter application. These mini-apps have so much value when you consider the need for such related widgets on all classes of websites. Blogs, portfolios, and social networks are just a few examples where this code may be put to good use. If you want to utilize some other tweet.js script effects check out the plugin homepage demos which also offer working code examples.
Live Demo Preview – Download Source Code
Final Thoughts
I hope this tutorial can be a helpful resource to at least a few web developers looking to mimic this functionality. A small “Recent Tweets” widget on any website is the perfect addition for grabbing the attention of new followers.
Also since we’re working on open source code it’s a lot easier to go through and update your jQuery function settings. There’s no need to work with JSON directly from Twitter, and so this plugin can save development time and headaches. In the long run it’ll take lots of practice before you’re totally comfortable messing around with backend APIs. But I would argue Twitter is one of the easiest and fastest networks you could choose for getting started!
Its is an useful stuff on pulling recent tweets. Thanks for the demo and source code. Good step by step explanation….
I like this very, very much. So much so that I starred it in Google Reader for later reference. :)
This will definitely be useful. Thanks!