Social Bookmarks - Strictly Software

You will have probably seen as you travel the web that most sites will use social bookmarking such as Digg, Reddit, StumbleUpon and many others. This is a good way to get feedback from your visitors if they like your site which will then generate more traffic when other people read the comments or see your site listed as a favourite or good read etc. There are many kinds of these sites out there and they nearly all adhere to the same format when recieving new site requests which makes it very easy to create a simple include file that you can place into your blog or site within an HTML include file. All of these sites will supply various images that you can hotlink to and nearly all take at least 2 parameters when adding a new request:

URL: The url of the page to be added to the social bookmarking site.
Title: The title of the page that is to be added.

If you have been to my site before you will have seen that I place at the bottom of my pages a section containing links to various sites. e.g:

Feel free to click away whenever you read something good! And just because I am nice I will show you the code I use which makes it oh so easy to just drop an HTML include onto each page or into your blogs template, include a Javascript reference and some CSS styling and hey presto it will automatically modify each links HREF to add in the correct information for the URL and Title so that your pages can be added without further modifications. Obviously you can decide to do this all server side by setting up variables for the title and accessing the server-variables for the page URL. Or you could use your blogging systems own placeholders to do similar work. However this is an example of using Javascript so here it goes.

1. Create an HTML include file that contains the images and links to the social sites you want to link to. If you view the source for this page you will be able to see the HTML I use which is contained within a DIV with an id of "Socialize". As you can see from the following example which links to StumbleUpon the actual HREFs within the links do not mention the actual URL of the page I wish to add or the title. These will be added later by our Javascript.



<div id="Socialize"> 
	<div id="SocialStumble"> 
		<a id="SocialStumbleA" href="http://www.stumbleupon.com/submit" target="_blank"> 
			<img src="http://www.dev102.com/Dev102/wp-content/themes/Slick/images/SocialMedia/Stumbleupon-48x48.png" border="0" alt="Stumble This" /></a> 
		<a id="SocialStumbleI" href="http://www.stumbleupon.com/submit" target="_blank">Stumble this</a> 
	</div>

Download the full HTML include file here.

2. Put your CSS styles into your blog/sites stylesheet or hardcode them into the include file so that you do not have to add them to each page you wish to use these links on.


<style>
/* Styles for the Social Bookmarks */
#SocialStumble{float:left; margin-left:25px; width:96px; text-align:center;}
#SocialReddit{float:left; width:96px; margin-left:15px; text-align:center;}
#SocialDelicious{float:left; width:96px; margin-left:10px; text-align:center;}
#SocialTechnorati{float:left; width:96px; margin-left:15px; text-align:center;}
#SocialDigg{float:left;width:96px; margin-left:60px; margin-top:12px;}
#SocialDotnetkicks{float:left;width:96px; margin-left:50px; margin-top:12px;}
#SocialDZone{float:left;width:96px; margin-left:30px; text-align:center; margin-top:12px;}
</style>

3. Add a reference to my Javascript file to your site and make sure the function that sets up the links is called after the HTML has been outputted. I tend to use my own window onload function which ensures the code will be run after all the images have been loaded from the relevant sites.

AddWinLoadEvent(function(){social.setUp();});

You could even put the reference to the Javascript file in the same HTML include file so that its all self contained.

Download the Social Bookmark Javascript file here.

If you open the file up you will see that it contains a simple object that will modify the links within the Socialize DIV container by appending to each links HREF the relevant parameters required for that social site to receive a new site request. There are some variables at the top of the object which you can modify which affects the behaviour of the object.

socialLinks: contains an array of IDs that we are linking to. These match those IDs within the HTML include file.
defaultTitle: is the default title the script will append to the HREFs if no other value can be found. The script will first look for the page title using document.title but if thats too short or has not been set it will then look for another value by looking for headers (h1,h2,h3) that have been given a specified class name. If no value is found that is long enough it will use the default value set for this variable.
headerClass: is the variable containing the name of the class you want the script to look for if the document.title is not valid. You should place this class name on the header tags within your page that contains the most relevant descriptive details about the page. On blogspot for instance the h3 tag uses a class of "post-title" and this is the value I have defaulted for this variable.
minLength: is the minimum length that the document.title and header value has to be to be used by the script. If either one does not meet this requirement the default value is used.

Change those settings to meet your own requirements and then off you go. If you want to add new bookmarks its just a case of finding out the format of the URL and querystring they expect to receive and then adding in the required HTML, CSS and values to the array.

Its not very complicated but its a nice little feature and it means that you can add bookmark links to your whole site that will always use the correct URL and Title values with one simple include file.