Blogger template for Social Bookmarking

Ok, you’ve been asking for it, so here it is! Read the full story

I’ve just finished creating, and testing the Social Bookmarking template for Blogger.

You can see it in action on Getting an available name on Blogger is really hard these days! :)

So you want it on your own blogger based blog? Read on…
The Social Bookmarking template snippet seems to be catching the fancy of quite a few people. :)

I guess that my initial assumption that the WordPress users out there would be the geekier of the lot and want it more was completely wrong. Blogger allows for template customization right there in your template settings and that’s where you’ve got to go to install my Blogger template section. It’s easier and it’s possible to do it without actually having to go all the way to host (and manage) your own blog somewhere.

The Blogger Template snippet

Here’s the Blogger template snippet:

I’ve set up a working demo at

Edit: The basic template is available for download as well.


You don’t really need much to have the Social Bookmarking section. A blogger blog, preferably with hosting outside of blogspot (choose the advanced option when you sign up).

Hosting of blogger files outside of blogger lets you have whatever other files you want along with your posts hosted as well. This does have some cost associated with it, but is cheap and well worth the money. Here’s some good hosts to try out. If you already host your blog, go straight to the How to Install section on this page.

You could however be one of the rest of the millions who have their blogs on Blogpot, the free hosting service. How do you get the template to work? Simple. Use one of the “free” hotlink file hosting services on the net. There are several, I tested out with FilesUpload and the functionality should work fine. You’re going to have to upload *all* the images in the images folder in the zip file. And the Overlib javascript library as well. After you’ve uploaded you’re going to have to change the template code to have fully qualified URLs for the images. Similarly the template parts where you add the Overlib library code according to the simple Overlib installation instructions, remember to change the src attribute to your selection of free files host. And if you don’t get any of this, you could ask for help here, maybe I (or someone else) could help you out.

How to Install?
Just like the WordPress template section, You’ll need to be able to add the images for the template and also the Overlib javascript library.

The template snippet expects the images for the Social bookmarking block to be present in a folder called Images in your host root (/). Copy the images from the zip file to your Images folder.

Next you need to install the Overlib Javascript Library. This is what allows the template to have those neat tooltips on the hover of each Social Bookmarking site. This is usually quite painless and should not pose a problem. Get the Library and install it on to your blog template according to their instructions.

Next, it’s time to actually insert the template section into your template code. For this, first take a deep breath. Relax. We’re going to be editing some template code manually and while it is simple, it pays to be attentive. :-)

Ok, first make a backup of your existing template. This is to make sure that if things go wrong you can revert back to where you were. First open up your blogger account and click on the big Template tab on top. Copy all the content in the big text box on the bottom. Create a new file and save the contents of that textbox in it. Give it a good name and save it safely so that you can get back to it if you need it.

Right. On with the editing. Most blogger templates have a section called or something similar. In this section you’ll find the Blogger template tag for the title of your post inside a section called . Just after the tag ends (), paste the entire contents of the blogger.html file, which you’ll find in the zip file download, above.

Save the template. Republish your blog. Your blog posts should now come up showing the Social Bookmarking section right under the title section of each post. Expand the section and check that the tooltips are working fine.

Place, lay the template out as per your wishes. Tweak as required.

If you have any problems, post a comment here.

I really don’t want to get into any
kind of licensing or that kind of stuff. So please consider it free of all restrictions, modify, use, do *whatever* you want to, with it.

If you’re feeling thankful, you could leave a shoutout on your site. Do tell me if you find it useful, here or by feedback.

A big shoutout to Socializer, for inspiration on this.
A bigger shoutout to NEO Binaries for helping me find Socializer in the first place! I just clicked Bookmarks on the comprehensive category list.

A big shout out to the guys at Overlib too, you guys rock! :)

Respect to all the people who commented. Yes, that’s you, 3spots, Steven Wong, Pierre Far (Socializer), Matt Fausey (tagtooga), Kenji, techbee, TonNet, and Scott Rafer.

The biggest shoutout goes out to you, Dear Constant Reader, for egging me on to make this. Hope this fulfills your wishes.

21 thoughts on “Blogger template for Social Bookmarking”

  1. I was trying to configure my template with the cool red heart and then I messed up everything. If your able to work for us and let us just ‘copy and paste’ would it be great. It has not to be hosted on your own server, though. Did you forgot we the bloggers not always know how to code? Piece of cake for you but not for all of us! :)

  2. Interesting implementation audienceone.

    I didn’t think that it would be such a big problem for non-hosting bloggers. Would you guys like me to work on an implementation that would be a simple-copy-and-paste that would pick up pictures, the overlib library, *EVERYTHING* from my own site? :)

    I believe that would address your and all other users’ issues as well.

    Hmm……. but I need some feedback from you guys. Tell me if you want it. Post a comment here, drop me an email, or put in a feedback post in my contact page.

  3. Hmmmm……. have you pasted inside the Blog Posts section?

    I’ve added the template I’m using at just below the download link, check it out – remember to replace “Your host” with your actual host.

  4. Hey! I was playing around and removed the doctype thingy but, the problem that I have is that the icons apear ‘only’ in the very first post and not over the others. Any idea? Thx.

  5. Ok, figured this one out.

    I’ve got it down to “Quirks Mode”. Quirks mode is how the browser determines how CSS styles work (among a lot of other things). I’m switching the display style of the div that shows/hides by javascript. Check out for more details if you’re interested in quirks. :)

    For those of you who aren’t, changing the strictness of the browser should work just as well. This is a work around I’m posting, but I don’t think it should have much impact on your blog – if any.

    Try *removing* the first line of the blog template, yes the “< !Doctype>” tag. Remove it completely. Check if it now works in both browsers. It should.

  6. Nope. Can’t think of any reason why it shouldn’t. I made sure it worked on those two, even for the test at

    Could you mail me the template text for your blog? I promise I’ll be good and not share it with anyone. :)

    My email address is dhiraj (hosted at the domain), by the way.

  7. Hmmm…….. using a javascript src tag? Interesting point. Then people wouldn’t have to muck around updating their templates that often.

    I’ll look into this. Thanks.

  8. sorry for the 2x post…but you could even make it dynamic — in an iframe you generate and feed to the sites (for a small fee possibly). That way it’d always be updated for webmasters!

  9. I saw that coming. :)

    Let’s see how popular this really gets.

    If there’s enough users of this, I might just fork out a separate site for it, good point Garreth.

  10. I love this! I’ve currently got one kinda like yours, but w/o the OverLib (which I love too!)

    …really, you could probably make a kick ass service for webmasters where you keep track of all these sites, then a webmaster can have all the links generated for him. So they can fill out a little form w/ their site’s url, title, comments, and your script will create the links w/ all the stuff on the querystrings. That way they don’t have to keep track of all the zillions of places, and it’d be a snap to add new ones to their sites.

    It would be a go-to place for webmasters!

Comments are closed.