How to Add Social Bookmarking Icons to Blogger
If your blog post is just awesome then adding social bookmarking icons or buttons below Blogger posts will let your readers to bookmark and share your posts with their friends.
People are becoming social, sharing things on Facebook, Twitter and other social networking sites. I have seen that there are many times when I get more readers for my blog from social networking sites whenever someone shares my posts with their friends.
You may also like to get social by adding bookmarking and sharing buttons, so I made and have updated this tutorial with 14 best bookmarking sites including a feed icon of your blog's feed.
Advantages of Adding Custom Sharing Icons
It is more flexible than official Blogger share icons due to:
- Use of custom images which can be of your choice with different styles and sizes.
- More social networking sites to share your posts.
- It is faster than other sharing scripts.
- And many more as it can be customized.
Social Bookmarking Icons Below Blogger Posts
Step 1: Go to Template tab on your blog's dashboard, click "Edit HTML" and check the “Expand Widget Templates”.
Step 2: Find any one of the below snippets:
<data:post.body/>
Or:
<div class='post-footer-line post-footer-line-3'>
Step 3: Just below any one of the snippets mentioned above, add the bookmarking codes:
<b:if cond='data:blog.pageType == "item"'> <div class='share-icons'> <h4>Share this post</h4>
<!-- Twitter -->
<a expr:href='"http://twitter.com/share?url=" + data:post.canonicalUrl + "&text=Currently reading: " + data:post.title + "&via=blogger_Raju"' rel='nofollow' target='_blank'><img alt='Twitter' src='http://icon-URL.png'/></a>
<!-- Stumbleupon -->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble' src='http://icon-URL.png'/></a>
<!-- Digg -->
<a expr:href='"http://digg.com/submit?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg it' src='http://icon-URL.png'/></a>
<!-- Delicious -->
<a expr:href='"http://delicious.com/save?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Delicious' src='http://icon-URL.png'/></a>
<!-- Google Buzz -->
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Google Buzz' src='http://icon-URL.png'/></a>
<!-- Facebook -->
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Facebook' src='http://icon-URL.png'/></a>
<!-- Reddit -->
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://icon-URL.png'/></a>
<!-- Technorati -->
<a expr:href='"http://technorati.com/faves?add=" + data:post.canonicalUrl' rel='nofollow' target='_blank'><img alt='Technorati' src='http://icon-URL.png'/></a>
<!-- Yahoo Bookmarks -->
<a expr:href='"http://bookmarks.yahoo.com/toolbar/savebm?u=" + data:post.canonicalUrl + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Buzz it' src='http://icon-URL.png'/></a>
<!-- Designfloat -->
<a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Designfloat' src='http://icon-URL.png'/></a>
<!-- Diigo -->
<a expr:href='"http://www.diigo.com/post?url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Diigo' src='http://icon-URL.png'/></a>
<!-- Google Bookmarks -->
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmarks' src='http://icon-URL.png'/></a>
<!-- Blinklist -->
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' 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.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Blogmarks' src='http://icon-URL.png'/></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/om-simplebloggertutorials" title='Subscribe to Feeds' target='_blank'><img alt='Subscribe to RSS' src='http://icon-URL.png'/></a>
</div>
</b:if>
Note the conditional tags marked in red. These are used to show the sharing icon buttons only on post pages. If you want it to be seen on every page except static pages then replace the red tags with below tags:
<b:if cond='data:blog.pageType != "static_page"'> [Rest of the codes goes here] </b:if>
As I'm providing too many bookmarking codes, I was unable to get matching icons for all of them, so it's up to you to upload and change http://icon-URL.png 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 Blinklist, then delete:
<!-- Blinklist --><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.canonicalUrl + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Blinklist' 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.
Follow first two steps and paste the script beneath any one of the codes mentioned in above steps.
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.
If you like this post then don't forget to add it to your favorite social bookmarks by clicking the bookmarking buttons.
