Being Social

Page 1 - Introduction and Del.ico.us

Skip to navigation

A chess board with two Kings, a Queen, and a pawn.
Oct
2

Today the web is all about being social, and by this I mean social networking. It is how the web today is moving, and communities are growing from it. This guide shows how to integrate things such as tag clouds and blog rolls on your site.

Social Bookmarking is an old concept that has in recent times been given a new and refreshed leash on life. In the times of old the concept of groups of websites linking to each other was commonplace, and was referred to as a webring. Today this concept has been changed to for the idea of keeping bookmarks in one place, and having the ability to share these with people browsing the page they are stored on. This means that the links you have found on one such page (for example ma.gnolia) that have been bookmarked by multiple people is more likely to be of acceptable quality and of relevance based on how they have been "tagged". Tagging, for the uninitiated, is a way of adding descriptive keywords to content such as a link, or a blog post, or an image, etc.

Del.ico.us Link Rolls

Of the social bookmarking sites, the two giants are most likely considered to be Del.ico.us and Ma.gnolia - both of which offer the ability to have a feed of tags, and/or links bookmarked displayed on your own website or blog. Del.ico.us is actually owned by Yahoo, as is the photo service, Flickr, both of which have useful API's that can be used. As you can see on this site, I have a box labelled as "Del.ico.us Roll" - this refers to a select number of links that I have bookmarked using my Del.ico.us account and have chosen to show to you on my site. The code behind this is as follows:

<script type="text/javascript"
	src="http://del.icio.us/feeds/js/USERNAME/
	design+development?count=LIMIT">
</script>
<noscript>
<a href="http://del.icio.us/jedi58/design+development> 
	title="My del.ico.us links">my del.icio.us</a>
</noscript>

The above example, where JavaScript is available, will use the script specified by the SRC to show a maximum of LIMIT links specified by design and/or development. The no-JavaScript alternative will instead show a link to page that shows these same links. This script is extremely customisable in both what it contains, and how it is displayed. The bit highlighted as USERNAME should be replaced with your own Del.ico.us username, and the design+development+web should be replaced with any number of tags that you want to be shown. The final part of the string, count=LIMIT, refers to how many links to show on the roll; e.g. count=15 would show a maximum of 15 links matching the keywords you specified. Removing all tags after the username would cause a vanilla version of the roll where all links were shown no matter what their tag, or how many there is. Further to this, extra tags can also be added to display things such as a title, icon, bullets, sort by, etc.

An extreme example, using all available tags for the link roll is:

<script type="text/javascript"
	src="http://del.icio.us/feeds/js/jedi58/
	design+development+web?tags;extended;
	title=my%20del.icio.us;bullet=%C2%BB;icon=rss;
	sort=alpha;name;showadd">
</script>
<noscript>
	<a href="http://del.icio.us/jedi58/
		design+development">my del.icio.us</a>
</noscript>

As you can see, there are now a few additions to the SRC tag - tags, extended, title, bullet, icon, sort, name, and showadd. The first of these is to specify that you want to show what tags you have applied to each link, and the extended means that it shows the description of the link underneath. Bullets are similar to what you see on unordered lists, and is what specifies which one to use (possible values are %C2%BB for s double arrow, %E2%80%A2 for an ordinary filled circle). Specifying icon with no value will add a large del.ico.us logo at the top of the link roll, but specifying another value will change it to either a small logo (icon=s), or an RSS badge (icon=rss). The sort should be obvious, adding sort=alpha causes the links to be sorted alphanumerically rather than chronologically.

Further details, including a generator for this code can be found at in del.ico.us help.

Del.ico.us Tag Clouds

Del.ico.us also offers the chance to have a tag cloud of what you have tagged your bookmarks with; as with most tag clouds the size of the font used can be variable based on the number of times the tag has been used.

<script type="text/javascript"
	src="http://del.icio.us/feeds/js/tags/USERNAME?
	size=10-24;color=87ceeb-006699">
</script>

In this example, it will get the tags for the given username, and then show them in varying sizes from 10pt to 24pt, and ranging in colour intensity from #87ceeb to #006699. As with the link roll, the tag cloud also offers many more options that were not in the example above, these include similar options such as the name and showadd options for allowing others to see you on del.ico.us.

Further details, including a generator for this code can be found at in del.ico.us help.