[Geeks are Sexy] technology news

Friday, June 16, 2006

Simulating the Sociable Wordpress Plugin under the Blogger Platform

A few days ago, while following some of my incoming links through my stats engine, I stumbled upon the blog of Evan Spiegel, one of our long time readers. Evan has coded a very interesting feature into his Blogger blog that allows him to simulate the effect of the Wordpress Sociable plugin on the Blogger platform. After asking him how he did it, Evan nicely provided me with the code he added to his template to make this work. You can see the result at the bottom of each blog entry on [GAS]. He gave me the permission to publish the code, and also the way to integrate it into the template.

Note: The TXTs that contain the code are zipped, so you'll need Winzip (or any other compression utility that supports the zip format) to uncompress them.

Step #1

Go to your Blogger dashboard, click on "Change Settings" and then click on the "Template" tab.

Step #2

Select all of the text in your template and copy / paste it in notepad. Save this file and keep it as a backup in case you mess up your template.

Step #3

Download, uncompress and edit this code. Replace the values marked as "Insert URL of icon right here" by the links to the location where you stored your icons of the various social networking sites you want displayed on your blog. (digg, reddit, del.ico.us, etc.). You can add and remove as many as you want. Add the code just before the < /style > tag in your Blogger template.

Step #4

Download this
additional code and edit it. The top block contains everything you need to display the icons configured in step #3. The second block contains most of the other known social networking sites and will add them to a drop down box that will be displayed right after the icons configured in block #1. You can add or remove as many services as you want, just study the code carefully if you decide to do so. When you are finished, paste everything directly after the "<$BlogItemControl$>" tag into your Blogger template.

Step #5

Save your changes, and hit "Republish".

Step #6

Have a look at your blog and see if everything worked as planned.

Voila, you're done! Now, your readers have a convenient way to submit / bookmark your blog entries to their favorite social networking sites.

Edit (17/01/07): These customizations will not work for those of you who have migrated their blog to the new Blogger and have also upgraded their template by hitting "Customize Design" in the template tab. If your blog runs on the new Blogger, but with the old template code, everything will work as indicated.


  • Hey Kiltak!

    The post is great. Very helpful and easy to follow. Its a shame that the developers at blogger have never implemented this, even in the help documents. Such an easy MOD that can really help improve your site.

    Keep it up!

    By Blogger Evan Spiegel, at 11:51 AM  

  • Hey Kiltak!

    Awesome post, however your files on www.foolscircle.net/kiltak/ are not accessible.

    Please re-upload somewhere.

    If you need help hosting it, let me know, I will host it for you for free.

    By Blogger St. Geek, at 6:04 PM  

  • Wonderful. I will try this now. Thanks.

    By Blogger Ramanathan, at 5:35 AM  

  • Kil - I got a one up on this... I put together a javascript you just paste into your source and it puts in all of the buttons!

    Check it out here...


    By Blogger velkymx, at 2:43 AM  

  • Thanks for the useful post.

    I have one more tip:

    If you guys want to implement this only on the permanent post page than add the second code after "ItemPage" instead of "$BlogItemControl$" tag into your Blogger template.

    You may check premalink of any post on my blog( http://websoup.blogspot.com/ ), to check out how its look!

    By Anonymous amit, at 4:50 PM  

Post a Comment

Links to this post:

Create a Link

<< Home