Twitter helps to keep in touch with friends despite the distance and profession. For some friends you might require instant mobile updates while for others, you can just check your email. YouTube is a service providing website wherein we can upload, view and share various video clips. In this article by Richard Carter, we will learn to integrate Twitter and YouTube with MediaWiki.

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:

Designing attractive skins and templates for your MediaWiki site A practical, clear guide to building custom MediaWiki skins Extensive guidance on adjusting the layout and design of your MediaWiki's appearance Attractive examples and design tips for using JavaScript and dynamic CSS to enhance your wiki's design Change every aspect of MediaWiki's appearance to produce a wiki that's fully tailored to your requirements http://www.PacktPub.com/mediawiki-skins-design/book

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).

Designing attractive skins and templates for your MediaWiki site A practical, clear guide to building custom MediaWiki skins Extensive guidance on adjusting the layout and design of your MediaWiki's appearance Attractive examples and design tips for using JavaScript and dynamic CSS to enhance your wiki's design Change every aspect of MediaWiki's appearance to produce a wiki that's fully tailored to your requirements http://www.PacktPub.com/mediawiki-skins-design/book

YouTube in MediaWiki

YouTube (http://youtube.com) is a video sharing website that allows registered users to upload videos, and allows visitors to watch streamed videos that are categorized by tags. A feature useful to JazzMeet is that the videos can be embedded in external websites, by inserting the code provided on the video's page in to your own website. The code looks similar to the following example:

<object width="425" height="355"><param name="movie" value="http://
www.youtube.com/v/U4FAKRpUCYY&hl=en"></param><param name="wmode"
value="transparent"></param><embed src="http://www.youtube.
com/v/U4FAKRpUCYY&hl=en" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355"></embed></object>

This isn't particularly useful for MediaWiki, though, since you don't (generally) want videos in the template itself, but in the content area, where the HTML is presented as text within the document:

MediaWiki Extension: VideoFlash

We can overcome this problem with the use of an extension for MediaWiki called VideoFlash (http://www.mediawiki.org/wiki/Extension:VideoFlash). VideoFlash allows videos from a number of popular video websites, including YouTube and Google Video, to be embedded in your MediaWiki wiki with relative ease.

Installing VideoFlash

The instructions for installing VideoFlash are included on the website, but we will go through installing them on our JazzMeet wiki for clarity. Firstly, you will need to create a file called videoflash.php in the extensions directory of your MediaWiki installation. You should copy and paste the code provided in the extension's page on MediaWiki's website into this file.

Secondly, you will need to add a line of code at the end of your LocalSettings.php file, which is usually located in your MediaWiki's installation's root directory. If MediaWiki is installed at http://www.example.com/wiki/, you should be able to find LocalSettings.php at http://www.example.com/wiki/LocalSettings.php. The earlier versions of MediaWiki close the file with ?>: the require_once statement below needs to be above this "end of file" marker:

require_once("extensions/videoflash.php");

This tells MediaWiki that you have installed the VideoFlash extension, and helps you to find the relevant file.

Embedding YouTube Videos in Page Content

If any visitor wants to embed the video located at http://www.youtube.com/watch?v=U4FAKRpUCYY, they can now do so by inserting the following wiki-markup in a MediaWiki page on the JazzMeet wiki:

<videoflash>U4FAKRpUCYY</videoflash>

The page should now display the relevant YouTube video.

Embedding Videos from other Video Providers

Google videos can be embedded with a similar code once the VideoFlash MediaWiki extension has been installed:

<videoflash type="googlevideo">U4FAKRpUCYY</videoflash>

Summary

It is true that videos can be embedded into your wiki, but your visitors need to know how it can be done. In this article, we have learned how to integrate Twitter feeds into your wiki's template and how to embed and style YouTube videos in your wiki. Although adding these more interactive features to your wiki can be a good thing, remember that they should only be used to enhance your wiki.

Designing attractive skins and templates for your MediaWiki site A practical, clear guide to building custom MediaWiki skins Extensive guidance on adjusting the layout and design of your MediaWiki's appearance Attractive examples and design tips for using JavaScript and dynamic CSS to enhance your wiki's design Change every aspect of MediaWiki's appearance to produce a wiki that's fully tailored to your requirements http://www.PacktPub.com/mediawiki-skins-design/book

About the Author