In this article by Richard Carter, we will learn social bookmarking.

Social bookmarking allows people to "bookmark", or make a note of, the websites they like or find useful, and share these bookmarks with other social bookmarkers while surfing the Internet.

Traditionally, bookmarking was done through Internet browsing software, such as Internet Explorer, Safari, Firefox, or Opera. With social bookmarking, your bookmarks are not confined to one browser, but are stored online.

The following two options are available for enabling social bookmarking on your website:

• Link to each individual social bookmarking service that you wish to use
• Use a social bookmarking aggregator such as Socializer or AddThis

Even if you do not have links to allow visitors to bookmark your website, many services allow their users to install toolbars in their browser, which allows your website to be added anyway. Adding these links will help to spread your wiki and its new skin very fast.

Individual Social Bookmarking Services

There are huge numbers of social bookmarking services on the Internet, and quite a number of these have become reasonably popular. We will look at some of the more popular bookmarking services such as:

• Mister Wong
• Furl
• Facebook

Your Wiki's Audience

One thing to consider before adding social bookmarking service links to your wiki is your audience. For instance, if your wiki is technology-related, you may find it better to use Digg than Facebook, as Digg is more popular than Facebook for your wiki's intended audience. If your wiki's visitors are primarily from Germany, you may find Mister Wong more useful than Furl, because Mister Wong is more popular with the German users.

There are many other social bookmarking services available, including Del.icio.us (http://del.icio.us) and StumbleUpon (http://stumbleupon.com), which you can use after asking your wiki's visitors by means of a poll, or following simple experimentation.

Example of Audience

durhamStudent (http://durhamStudent.co.uk) is a niche website aimed at students of Durham University in the UK:

The durhamStudent website uses both the methods of social bookmarking discussed earlier, providing links for eKstreme's Socializer and a link to an individual bookmarking service, Facebook:

Facebook was linked individually here because it is incredibly popular among the students at Durham University (indeed, the Durham network is only open to those with a university email address). Although Facebook's bookmarking service is accessible through Socializer, it is also linked separately as the website's target audience is more likely to use that service than any other.

Mister Wong

Mister Wong, http://www.mister-wong.com, is popular with German and other European users (though not so much in Great Britain), and allows the users to store their bookmarks while maintaining their privacy, with the ability to set bookmarks as "public" or "private".

Generally, the social bookmarking services ask for two pieces of information when creating a link from your website to them: the URL (address) of the page or website you want to add, and the title of that page or website, as you wish it to be posted.

Linking to Mister Wong

To link to Mister Wong, create a link where you want your social bookmark to be shown in your MediaWiki template in the following format:

http://www.mister-wong.com/index.php?action=addurl&bm_url=www.example.
com &bm_description=Your+Website

Spaces are automatically escaped with a "+" sign by the majority of social bookmarking services. You don't have to worry about properly escaping spaces in the title of your link when linking to bookmarking services.

To use these services with MediaWiki, we will be required to use some PHP. In particular, we will need the following:

• The page's title, which we can get with <?php $this->text('pagetitle') ?>.
  
• The website's address, retrievable with <?php $this->urlencode('serverurl') ?>.
  

For simplicity, we will assume that our visitors will always want to bookmark JazzMeet's homepage, http://www.jazzmeet.com. Thus, the code in our MediaWiki template would appear as follows:

<a href= "http://www.mister-wong.com/index.php?action=addurl&bm_url=www.jazzmeet.com 
&bm_description=JazzMeet" title="Bookmark JazzMeet with Mister Wong">Bookmark JazzMeet with Mister Wong</a>

What Mister Wong Users See

If a visitor to your wiki decides to bookmark your wiki with Mister Wong, they will be greeted with a screen similar to the following, with fields for the address of the website (URL), title, related keywords ("tags"), and a comment about the website:

They are also given the option to bookmark as either "public", allowing other Mister Wong users to see it, or "private", which restricts the bookmarked website to their account only.

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

Furl

Furl, http://www.furl.net, has functionality that is similar to Mister Wong.

Linking to Furl

Very similar to Mister Wong, you can create a link to bookmark a particular page in MediaWiki by inserting the following in to your skin template:

<a href= "http://www.furl.net/storeIt.jsp?t=JazzMeet&u=www.jazzmeet
.com" title="Bookmark JazzMeet with Furl">Bookmark JazzMeet with Furl</a>

What Furl Users See

Furl has the same features as Mister Wong. But the Furl team has added its own twist to social bookmarking, with the added features of being able to add a rating (out of five stars), marking the bookmark as "read" or "unread", and creating "groups" to better organize your bookmarked websites:

This information is provided by the user, so you don't need to specify any more parameters in addition to the page title and your wiki's address.

Facebook

Facebook (http://facebook.com) is a very popular social networking site that allows people to share photographs with each other. In 2006, Facebook launched its social bookmarking feature.

To link to Facebook's social bookmarking service, we can use the following code:

<a href= " http://www.facebook.com/sharer.php?u=http://www.jazzmeet.
com" title="Bookmark JazzMeet with Facebook">Bookmark JazzMeet with Facebook</a>

Note that we do not need to specify the page's title, as Facebook will automatically insert this, along with an (optional) image and a brief description of your website.

What Facebook Users See

Facebook's sharing features are a lot more limited than other social bookmarking services. The user is given an option to change the title or the address being bookmarked, and write a short description of the website:

Once posted, the link is visible in the poster's feed:

Social Bookmarking Aggregators

Rather than attempting to put every single social bookmarking site link in your MediaWiki skin template, there is a simpler way. We can use a social bookmark aggregator such as eKstreme's Socializer, or AddThis.

AddThis

AddThis (http://addthis.com) is the "number one bookmarking and sharing button".

Linking to AddThis

Linking to AddThis is easy as there is a wizard-style, step-by-step guide for creating and customizing your button. AddThis gives you a number of choices as to how it looks and acts for your wiki's visitors. Firstly, it can be used as a single button:

Secondly, a "drop-down" version with JavaScript can be used, which provides an instant access to the more popular bookmarking services:

You may need to register for an "AddThis" account to gain access to the code that will be required.

Socializer

ekStreme's Socializer (http://ekstreme.com/socializer) is another social bookmark service aggregator.

Unlike AddThis, Socializer does not have a drop-down "widget", so to use it you can just link to it as you would do in any other website.

You can create a new browser window by adding target="_blank" to the relevant link attribute. You could use this to prevent your wiki's visitors from losing their place on your wiki when they bookmark it. But it may irritate some visitors who are accustomed to opening a new tab in their browser by using the central mouse button.

Linking to Socializer

Linking to Socializer is similar to linking to Mister Wong or Furl's social bookmarking services.

What Socializer Users See

Socializer users are presented with a list of bookmarking services, with a more popular group towards the top of the screen:

Social bookmarking for JazzMeet

As JazzMeet's visitors are likely to be from a wide range of backgrounds, we will use eKstreme's Socializer for JazzMeet's social bookmarking.

Insert the XHTML given earlier in JazzMeet's skin template, below the article's content, aligned to the right:

Summary

In this article, we have discussed social bookmarking services such as Furl and Facebook.

If you have read this article you may be interested to view :

• Integrating Twitter and YouTube with MediaWiki

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

Richard Carter (http://www.EarlGreyAndBattenburg.co.uk ) started as a freelance web designer working in Leicestershire during his gap year. After meeting his business partner at Durham University, he co-founded Peacock Carter, a Newcastle-based creative partnership specializing in web design and development and corporate identity.