26 Mar 2008
Adding a Social Bookmarking Toolbar to Your Posts
“Adding a Social Networking Toolbar to your Posts”

[Shamelessly recycled from my post on the appletalker scrapbook]

Here’s a quick tutorial on how to add a nice toolbar [with icons!] to the bottom of each of your Blogger posts, that will allow your avid readership to post your drivel to the following social bookmarking sites; Digg, Reddit, del.icio.us and Technorati. I’ve also incorporated Blogger’s built-in 'Add Comment' link into the toolbar, to keep everything neat and organised.

First of all, grab yourself some icons for the social bookmarking sites you want to provide links to. If you’re feeling lazy, or you just want to use the same ones as i did, click here to download icons for Comment [generic], Digg, Reddit, del.icio.us and Technorati.

Upload the icons to somewhere on the intarwebs. If you havenae got your own server space, you’ll have to try one of those free image storage sites like Imageshack, Photobucket, Flickr.. etc.

[NOTE: You’ll actually have been given image storage space on Picasa, when you signed up for Blogger, but _Picasa makes it nigh on impossible for you to link directly to images stored thereon, without having you jump through half a dozen hoops, so [at least for this mission] you’re better off hosting your own, [or using one of the less hassle-filled alternatives]._

Now you’re ready to start hacking your template. two caveats here:

  • Make sure that you’re using one of the modern templates. Depending on when you first signed up for Blogger, you may have been given an old-style template. You need to upgrade it to the new style templates, in order to be able to easily customise it. Look under TEMPLATE > CUSTOMISE DESIGN
atsb bookmarks00

If you see a window full of code, you’re ready to go. if you see the following dialogue, click UPGRADE YOUR TEMPLATE and then reselect it in its modern guise.

atsb bookmarks01

[NOTE: If you’ve already hacked your existing template, you’ll lose any changes when upgrading to the modern version, so be warned!]

  • You can only upgrade your template to the new type if you’re using CUSTOM DOMAIN or BLOG*SPOT ADDRESS as your PUBLISH settings. If you’re using either 'FTP (publishing on your ISP server)' or 'SFTP (secure publishing on your ISP server)', you’re out of luck.
atsb bookmarks02

Phew! - still with me? - OK. Here’s the code I used to build the toolbar. Notice it’s not yer average HTML. It makes use of Blogger specific tags such as expr:href inside the links. So normal HTML code willnae work here. Note also that I’ve enclosed my social bookmark links [and Blogger’s own ‘COMMENT’ link] inside their own <div> tag, of class linktoolbar. This is so that I can style up the text and adjust the position of the icons later.

Remember to change 'http://yourdomain.com' to point to wherever you stashed your icons!

<div class=’linktoolbar’>

 <a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><img alt=’comment’ src=’http://yourdomain.com/comment.png’
height=’16’ width=’16’/> comment</a>


<a expr:href=“http://digg.com/submit?phase=2&url=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’digg’
src=’http://yourdomain.com/digg.png’ height=’16’ width=’16’/> digg this</a>


<a expr:href=‘“http://reddit.com/submit?url=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’reddit’
src=’http://yourdomain.com/reddit.png’ height=’16’ width=’16’/> add to reddit</a>


<a expr:href=‘“http://del.icio.us/post?url=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’del.icio.us’
src=’http://yourdomain.com/delicious.png’ height=’16’ width=’16’/> add to del.icio.us</a>


<a expr:href=‘“http://technorati.com/faves?add=” + data:post.url + “&title=” + data:post.title’ target=’\_blank’><img alt=’technorati’
src=’http://yourdomain.com/technorati.png’ height=’16’ width=’16’/> add to technorati</a>



Now you need to paste this code into your template in the appropriate place.


atsb bookmarks03

Make sure you’ve ticked the box which says EXPAND WIDGET TEMPLATES - otherwise you’ll only be shown the bare bones of your template’s HTML - and not all the stuff you need

atsb bookmarks04

Now you’ve got to hunt through all this code spaghetti [which the Blogger developers have kindly left bereft of anything so feckin’ helpful as more than a couple of lines of code commenting!] and look for the line <p><data:post.body /></p>. Again, these instructions are for the minima template. If you’re using a different template, the code may be slightly different.

Paste your toolbar code immediately after <p><data:post.body /></p> as shown below

atsb bookmarks05

Once you’ve pasted the code in, SAVE your template and hit the PREVIEW button at the bottom of the template editing window

atsb bookmarks07

You should see the new social bookmarking links toolbar at the bottom of each of your posts. if you get an 'XML parsing' error while trying to preview, you messed up pasting in the code and you’ll have to revert your template [by hitting 'CLEAR EDITS'] and try again. If your toolbar is in the wrong place, you’ve pasted the code into the wrong place in the template - or you’re using a template that’s laid out completely differently to 'minima' [which is the one I’m using here].

atsb bookmarks06

The toolbar’s looking good as far as it goes, but the text is a bit big and I dinnae like the borders round the icons. Luckily, since we put the toolbar in its own <div> tag we can use some CSS styling to tidy things up.

Back to your template again and this time you’re looking to stick your CSS definition in somewhere between the


tags. The location isnae as vital this time, but I like to add my custom CSS just before the end


tag, so I can find it easily when the urge for further ‘tweakage’ is upon me!

atsb bookmarks08

Right. Here’s the CSS i used to adjust my toolbar. Use as is, or adjust to fit your own layout. The first declaration shrinks the text. The second removes the borders from the icons and moves them downwards by 10 pixels, so they line up better with the text.



font-size: 0.75em;


.linktoolbar img


margin-bottom: -10px;

border: 0px;


And here’s the finished product. Smaller text makes it a bit less clunky and the images now line up nicely with the text. as my old multimedia lecturer, Steve Marland used to say - 'Job’s a good 'un!'

atsb bookmarks09

Well, that’s it. Dinnae forget to save your changes and then sit back and wait for all that extra traffic to come pouring in when people start adding your posts to the social bookmarking world - and, if you found this tutorial useful, why not return the favour by clicking on a few of the links in my social networking toolbar below!


TAGS: how-tosocial bookmarksblogger


AUTHOR: stíobhart matulevicz

LAST MODIFIED: 27 Apr 2020  — REASON: "more tidying. better quote blocks"

Back to Top