is a free social networking and micro-blogging service that allows users to send updates to the in different ways. These updates (short messages) can be displayed in other places too, like a blog. One could question if this is useful or satisfying in any way, but I believe that the way we use it here is kind of neat.
We already have a blog but it takes time to create blog posts. For me it depends on the type of blog post I write. It can take hours or it can take 5 minutes. Randolph spends a whole lot of time on his. You should only know how much time and devotion he puts into his creations. With Twitter you can make the blog/site more alive. It is like , you write a status of what you're doing or how you feel or something like that. Something always happens on the site which is more fun.
So what you need to do first is to register at Twitter (unless you want to display someone elses tweets). And then it is just to add a little script. This can be done in a very easy way or a little bit more complicated.
1. Use the predefined that Twitter provides. Just choose an option and paste the script code to where you want your Twitter to be visible. You can tune settings like how many tweets you want to show.
2. Use customized badges which can be modified more by you. And another good reason for this is that the one we use will not hang the site if Twitter performs bad, since it will load as the last element of the blog.
explains and provides on how to do this.
We have customized it just a bit to fit our site better.
Add a div-element in where the tweets will be displayed. We will use two div-elements, one for me and one for Randolph. Randolph has created images which are used to more clearly indicate who says something:
<div align="left" style="margin: 0 0 0 20px">
<h3 style="color:#E1771E;margin:0 0 0 4px;padding: 0 0 0 0">Latest tweets:</h3>
<a href="http://twitter.com/randolphguy" title="Follow Randolph on Twitter" target="_blank"><img src="http://www.wohill.com/images/wo_randolph.jpg" style="margin:3px 0 0 0" /></a>
<div id="twitterRG" align="left" style="margin:0 0 0 17px">
<p>Please wait while my tweets load <br /><img src="http://www.wohill.com/images/wo_ajax_loader.gif" /></p>
<p><a href="http://twitter.com/randolphguy" target="_blank">If you can't wait - check out what I've been twittering</a></p>
</div>
<a href="http://twitter.com/nickwick76" title="Follow Nic on Twitter" target="_blank"><img src="http://www.wohill.com/images/wo_nick.jpg" style="margin:3px 0 0 0" /></a>
<div id="twitterNW" align="left" style="margin:0 0 0 17px">
<p>Please wait while my tweets load <br /><img src="http://www.wohill.com/images/wo_ajax_loader.gif" /></p>
<p><a href="http://twitter.com/nickwick76" target="_blank">If you can't wait - check out what I've been twittering</a></p>
</div>
</div> |
Script blocks also needs to be included to make the calls to the Twitter engine and to update the div-elements. This is also modified a little bit to make the prefix of each tweet to fit our design better:
<script src="twitter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
<!-- Randolph Guy tweets -->
getTwitters('twitterRG', { id: 14229645, count: 2, enableLinks: true, ignoreReplies: true, prefix: "<span style="color:#0000FF">Randolph said</span>", clearContents: true });
<!-- Nic Waller tweets -->
getTwitters('twitterNW', { id: 5549092, count: 2, enableLinks: true, ignoreReplies: true, prefix: '<span style="color:#0000FF">Nic said </span>', clearContents: true });
</script> |
Don't forget to copy the js-file '' into your system.
One problem is that it only works with one Twitter block when using Internet Explorer (IE). That is if you call the 'getTwitter' function more than once the first one doesn't load. This works fine on Firefox and Safari however. Really annoying of course. Let me know if you have a solution.
: %0ANickname: %0AImage url (ex: http://s3.amazonaws.com/twitter_production/profile_images/01234567/xxx_mini.jpg): %0AFirstname: %0ALastname: %0AEmail: %0AWebsite: %0A%0A)
