Integrating Twitter and YouTube with MediaWiki

Exclusive offer: get 50% off this eBook here
MediaWiki Skins Design

MediaWiki Skins Design — Save 50%

Designing attractive skins and templates for your MediaWiki site

$23.99    $12.00
by Richard Carter | August 2008 | MySQL Open Source PHP

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.

Integrating Twitter and YouTube with MediaWiki

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.

Integrating Twitter and YouTube with MediaWiki

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:

Integrating Twitter and YouTube with MediaWiki

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:

Integrating Twitter and YouTube with MediaWiki

 

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:

<!--[if gte mso 9]>
 
  Normal
  0
  
  
  
  
  false
  false
  false
  
  EN-US
  X-NONE
  X-NONE
  
   
   
   
   
   
   
   
   
   
   
   
  
  
   
   
   
   
   
   
   
   
   
   
   
  
<![endif]--><!--[if gte mso 9]>
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
<![endif]--><!--[if gte mso 10]>
<! 
mce:1
-->
<!--[endif]-->
<div id="twitter_div">
<h2 class="twitter-title">Twitter Updates</h2>
<ul id="twitter_update_list">
</ul>
</div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://twitter.com/javascripts/
blogger.js"></script>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.

Integrating Twitter and YouTube with MediaWiki

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


 


MediaWiki Skins Design Designing attractive skins and templates for your MediaWiki site
Published: August 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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:

Integrating Twitter and YouTube with MediaWiki

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.

Integrating Twitter and YouTube with MediaWiki

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.

MediaWiki Skins Design Designing attractive skins and templates for your MediaWiki site
Published: August 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt

MediaWiki Administrators’ Tutorial Guide
MediaWiki Administrators’ Tutorial Guide

Elgg Social Networking
Elgg Social Networking

MediaWiki Skins Design
MediaWiki Skins Design

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Spring 2.5 Aspect Oriented Programming
Spring 2.5 Aspect Oriented Programming

Learning Joomla! 1.5 Extension Development
Learning Joomla! 1.5 Extension Development

Drupal 6 Themes
Drupal 6 Themes

ASP.NET 3.5 Social Networking
ASP.NET 3.5 Social Networking


 

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
y
x
Z
Q
N
7
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software