Close
Close

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. :)

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Victor says:

    Correction: anywhere that you see a backslash “\” and quotation mark together (in the sample code), replace those two with a single quotation mark. Sorry for the confusion.

  2. Hagrin says:

    Good idea and good point on “there is more than one way to skin a cat”.

    One suggestion – due to almost all FireFox users using NoScript, you wouldn’t want this to break. Therefore, you’re really better off making the change in the PHP code and creating dynamic HTML so that you ensure it working 100% for all users. I would tend to stay away from JavaScript unless you have a Web 2.0 based site in which case almost everyone using your site would be running JS code.

    No matter how you do it, it’s a worthwhile implementation. Great article.

  3. Andy Merrett says:

    Seems to be a delicious theme going round at the moment – all great info.

    What positive effects have people seen from using such a link at the end of each article? I’ve thought about using it but felt that it was yet another opportunity to clog up the site and potentially lose a visitor.

  4. Brian says:

    Does this work for Movable Type as well? I’ve been looking for how to do this since I noticed you added it here – thanks!

  5. Victor says:

    Brian, I am almost sure that you can do the same through Movable Type. When all is said and done, the Del.icio.us link is just that, a link. The big part is the fact that it always accompanies every individual post (so that you don’t have to manually add one). If Movable Type works with templates (like Typepad does) then you can do it.

    Unfortunately, I’ve never worked with Movable Type, so I cannot help you with step-by-step instructions on that. Sorry!

    Hagrin, you are right. Typepad, however, doesn’t allow much in the lines of programming flexibility (other than basic client-side scripting). I thought about this some more this morning. The only way that I can think of doing something like this is to host the code on some other server (and call it, somehow, from the Typepad blog). This is something I’d love to be able to do, just because it would improve the overall flexibility of the Typepad blogs.

  6. Joseph Nilo says:

    Does anyone have a solution yet for Blogger? None of the ones I’ve seen out and about on the net seem to work.

  7. Joe says:

    Hey guys,
    I just visited the del.icio.us site and they still seem to be having a lot of problems with their provider. Power outages and that type thing are not a good thing.
    I think I’ll wait until they move completely.
    Joe

  8. Billy says:

    I’ve not commented on this yet because I was hoping you were going to have an implementation for WordPress…

    BTW: this blog is on my A+ list, everything is just great, thx ProBlogger.

  9. Billy says:
  10. drape says:

    Hello guys!
    [URL=drape.ho.com.ua]Here you can buy and know all about drape![/URl]
    Thank you!

  11. Jenny Barnes says:

    well, i managed to avoid your list of blogs to bash. :) (for now at least) knowing how much crap is actually out there, it shouldn’t be too hard to fill the void and provide some real content that people can use to become better affiliates.
    http://www.pcextremist.us/computer-processors-explained.html

  12. Jenny Barnes says:

    Great tips man, gives me even more motivation to get going on it. I have a couple of the problems you’ve mentioned: not having enough time. Between work, school, and g/f, I barely have time to do campaigns. I also have no startup money.
    http://www.naghtylatinavideos.com/latina-models-and-actresses.html

Trackbacks

  1. [...] Blog Tips at ProBlogger: Make Money Online » Blog Promotion (tags: blogging) [...]