Four easy steps to add your own Del.icio.us link in Typepad

This post was submitted by Vic Correro from Writesville.com.

I have to give credit where credit is due. I first saw Darren’s use of the ‘Add this post to del.icio.us link a while back and decided that I would like to do the same to Writesville.com. I think this is an excellent idea, as del.icio.us is a wonderful resource. Also, Nick Wilson over at Performancing.com gave the additional push I needed to include this feature through his post and free PDF about del.icio.us.

For those of you who are familiar with Typepad, or are using it, the following information will require a tad bit of knowledge with Typepad’s advanced template structure. If you want more information on this, see: Advanced Template Sets and Template Tags. Understanding of HTML will also be helpful here.

Now, before I continue. I do want to mention that this is the way that I accomplished the task. As the saying goes: ‘There’s more than one way to skin a cat’.

So, let’s get back to the topic. If you want to create your own del.icio.us link embedded somewhere in your post, you will need to do the following:

Step 1

Create your own template module (call it what you want, but remember the name) that contains the following content:

<script language="JavaScript">
document.write("<a href='http://del.icio.us/post?url="+document.location.href+"&title="+document.title+"' target='_new'>Like this post? Add it to del.icio.us!</a>");

</script>

In this case, I called the above template module ‘delicious-footer’. Notice the section of the above JavaScript code that reads: ‘Like this post? Add it to del.icio.us!’ Replace this line of text with whatever you want to read as the link.

If you don’t want this link to pop up in a new window, take out the section that reads: target=’new’

Save the file when you are done

Step 2

If you want a separate CSS setting for your link, you’ll need to define that in your Styles.css file. For instance, here are my settings for that particular link:

.my-delicious-background
{
       margin: 0;
       padding: 5px 15px 5px 15px;
       background: #E7E3C6;
       font-size: 10px;
       color: #000000;
       text-align: center;
}

To get more information on CSS, and its uses, check out this CSS tutorial.

Save the file when you are done.

Step 3

The next step in the process is to reference your module from Step 1 through the ‘entry-individual‘ template module. The entry-individual template module is where the formatting of your individual posts is stored. This is where your knowledge of HTML will come in handy.

This will probably be the toughest part for those unfamiliar with this structure and HTML. You will need to figure out where, position wise, you will want the link to appear. If you notice my site, the link appears near the footer of the post (right above the comments and Adsense ad). This part is completely up to you. However, when you decide where you want to have your link, you’ll need to include the following code in that section:

<p class="my-delicious-background">
<$MTInclude module="delicious-footer"$>
</p>

I used the paragraph (<p>) tag here, but that could very well be some other tag of your choosing. Notice that steps 1 and 2 are included in this code (‘my-delicious-background’ as the CSS style and ‘delicious-footer’ as the template module).

Save the file when you are done.

Step 4

Publish your blog. You will need to ‘Publish All Files’ as any major changes (such as to template modules) will need to involve republishing of the entire site.

That’s it! You should now have a del.icio.us link added to your individual posts. Now, as far as having people use it, well, that is up to you and your marketing capabilities. That’s the part that I haven’t quite figured out yet. :)