Twitter in MediaWiki

Twitter (http://www.twitter.com) is a micro-blogging service that allows users to convey the world (or at least the small portion of it on Twitter) what they are doing, in messages of 140 characters or less.

It is possible to embed these messages in external websites, which is what we will be doing for JazzMeet. We can use the updates to inform our wiki’s visitors of the latest JazzMeet being held across the world, and they can send a response to the JazzMeet Twitter account.

Shorter Links

Because Twitter only allows posts of up to 140 characters, many Twitter usersmake use of URL-shortening services such as Tiny URL (http://tinyurl.com), and notlong (http://notlong.com) to turn long web addresses into short, more manageable URLs. Tiny URL assigns a random URL such as http://tinyurl.com/3ut9p4, while notlong allows you to pick a free sub-domain to redirect to your chosen address, such as http://asgkasdgadg.notlong.com.

Twitter automatically shortens web addresses in your posts.

Creating a Twitter Account

Creating a Twitter account is quite easy. Just fill in the username, password, and email address fields, and submit the registration form, once you have read and accepted the terms and conditions. If your chosen username is free, your account is created instantly.

Once your account has been created, you can change the settings such as your display name and your profile’s background image, to help blur the distinction between your website and your Twitter profile. Colors can be specified as “hex” values under the Design tab of your Twitter account’s settings section. The following color codes change the link colors to our JazzMeet’s palette of browns and reds:

As you can see in the screenshot, JazzMeet’s Twitter profile now looks a little more like the JazzMeet wiki. By doing this, the visitors catching up with JazzMeet’s events on Twitter will not be confused by a sudden change in color scheme:

Embedding Twitter Feeds in MediaWiki

Twitter provides a few ways to embed your latest posts in to your own website(s); simply log in and go to http://www.twitter.com/badges.

• Flash: With this option you can show just your posts, or your posts and your friends’ most recent posts on Twitter.
• HTML and JavaScript: You can configure the code to show between 1 and 20 of your most recent Twitter posts.

As JazzMeet isn’t really the sort of wiki the visitors would expect to find on Flash, we will be using the HTML and JavaScript version. You are provided with the necessary code to embed in your website or wiki. We will add it to the JazzMeet skin template, as we want it to be displayed on every page of our wiki, just beneath our sponsor links. Refer to the following code:

<div id="twitter_div">
<h2 class="twitter-title">Twitter Updates</h2>
<ul id="twitter_update_list">
</ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/
blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_
timeline/jazzmeet.json?callback=twitterCallback2&count=5"></script>

The JavaScript given at the bottom of the code can be moved just above the </body> tag of your wiki’s skin template. This will help your wiki to load other important elements of your wiki before the Twitter status.

You will need to replace “jazzmeet” in the code with your own Twitter username, otherwise you will receive JazzMeet’s Twitter updates, and not your own.

It is important to leave the unordered list of ID twitter_update_list as it is, as this is the element the JavaScript code looks for to insert a list item containing each of your twitter messages in the page.

Styling Twitter’s HTML

We need to style the Twitter HTML by adding some CSS to change the colors and style of the Twitter status code:

#twitter_div {
background: #FFF;
border: 3px #BEB798 solid;
color: #BEB798;
margin: 0;
padding: 5px;
width: 165px;
}
#twitter_div a {
color: #8D1425 !important;
}
ul#twitter_update_list {
list-style-type: none;
margin: 0;
padding: 0;
}
#twitter_update_list li {
color: #38230C;
display: block;
}
h2.twitter-title {
color: #BEB798;
font-size: 100%;
}

There are only a few CSS IDs and classes that need to be taken care of. They are as follows:

• #twitter_div is the element that contains the Twitter feeds.
• #twitter_update_list is the ID applied to the unordered list. Styling this affects how your Twitter feeds are displayed.
• .twitter-title is the class applied to the Twitter feed’s heading (which you can remove, if necessary).

Our wiki’s skin for JazzMeet now has JazzMeet’s Twitter feed embedded in the righthand column, allowing visitors to keep up-to-date with the latest JazzMeet news.

Inserting Twitter as Page Content

Media Wiki does not allow JavaScript to be embedded in a page via the “edit” function, so you won’t be able to insert a Twitter status feed directly in a page unless it is in the template itself. Even if you inserted the relevant JavaScript links into your MediaWiki skin template, they are relevant only for one Twitter profile (“jazzmeet”, in our case).