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.

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.

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.

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

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!

No comments:

Post a Comment