How-to: A twofer for Blogger Blogs – Add co.mments and StumbleUpon

A couple of the additions I’ve made to my blog are two links that appear at the end of every post – Track with co.mments and Stumble It! (with StumbleUpon). it looks like this –To get that code into your blog is easy, provided that you have the correct code. However, the information on both sites is out of date and can be confusing for users of “new” Blogger.

Track with co.mments

The first item that I’d added to my blog is the Track with co.mments link. co.mments is a free service which allows you to track comments you leave on a blog. There is no requirement to register to use the tracking service, however if you do register, you can receive emails when your tracked conversations are updated. If you do a lot of commenting on blogs, this is the perfect add-on for you.

If you’re a blogger, then adding this to your blog will allow your readers to keep updated on conversations that are occurring at your site, which is useful since Blogger doesn’t have a “subscribe to comments via email” option like you can put in on a WordPress blog. Here’s how you do it:

Go into your blog’s template, and then select “Edit HTML”

Once there, you must Expand Widget Templates in order to add the code in. Before making any changes, be sure to save your template to your computer in case the changes don’t go well, and you need to revert to an older version of your template.

After expanding the widgets, look for this piece of code –

        <!-- email post links -->      <b:if cond="'data:post.emailPostUrl'><b:if" cond="'data:post.emailPostUrl'"></b:if>

– put a new line above that, so you can insert this code by copying the below and pasting it exactly as printed –

<a expr:href='"http://co.mments.com/track?url=" + data:post.url' title='Track this post with co.mments'>Track with co.mments</a>

Preview your template and if it works fine, hit save. You’ve now added co.mments integration into your blog!

Stumble It!

If you’re not aware of what StumbleUpon is just yet, it is a service that allows you to mark pages you like which will let other members of the free service know that this page is out there and recommended by someone with similar interests. Normally, you would have to have the StumbleUpon Toolbar to recommend a site to SU, but with this handy bit of code, your visitors will have the ability to add your blog posts to StumbleUpon.

Here’s how to add it to your Blogger blog.

First off, if you want to have this image () as part of your display, you will have to upload it to an image hosting site such as ImageShack or Photobucket as SU wish to distribute the traffic to other servers than just their own. Note, however, that if your blog’s template adds a border to all images within the “post template” (like mine does), you may wish to have the code without the image. Below is code for both versions

That being said, you will need to go back into your blog’s edit HTML page, using the method described above – click on Template and then on Edit HTML.

Again, you will need to expand the widget templates if you haven’t done so already. If you’ve just added the co.mments code – you should be perfectly set up to put in the StumbleUpon code.

Look for that same piece of code as before –

        <!-- email post links -->      <b:if cond="'data:post.emailPostUrl'><b:if" cond="'data:post.emailPostUrl'"></b:if>

– place a new line above this code and choose one of these options for your StumbleUpon code, simply copy and paste it exactly as published, putting in your image’s location if necessary –

With Image
<a href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title'><img alt='StumbleUpon Toolbar' border='0' src='YOUR IMAGE LOCATION HERE'/> Stumble It!</a>

Without Image
<a href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title'>Stumble It!</a>

– Preview the template and it it all looks good, save.

You’ve now added the Stumble It! code to your blog.

If you have any questions, you can leave a comment or you can send me an email. Also, if you have something you would like to have a howto written up for, feel free to ask. 🙂

8 thoughts on “How-to: A twofer for Blogger Blogs – Add co.mments and StumbleUpon

  1. Thanks for stumbling it! 🙂

    As far as the picture thing, you might want to make sure that it’s not stretching to fit the box; I put mine together using some code trickery, but Blogger have made it dead simple now. All you need to make sure of now is making sure that it’s the right size for your template.

    If that still doesn’t work, I’ll take a peek at your site’s code and see where it might be going wrong…

  2. Thank you so much! I’d been struggling to get a Stumble It on my blog – you’re right, their instructions are outdated. Great post!

  3. Hi,
    Thanks for the tips, very useful. I also use as a tracking tool cocomment. They have a new version in beta with very useful features, and seems to be working well now after some issues. It is also free.

    Thanks
    Joaquin

  4. Hi There,

    I was inspired to try this when I read your post, but I kept getting an error message.

    I was able to expand widgets, and find the correct place to paste code.

    But when I try to save, I got the following:

    We were unable to save your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.

    Perhaps the error of my ways is clear to you?

    Thanks for the feedback.

    Luisa

Comments are closed.