Adding Links in Blogger for Popular Aggregation and Bookmark Sites

To make it easy for readers to add a blog post from here to link aggregation and bookmarking sites, I’m adding buttons to the Blogger template for each service. To do this on your own Blogger blog, do the following:

  1. Log into Blogger
  2. Click on the Layout tab, then Edit HTML
  3. Select “Expand Widget Templates”
  4. Find the following block of XML (your template may be slightly different)
    <div class='post-body entry-content'>
    <p><data:post.body/></p>
    <div style='clear:both;'/> <!-- clear for photos floats -->
    </div>
  5. Add the following div block immediately after it
    <div style='float:right; margin-left:10px;'>
    <!-- Add button links here -->
    </div>
  6. Add the HTML for any of the sites listed below to the inside of the div block, replacing the line “Add button links here”

    Blinklist

    <a expr:href='"http://blinklist.com/index.php?Action=Blink/addblink.php&url="
    + data:post.url + "&Title=" + data:post.title'>Blinklist</a>

    Del.icio.us

    <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title="
    + data:post.title'>Del.icio.us</a>

    Digg

    <a expr:href='"http://digg.com/submit?phase=2&url="
    + data:post.url'>Digg</a>

    Furl

    <a expr:href='"http://furl.net/storeIt.jsp?t=" + data:post.title
    + "&u=" + data:post.url'>Furl</a>

    Reddit

    <a expr:href='"http://reddit.com/submit?url=" + data:post.url
    + "&title=" + data:post.title'>reddit</a>

    Technorati

    <a expr:href='"http://technorati.com/cosmos/search.html?url="
    + data:post.url'>Technorati</a>
  7. Preview the template and, if it looks OK, save it

The icons for each service can be used in place of the link text if desired. Since I don’t want to hot link the images from each service’s site directly, I’m attaching them to this post and referencing them locally (i.e., from Blogger’s server).