Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 2, 2007

Digg This Story

Social Bookmarking Links in Blogger

In this article, we shall provide the code for you to place into the template to have a line of icon/ button links or text links to popular social bookmarking sites like Digg, Technorati,, Reddit, Blinklist, Furl, Yahoo, Simpy, etc. Readers can click them to add your site or your post to their bookmarks and in sharing these links with others, your Blog becomes more visible. This code when inserted into your template will automatically place these social bookmark links at the bottom of every post. There are many social bookmarking sites and new sites pop up almost every week. What we can do here is to provide you with a code that will place several of these popular sites, and update this list over time.

Social bookmarking is a popular way for users to share their personal bookmarks of useful sites with other users. Since most of the bookmarks are classified by topics, tags or categories, people around the world with interests similar to the user can easily locate these sites by viewing their online bookmarks. Just over the last couple of years, this concept has caught on with so many users that social bookmarking sites are now very popular and highly ranked by search engines. We shall discuss and list these sites in a separate article. For now, we want to provide you a code so that you can have something to work with.

Bookmarking Codes

1. AddThis

You would have noticed that we have used the free services of AddThis. They provide a simple widget code which you can place into your template. When users click it, they will be brought to a page of the most popular social bookmarking or feed reader services. Through that interface, they can submit your site or blog post to their online bookmarks or feed readers. What we like about this is the simplicity in design with only one button at the end of each post. It provides as well statistics of the popular posts that are bookmarked.

Social Bookmarking links in Blogger

Register for a free account with them. When you are logged in, click on “My Account” and “Get the code for your widget.” You can either have a bookmarking widget or feed widget, choose a size of the button, and indicate Blogger as your blogging platform. Once you click on the “Get your free button link”, you will be shown a few codes that you can use. If you want the button to be in your sidebar, copy the code under the heading “Blog Button (New or Older Blogger).” Login to your Blogger account, go to Template -> Page Elements -> Add a Page Element in your sidebar and select “HTML/JavaScript”. Paste this code and save.

If you want the bookmark button in your Post footer use the code under the heading “Blog Post Button (New Blogger).” Follow the later section in this article explaining the different positions where you can place the code.

There are also other sites that provide similar services as AddThis. A search in Google will reveal a number of these sites. Feel free to try them out and find one that suits your needs.

2. Social bookmark text links

Text links are neat and can easily fit into the Post footer. This is what you can expect to see:-

Social Bookmarking Links in Blogger

If you like this in your Blog, we shall look at the code. Let us understand how the code works by using the example we gave in our article on Add Digg button to Blogger or Blogspot.

To submit that post to Digg, the full submission URL would be:- add-digg-button-to-blogger-or-blogspot.html &title=Add%20Digg%20button%20to%20Blogger%20or%20Blogspot

The part marked in blue is the URL of your Post. This is of course assuming that you have in your Settings -> Archiving, you have chosen “Yes” to “Enable Post Pages.” In your Blog template, this Post URL is coded as data:post.url. The part in orange is the Title of the Post. This is coded as data:post.title in your Blog template.

To change the above to an automatic link for every post, such that you do not have to key in the Post URL or Post Title, the code will be this:-

<a expr:href='";url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Digg</a>

If you have read our article on Hyperlinks and Image Links (I), you will know that the target='_blank' opens that link in a new window or tab. If you don't want that, you can remove this from the code.

On that understanding, the rest of the popular social bookmarking text links will be coded like this:-

<!-- Start of social bookmarks. Check for updates -->
<span style='font-size: 85%;' class='post-author'><br/>
Add Post To: |
<a expr:href='";url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Digg</a>|
<a expr:href='"" + data:post.url' target='_blank'>Technorati</a>|
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'></a>|
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='";Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='"" + data:post.title + "&amp;u=" + data:post.url' target='_blank'>Furl</a>|
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='"" + data:post.title + "&amp;u=" + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Simpy</a>|
<!-- End of social bookmarks -->

The above is the Text Link code that you can use. We shall talk about where you can place in the later part of this article.

3. Social bookmark icon links

If you prefer images instead of text, you can have icons or buttons to represent the bookmarking sites.

The icon links will look like this in your Post footer:-

Social Bookmarking Links in Blogger

Search for the bookmarking site icons through their official sites, download them, resize them to the required size, and upload them onto a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files.

For the purposes of this article, we have uploaded the images onto our Photobucket account. You can change the image URLs to those of your own.

<!-- Start of social bookmarks. Check for updates --><br/>
<a expr:href='";url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Digg' src=''/></a>
<a expr:href='"" + data:post.url' target='_blank'><img alt='Technorati' src=''/></a>
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='' src=''/></a>
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src=''/></a>
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Reddit' src=''/></a>
<a expr:href='";Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'><img alt='Blinklist' src=''/></a>
<a expr:href='"" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Furl' src=''/></a>
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Spurl' src=''/></a>
<a expr:href='"" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Yahoo' src=''/></a>
<a expr:href='"" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Simpy' src=''/></a><br/>
<!-- End of social bookmarks -->

Where to place the Bookmarking Code

After you have determined what you'd like – AddThis, Text Links, or Icon Links – copy the relevant social bookmarking code and place it in the template as follows. Go to Template -> Edit HTML and check the box that says “Expand Widget Templates.”

