MediaWiki Skins Design — Save 50%
Designing attractive skins and templates for your MediaWiki site
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
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, 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:
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.
eBook Price: $23.99
Book Price: $39.99
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 (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 (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:
You may need to register for an "AddThis" account to gain access to the code that will be required.
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:
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 :
eBook Price: $23.99
Book Price: $39.99
About the Author :
Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.
Richard’s experience includes many open source ecommerce 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.
Richard is 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 the author’s sixth book: Richard 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 and Inkscape 0.48 Illustrator’s Cookbook, and Apress’ The Definitive Guide To Drupal 7.
Books From Packt