Portfolio and Blog of Dan Mowchan

I have been fed up with the TwitterTools WordPress plugin for a few weeks now; one day it simply decided it wasn’t going to update my tweets anymore. Support from the developer wasn’t yielding any success for various people around the web so I basically let the issue linger longer than I should have. After reading an article on the Miva Merchant Blog, I was inspired to quit searching for WordPress plugins and create my own Twitter feed. There were a few problems I had with the simple cookie-cutter solution proposed by the people over at Miva Merchant, but with all the loose ends tied up I will share my solution.

Their solution is all good and well if you are looking to display only one tweet, but it becomes a little sloppy when you wish to show more. Sure, you could just display a list of tweets and be happy with that — or you could take it a step further and make something a bit more unique and customized. The design I decided on is still simple, but the possibilities this solution holds are virtually endless.

Here’s quick list of the things you will need to get started:

• You’re going to need to grab Twitter’s Blogger javascript file and upload it on your server
• A text editor or a more advanced development environment
• An idea for what you want your custom Twitter feed to look and feel like

Setting Up the Foundation

The first thing we want to do is modify the javascript file we downloaded before, so open it up in your editor of choice. For the purpose of my own customizations, each status update listed would be required to have a unique identifier. With this intact, I was able to style each tweet differently.

First, in the javascript file, you need to locate this line of code:

statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');

Since we want our tweet list to uniquely identify each list item it creates, we have to add in this functionality. I did so by using the existing “i” variable from the for loop; simply because it is set to start at 0 and increment itself after each tweet is listed. To do so I changed the way the loop handles list items, with this bit of code added:

<li id="t'+i+'">

With that, each list item created will be given a unique ID ranging from “t0″ to “tn”, depending on the maximum number of tweets you want on to appear. The “t” part of the ID can be changed to anything you prefer, it is simply the variable name I used. We can apply the same technique to identify the link for the date the tweet was created, this time I used the variable names “l0″ to “ln.” Also added in is a master class for all of the links created, I labeled this “lmaster” as you can see in the final edit below.

statusHTML.push('<li id="t'+i+'"><span>'+status+'</span> <a id="l'+i+'" class="lmaster" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');

Integration

Now that we have ironed out a few issues with the javascript, we can actually get this to work on a live page. The structure of this part is completely up to you, but for my needs I only included an unordered list to call the javascript from before. To call it, use the bit of HTML and javascript below. You should place the HTML where you wish for the list to appear and the javascript can be placed anywhere within the body tags. Be sure to replace the source of the script with where it is located on your own server, replace “REPLACE” with your own Twitter username, and “count=1” with the number of tweets you want displayed.

<ul id="twitter_update_list"></ul>

<script src="http://YOURWEBSITE.com/SCRIPTNAME.js"
type="text/javascript"></script>
<script
src="http://twitter.com/statuses/user_timeline/REPLACE.json?callback=twitterCallback2&amp;count=1"
type="text/javascript"></script>

Styling

Finally we have finished all of the structuring and backend work and we can get to the fun part; styling. Because we modified the javascript with unique identifiers on each tweet, the customization options are extensive — you can get as creative with this as you want, but the demo I have created and used on my own website is quite simple. You can see my final, styled HTML and CSS below or view the demo page.

<style type="text/css">
body{
font-family: Helvetica, sans-serif;
font-size: 12px;
}
#wrapper{
width: 460px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#twitter_update_list {
width: 460px;
padding: 0;
overflow: hidden;
line-height: 15px;
}
#twitter_update_list li {
width: 460px;
list-style: none;
padding-bottom: 7px;
padding-left: 7px;
}
li#t0 {
font-family: Georgia, serif;
font-size: 1.5em;
font-style: italic;
line-height: 20px;
padding-left: 0;
}
a#l0{
font-family: Helvetica, sans-serif;
font-style: normal;
}
.lmaster{
font-size: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="twitter_update_list"></ul>
</div>
<script src="http://dan.mowchan.com/twit.js"
type="text/javascript"></script>
<script
src="http://twitter.com/statuses/user_timeline/danmowchan.json?callback=twitterCallback2&amp;count=5"
type="text/javascript"></script>
</body>

Conclusion

View the Demo Page

The example that I use on my own site is very simple and clean — something I try to keep consistent throughout my webpage. However, keep in mind that with each tweet has a unique identifier now; you can style every tweet separately if you were so inclined. I’m sure there are some awesome ideas that you can think of; if you do use this technique to display your tweets on your own site, please share whatever you come up with in the comments!