There are several places where you can place the bookmarks.

i. You can place them just below your Posts and before the “Posted By” line as shown in the above pictures. Scroll to these lines and place the relevant code at the red portion:-

<div class='post-body'>
<div style='clear: both;'/> <!-- clear for photos floats -->
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

ii. If you want the social bookmark links to be just above the labels like this:-

Social Bookmarking Links in Blogger

Scroll to these lines and insert the relevant code at the red portion:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

iii. Should you want the bookmark links to be at the bottom after the labels as shown here:-

Social Bookmarking Links in Blogger

Scroll to these lines and place the code at the red portion:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Jim White said...

Your site is a fantastic help! I've just started blogging a few months ago at to discuss buying and maintaining a computer running Windows Vista to promote my book Just the Computer Essentials. I quickly realized that if you want things a certain way on Blogger, you really need to do some customization.

I came across your site about a month ago and always look first to your tips for everything. Just yesterday I was looking to figure out how to do social bookmarking links beneath each post. I got it done using "Add This!" so I was extremely happy when I saw this article show up today verifying that I did it a recommended way!

Keep up the good work!

-- Jim

Anonymous said...

Hey Jim. Man, what an incredible site you have, with incredible information. I can't thank you enough. I apologize that this post is going to be unrelated to the topic. I hope that's ok. It's just that I couldn't find the exact information that I was looking for. My question is, I want to place scrolling text in the header of my blog, but I want it to blend in with the header. Just like you have with your "Inspirational quotes" blog. Another great blog by the way. Any help would be invaluable. Thanks. Jim, keep up this awesome awesome work. I found your blog less than a week ago, and instantly bookmarked it. I'm sucked in. :)

bizwhiz said...

Hi Anonymous

The scrolling text article is found at Scrolling Text - Marquee Code. If you want the text to blend in, include a color code but not a bgcolor code (background color). The other attributes are discussed in the article too.

Anonymous said...

bizwhiz, it worked like a charm. Thanks a lot.

Ron-Al-Do said...

A good read!

I've just started blogging recently too and wasn't too sure of the value of adding a lot of the social bookmarking links in my blog but after reading your post I can see the benefits. Something I'll surely add soon! I guess I'm most familiar with and digg at the moment, like you said there are so many popping up now you need to keep an eye on the current popular ones.

ICLfan said...

Thanks again, I still dont know how many of your post i have read and implemented on my blog. I like it very much moreover its you have a unique type to explain everying easy. Thanks a ton again.

f said... to do this in blogger classic template?

Free Computer eBooks

bizwhiz said...


Like many new bloggers, we started with the new Blogger templates. You may want to search the net since there are many senior bloggers who have been using the classic templates and are able to guide you.

HollowMarkeD said...

Thanks Jim, spread the knowledge :)

Wid said...

Hello, Do you HTML code for Facebook?
thank you

Anonymous said...

What an incredible site!!!!!! I have used your social bookmarking code and also your instructions to install the cbox onto my blog.....
I am new to blogging..
Thanks a bunch........

Samardeep said...

Thanks a lot. I often seek your pages whenever I got trouble in operating my blog. I have added a social bookmark link in my blog too.

paula said...

so user friendly tutorial...big thanks..

Finance Guru said...

thnx a lot

the muse said...

awesome! thank you!

Ian Thal said...

This was incredibly helpful-- it worked in a manner that no other widget I had tried had in the past.

However, it did not show the icons as described.

What about adding the BumpZee bookmark?

Mungo said...

Thanks - after searching and searching I found some clear code that didn't return an error. Appreciate it!


filius said...


similar to addthis, but more styles and customizable.

Sudeep D'Souza said...

Thanks for the code. I have customized it a bit more to add a title attribute to the link(< a >) tag links so that you get a tool tip. You might want to do the same to the code that you have published here. Also in the code to cut and paste if you can add something like "Bookmark this post using" so that it tells someone what all these images that come up are used for will be a help i guess.

Just my two bits but I think this gave me a jump start on what i wanted to do and thanks a lot for it.

John Chan said...

wow, i am searching this all over the place to place social bookmark in my blog. Until i found your blog.
Thanks u so much. It really help :)

Ian Thal said...

I used the social bookmarking icon links but the icons aren't displayed-- otherwise I am happy with the results. Like Wid, though, I'd love to have a Facebook button included as well.

Tekkaus said...

Wow! Damm! Thi site so darn awesome! Thanks man! Love you guys for helping the small guys like me. =)

AllMobiSoft said...

first time i visit your site for social bookmark codes. i put your codes on my site its working properly. any one can view my site social bookmarks, url is thanks dear admin

Anonymous said...

Great Content! I got the info which I was looking for elsewhere. Many thanks for the blogging tutorials and keep up the good work.

Pick Pocket said...

Hey ho!
Great instructions, brief and correct! Keep going...
You saved me a lot of time...I'm quite new in blogging...
For the result of your lesson check


Bitworld said...

hello thanks for the trick, please look at my block whether it is properly inserted or not

Advertise online said...

Your blog have lot information for new blogger, tks for your guide so that blogger have nice blog,

Mohammad Mustafa Ahmedzai said...

You are simply the best!!! I just added you to my Reading list.