Socialize your Blog

First day of the weekend, and I started today morning searching for some ways to socialize my blog. How do I keep the cool links in my blog, like, Add to Google, Digg it etc. I was checking some websites that had this feature in a very simple way. There were also some sites offering readymade widgets which you can just add to your blog. Not satisfied with all of those, I started to create my own. I succeeded in making one and now I'm going to convert it into a tutorial so that you can also use it with ease. I'm going to assume that you know a little of HTML and Javascript. If not, refresh it from here before you proceed. For all those, who would like to have a readymade widget like the one shown below

refer to this blog. Let us now learn how to socialize your blog with some simple scripting.

Step -1 : Before you start, you need to have those handy little images with you. You can download it from here (and the complete sample). The zip file will contain all the GIF images which will appear at the blog HTML, on clicking of which it will allow the user to add the blog content to their favorite readers.

Step - 2: Let us now place all these images in a straight line so that they appear properly in the page. Note that the images are also given proper labels, thereby conveying a meaningful input to the surfer. For placing the images inside your blog, add a HTML area under page elements, and start entering the code. The sample code goes likes this.

<span style="cursor:pointer;" title="Add to Technorati" onclick="launcher(1)"><img src="technorati.gif" order="0" /></span><span style="cursor:pointer;" title="Add to Delicious" onclick="launcher(2)"><img src="delicious.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Google Fusion" onclick="launcher(3)"><img src="google.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Digg" onclick="launcher(4)"><img src="digg.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Yahoo! MyWeb" onclick="launcher(5)"><img src="yahoo.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Blink" onclick="launcher(6)"><img src="blink.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Furl" onclick="launcher(7)"><img src="furl.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Simpy" onclick="launcher(8)"><img src="simpy.gif" border="0" /></span><span style="cursor:pointer;" title="Add to Stumbleupon" onclick="launcher(9)"><img src="stumble.gif" border="" /></span><span style="cursor:pointer;" title="Add to Blinklist" onclick="launcher(10)"><img src="blinklist.gif" border="" /></span><span style="cursor:pointer;" title="Add to Spurl" onclick="launcher(11)"><img src="spurl.gif" border="" /></span><span style="cursor:pointer;" title="Add to Reddit" onclick="launcher(12)"><img src="reddit.gif" border="" /></span><span style="cursor:pointer;" title="Add to Fark" onclick="launcher(13)"><img src="fark.gif" border="" /></span><span style="cursor:pointer;" title="Add to Slashdot" onclick="launcher(14)"><img src="slashdot.gif" border="" /></span>

Step -3: The code in the textarea above will place the GIF images in your HTML page in the location you specify. There is a small function called "launcher" which we are going to embed inside a JS file. When the image is clicked, the function gets invoked which will add the necessary URL element values. The function then opens the target URL. Now, let us declare some variables in the HTML file where we plan to put these images.

<script language="JavaScript" type="text/javascript"><!-- var SourceURL = document.location.href; var SourceTitle = escape(document.title);--></script>

Here we try to get the current document URL and title so that it can be used inside the JS file to construct the absolute URL.

Step -4: Almost done. We are left with creating the "launcher" function and including it in the main HTML file. The reason to keep it in a separate file is to encapsulate the function from being visible in the HTML. I'm going to describe only for couple of bookmarking sites. If you want for all of them, you can refer to the sample here and get the code.

function launcher(switchid){ switch(switchid){ case 6: // Blink ID:1<br /> var switchid = "http://www.blinklist.com/index.php?Action=Blink/addblink.php";<br /> var urlvar = "url";<br /> var TitleVar = "title";<br /> var NoteVar = "description";<br /> var ReturnVar = "";<br /> var OtherVars = "&Action=Blink/addblink.php"; <br /> break<br /> case 2: // Del.icio.us ID:2 &v=3&noui=yes&jump=close<br /> var switchid = "http://del.icio.us/post?";<br /> var urlvar = "url";<br /> var TitleVar = "title";<br /> var NoteVar = "";<br /> var ReturnVar = "";<br /> var OtherVars = ""; <br /> break<br />var addtoFullURL = switchid + urlvar + "=" + SourceURL + "&" + TitleVar + "=" + SourceTitle + OtherVars ;<br /> if (NoteVar != "")<br /> {var addtoFullURL = addtoFullURL + "&" + NoteVar + "=" + SourceTitle;}<br /> if (ReturnVar != "")<br /> {var addtoFullURL = addtoFullURL + "&" + ReturnVar + "=" + SourceURL;}<br /><br /><br /> self.location = addtoFullURL<br /> return true;<br />

Step -5: Assuming the "launcher" function is stored in a file "bookmark.js", it can be included in your main HTML file by using the following code

<script language="JavaScript" src="bookmark.js" type="text/javascript"></script>

That is it.! we are done with the scripting part. Complete test script with images can be downloaded from here. Check it out. Comments or Corrections? Welcome!