Tech Trouble?: Adding multiple social bookmark links in a blogpost

How to add social bookmark link icons on Blogger blogposts?

Debashish told me that he has added beautiful series of icons of social bookmark sites in his blogpost with the help of a Wordpress plug-in. There is no need for a plug-in for Blogger or Blogspot posts. If you search a little on Google, then you will find dozens of readymade scripts and ready-to-use codes to display social bookmark link icons on a blog post. There are various sites too that lets you create custom code to display any number of social bookmark sites in your blog-post that you can choose from more that a hundred bookmark sites! If you want to use the bookmarks similar as displayed in this blog, then all you have to do is copy post following code in your blogger template at an appropriate location.

Now, you may ask, at which appropriate location? In general, social bookmarking tools were used to bookmark either a particular content, say a blog-post or an entire site such as a blog site. This code is meant to bookmark blog-post (or a certain page on web) and hence is to be placed in template in such a place so that it may appear in every blog-post. The best location will be either at the start or at the end of blog-post. In extreme case, if your template decoration allows you, you can place this in sidebar too! To place this code at the end of blog-post, go to your Blogger template tag </Blogger>. It may look like this:

</Blogger>

Now, copy paste following code in between, exactly above the </Blogger> tag.

<p><a href="http://blogmarks.net/my/new.php?mini=1&title=<$BlogItemTitle$>&url=<$BlogItemPermalinkURL$>" title="Blogmark it!"><img src="http://img2.imagepile.net/images/ycc2106/84282833.png" alt="blogmarks" height="16" width="16" /></a> <a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="Bookmark at delicious"><img src="http://img2.imagepile.net/images/ycc2106/80727937.png" alt="delicious" height="16" width="16" /></a> <a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>" title="Digg this!"><img src="http://img2.imagepile.net/images/ycc2106/89072042.png" alt="digg" height="16" width="16" /></a> <a href="http://www.furl.net/storeIt.jsp?u=<$BlogItemPermalinkURL$>&t=<$BlogItemTitle$>" title="Bookmark this at Furl"><img src="http://img2.imagepile.net/images/ycc2106/47600014.png" alt="furl" height="16" width="16" /></a> <a href="http://www.google.com/bookmarks/mark?op=add&bkmk=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="Bookmark this at Google"><img src="http://img2.imagepile.net/images/ycc2106/10847106.png" alt="google" height="16" width="16" /></a> <a href="http://www.netvouz.com/action/submitBookmark?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&popup=no" title="Bookmark this at netvouz"><img src="http://img2.imagepile.net/images/ycc2106/47445448.png" alt="netvouz" height="16" width="16" /></a> <a href="http://www.newsvine.com/_tools/seed&save?u=<$BlogItemPermalinkURL$>&h=<$BlogItemTitle$>" title="Bookmark this at newsvine" ><img src="http://img2.imagepile.net/images/ycc2106/27563199.png" alt="newsvine" height="16" width="16" /></a> <a href="http://reddit.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="Bookmark this at reddit"><img src="http://img2.imagepile.net/images/ycc2106/10796749.png" alt="reddit" height="16" width="16" /></a> <a href="http://www.spurl.net/spurl.php?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="Bookmark this at spurl!"><img src="http://img2.imagepile.net/images/ycc2106/67105361.png" alt="spurl" height="16" width="16" /></a> <a href="http://technorati.com/faves?add=<$BlogItemPermalinkURL$>" title="Bookmark this at technorati" ><img src="http://img2.imagepile.net/images/ycc2106/81723336.png" alt="Technorati" height="16" width="16" /></a></p>

Now your blog template's this section will look like this:

</Blogger>

Save the template changes, then republish entire blog. And, you are done!

You can use this very code in Blogger's other language blogs by incorporating slight change in code. You need to translate text to be displayed in specific language, which you can find under 'title' and 'alt' tags. For example, for Hindi (India) language, you can use following code: (You need to set your browser 's encoding to View>Unicode/UTF-8 to see Hindi text)

<p><a href="http://blogmarks.net/my/new.php?mini=1&title=<$BlogItemTitle$>&url=<$BlogItemPermalinkURL$>" title="इसे ब्लॉगमार्क पर पुस्तचिह्नित करें"><img src="http://img2.imagepile.net/images/ycc2106/84282833.png" alt="ब्लॉगमार्क" height="16" width="16" /></a> <a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="इसे डेलिशियस पर पुस्तचिह्नित करें"><img src="http://img2.imagepile.net/images/ycc2106/80727937.png" alt="डेलिशियस" height="16" width="16" /></a> <a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>" title="इसे डिग पर पुस्तचिह्नित करें!"><img src="http://img2.imagepile.net/images/ycc2106/89072042.png" alt="डिग" height="16" width="16" /></a> <a href="http://www.furl.net/storeIt.jsp?u=<$BlogItemPermalinkURL$>&t=<$BlogItemTitle$>" title="इसे फ़र्ल पर पुस्तचिह्नित करें"><img src="http://img2.imagepile.net/images/ycc2106/47600014.png" alt="फ़र्ल" height="16" width="16" /></a> <a href="http://www.google.com/bookmarks/mark?op=add&bkmk=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="इसे गूगल पर पुस्तचिह्नित करें"><img src="http://img2.imagepile.net/images/ycc2106/10847106.png" alt="गूगल" height="16" width="16" /></a> <a href="http://www.netvouz.com/action/submitBookmark?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&popup=no" title="इसे नेटवाअज़ पर पुस्तचिह्नित करें"><img src="http://img2.imagepile.net/images/ycc2106/47445448.png" alt="नेटवाअज़" height="16" width="16" /></a> <a href="http://www.newsvine.com/_tools/seed&save?u=<$BlogItemPermalinkURL$>&h=<$BlogItemTitle$>" title="इसे न्यूज़वेइन पर पुस्तचिह्नित करें" ><img src="http://img2.imagepile.net/images/ycc2106/27563199.png" alt="न्यूज़वेइन" height="16" width="16" /></a> <a href="http://reddit.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="इसे रेडिट पर पुस्तचिह्नित करें"><img src="http://img2.imagepile.net/images/ycc2106/10796749.png" alt="रेडिट" height="16" width="16" /></a> <a href="http://www.spurl.net/spurl.php?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" title="इसे स्पर्ल पर पुस्तचिह्नित करें!"><img src="http://img2.imagepile.net/images/ycc2106/67105361.png" alt="स्पर्ल" height="16" width="16" /></a> <a href="http://technorati.com/faves?add=<$BlogItemPermalinkURL$>" title="इसे टेक्नोराती पर पुस्तचिह्नित करें" ><img src="http://img2.imagepile.net/images/ycc2106/81723336.png" alt="टेक्नोराती" height="16" width="16" /></a></p>

If you do not like this readymade code then you can hunt in the following links for more customized solutions -

You can get readymade bookmark plug-in for Wordpress blog from here:

WP Notable

Finally, a warning- the tip describe above can be used in any blog template, but there is absolutely no guarantee from writer of this post. And, kindly note this - please make a backup copy of your blog template before making any change in your blog template. Blogger becomes menace at times!

Best wishes for your blog's bookmarkings!

Adding multiple social bookmark links in a blogpost

No comments: