How To Add Popular Social Bookmarking Service's Links in Blogger - All In One Code Provided!

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, del.icio.us, 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.

Social Bookmarking Button Provider:

Add This:
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.



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.

Munual Add Social Bookmarking Button's Code :
To add popular social bookmarking button in you footer allowing your visitors to bookmark your post in services like "Digg", "Technorati", "Del.icio.us", "StumbleUpon", "Reddit", "Blinklist", "Furl", "Spurl", "MyYahoo" and "Simpy" all you have to do is copy the code in the Box bellow and read on to see where to paste the code.

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

<!-- Start of social bookmarks. Check http://tips-for-new-bloggers.blogspot.com/ for updates --><br/> <a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Digg' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/digg.gif'/></a> <a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/technorati.gif'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/delicious.gif'/></a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/stumbleupon.gif'/></a> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/reddit.gif'/></a> <a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/blink.gif'/></a> <a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Furl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/furl.gif'/></a> <a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Spurl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/spurl.gif'/></a> <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Yahoo' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/yahoo.gif'/></a> <a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Simpy' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/simpy.gif'/></a><br/> <div align='center'><a href='http://themmonline.blogspot.com/' alt='Blogging Resources' target='_blank'>Widget by ©The MM Online</a> <!-- End of social bookmarks -->

Where To Place The Code :

After you have copied the social bookmarking code above, follow simple steps metioned below:

Go to Template -> Edit HTML and check the box that says “Expand Widget Templates.”

There are several places where you can place the bookmarks.

1. 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'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> PLACE CODE HERE <div class='post-footer'> <p class='post-footer-line post-footer-line-1'>

2. If you want the social bookmark links to be just above the labels:-

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

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

3. If you want the bookmark links to be at the bottom after the labels:-

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'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'> <data:label.name/> </a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p> PLACE CODE HERE

You're done adding the post popular social bookmarking servces to you'r blog. Ejoy!

If you like reading this post, Please leave a comment and let the conversation continue.