Adding social bookmarking icons or buttons below blogger posts let's your readers to bookmark and share your posts which ever he likes. It's not only a Web 2.0 feature but also a great way to get social. I have seen that there are many times when I get traffic from social networking sites. Now you may also like to get social by adding bookmarking buttons, so I have updated this tutorial with 18 bookmarking sites and a feed icon.
Social Bookmarking Icons Below Blogger Posts
1. Go to Design > Edit HTML and backup your template and check the “Expand Widget Templates” box.
2. Find the bellow snippet:
<data:post.body/>
Or:
<div class='post-footer-line post-footer-line-3'>
3. Just bellow any one of the sections mentioned above, add the bookmarking codes:
<b:if cond='data:blog.pageType == "item"'>
<div class='share-icons'>
<h4>Share this post</h4>
<!-- Stumbleupon -->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumble' src='http://icon URL'/></a>
<!-- Delicious -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Delicious' src='http://icon URL'/></a>
<!-- Google Buzz -->
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google Buzz' src='http://icon URL'/></a>
<!-- Facebook -->
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' src='http://icon URL'/></a>
<!-- Reddit -->
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://icon URL'/></a>
<!-- Technorati -->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://icon URL'/></a>
<!-- Yahoo Buzz -->
<a expr:href='"http://buzz.yahoo.com/buzz?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Buzz it' src='http://icon URL'/></a>
<!-- Twitter -->
<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&text=Currently reading: " + data:post.title + "&via=blogger_Raju"' target='_blank'><img alt='Twitter' src='http://icon URL'/></a>
<!-- Digg -->
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg it' src='http://icon URL'/></a>
<!-- Designfloat -->
<a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Designfloat' src='http://icon URL'/></a>
<!-- Diigo -->
<a expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Diigo' src='http://icon URL'/></a>
<!-- Mixx -->
<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Mixx' src='http://icon URL'/></a>
<!-- Google Bookmarks -->
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google Bookmarks' src='http://icon URL'/></a>
<!-- Meneame -->
<a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Meneame' src='http://icon URL'/></a>
<!-- Furl -->
<a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Furl' src='http://icon URL'/></a>
<!-- Magnolia -->
<a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Magnolia' src='http://icon URL'/></a>
<!-- Blinklist -->
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://icon URL'/></a>
<!-- Blogmarks -->
<a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Blogmarks' src='http://icon URL'/></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/om-simplebloggertutorials" title='Subscribe to Feeds'><img alt='Subscribe to RSS' src='http://icon URL'/></a>
</div>
</b:if>
Note the conditional tags marked in red. These are used to hide the bookmarking icons from appearing below every posts on homepage.
As I'm providing too many bookmarking codes, I was unable to get matching icons for all of them, so change “
src=http://icon URL” with the icons you want to use as social bookmarking buttons, “
YOUR FEED ADDRESS” with the feed address of your blog and “
blogger_Raju” to your twitter account.
If you don't want to add any specific bookmark, then delete it. For example, if you don't want to include Mixx, then delete:
<! -- Mixx -->
<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Mixx' src='http://icon URL'/></a>
4. Find ]]></b:skin> and above it add:
.share-icons {
display: block;
background:#EEEEEE;
margin: 10px 0 0;
padding:5px;
border:2px solid #992211;
-moz-border-radius: 5px;
border-radius: 5px;
}
.share-icons img {
margin: 2px;
border: none;
}
Adding Addthis or Addtoany Bookmarks to Blogger
Visit
AddThis or
AddToAny, which ever you like, select the style you want to use and get the script code that they will provide.
Now for adding the bookmarking scripts, Find:
<data:post.body/>
Or:
<div class='post-footer-line post-footer-line-3'>
And paste script beneath any one of the codes.
5. Preview your template for any errors and save it.
If you also want these bookmarks to not to appear on homepage, then use the conditional tags as mentioned above. Now wait for some one to come across your posts and click the bookmarking icons to add it to their favorite Bookmarks.
If you like this post then don't forget to add it to your favorite social bookmarks by clicking the bookmarking buttons.
