Several people have approached me (I’ve been approached, lol) on one of the latest changes on my blog. As a passionate follower you couldn’t help but sense there was something new to PHIL’s Blogging, right? It’s that grey box, up there, giving you the latest updates (from twitter.com/phdotaschauer). Read why Twitter can improve your blog, connect you with people across the globe and how I embedded the Twitter box so smoothly.

Twitter is an online application that allows to display micro blog entries originally dealing with the important question in today’s society: What are you doing at this moment?

The importance of the answer of this very question is not to be debated right now, because devouring a schnitzel, ironing and folding your mother’s underpants or emergency calls like “Tom touched me inappropriately” aren’t really internet publishing material. For the latter you better call 133 (in Austria) or 911 (in the States). Back to the topic: However, there are things you want to shout-out loud (among bloggers there is this instinct shout-out-urge) and publish online - some kids seem to forget that - but aren’t really worth wasting a blog post.

I, phdotaschauer on twitter.com, have had an account from the first days but I have always struggled with the embedding of the micro blog posts on my site. I didn’t want to draw readers from my blog to Twitter, but rather from Twitter to my blog. The badge offered by Twitter is nice for Myspace, but it feels awkward and alien on most sites. This grey box is the perfect solution for now, because it is visible at first sight, could (if you wanted) be disabled to not show up again (even on refresh) and adds value to my blog with current status updates.

Twitter can connect you with people all around the globe because it has notifications that are either sent to you onto your mobile phone or your Instant Messaging account (like AIM, Jabber,…). The connectivity the other way around is as easy. You are free to update your status online in a web form (on twitter.com), via your IM account or (attention fellows, addictive!) your cellphone.

If you want to follow someone else on Twitter (and subscribe to his/her/its twitts) all the messages will be collected on your home page on Twitter.

Status updates, yes. Blog ersatz, no.

Over the years Twitter has evolved from the “What are you doing right now, honey?” kind of service to blogging-addition and even alternative. Quotes, shout outs, questions, weekend plans and invitations are common messages posted on twitter profiles. More and more people use it as a blogging application because operating a blog with categories, tags and design adjustment consumes an enormous amount of time. Tell me about it. If you ask me and if it was up to me, I wouldn’t consider this as an alternative blog since my blog posts tend to be longer than 160 characters (if your update is longer a [..] appears and if the follower -that’s twitter talk for subscriber - clicks on the “read on” indication it can be read). Status updates, yes. Blog ersatz, no.

Is it possible to do this from Austria? I honestly don’t want it to be, because that would boost my EUR 25 a month plan into outer space. Check out twitter’s FAQ on phone verification (+44 is UK dialing code). I am not willing to pay for that, sorry. Yet. I’ll update you on this matter.

Like any other neat internet technology I have to warn you: You are entering addictive territory.

Therefore, I finally found a neat way of installing a twitter update box under my header flash animation. However, if you want to know how, read through the code I am posting below, otherwise you’re free to leave and continue surfing on PHIL’s Blogging pages.

How-to: Twitter Update Box

How I created the twitter update box in only four steps? Let’s do this in a recipe-way… What do we need, my friend?

• Click here for the Twitter Update Box 1.0 download.
• A Twitter account. Sign up first.
• Knowledge how to fiddle around with HTML.
• A file where you want the Twitter Update Box to appear.

Step 1 - Add Javascript to the header

Add the javascript code to the header (inbetween of <header></header) of the file you want the Twitter Update Box to appear. Wordpress: header.php template file.

Step 2 - Activation when loading the page

Add onload="loadMsg('msgbox');" into your body tag (<body *inserthere*>). Wordpress: header.php template file.

Step 3 - Insert the box

Put the box code in any part of your page:

<div id="twitter_div" class="msgbox"><a href="#" onclick="closeBox('twitter_div'); return false;" class="twitter_buttons">Close</a><a href="https://twitter.com/phdotaschauer" target="blank" class="twitter_buttons">Follow me on twitter</a><span id="twitter_update_list"></span> </div>

Modify the link of Follow me on twitter according to your username: <a href="https://twitter.com/phdotaschauer" target="blank" class="twitter_buttons">

Step 4 - Submit your settings

The lines commented as Step 4 define your settings and goes at the end, before the </body> tag. Wordpress: footer.php template file.

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/phdotaschauer.json?callback=twitterCallback2&count=1"></script>

phdotaschauer is the user name (twitter.com/USERNAME) and count=1 defines the number of messages you want to display. If you decide to display more than one, you should edit your CSS file (style.css) and change the line list-style:none; in #twitter_update_list. I commented it so you can’t miss it.
The code that is commented as Step 4 should go before the </body> tag, because if the server of Twitter happens to be slower than expected, it doesn’t refrain your page from being fully loaded.

Et Voilà, you’re done. Now you can display your twitter updates in a box that can be disabled in case your visitor isn’t interested in your twitter activities.

If you have some more questions, please don’t hesitate to ask. Special thanks go out to the crew of CSSnewbie who taught me how to disable a box permanently. So if you want to know the magic behind the javascript and more in-depth explanation, expect it on CSSnewbie’s pages.

The new theme that is currently under construction doesn’t offer a disable button, however I figured this might be useful for themes that are similar to WhiteAsMilk. Ad acta with this entry then.