13
comments
Best Social Bookmarking Widget for Blogger (With Counter Button)

Having a social bookmarking icons on a blog is almost necessary for every blogger users in present. There is a booming demand in the market to have a Best Social Bookmarking Widget for Blog.

Two most beautiful features of this Social bookmarking widget are:

  • Sleek icons (Best to fit anywhere on the page)
  • Counter buttons (User can have idea about the posts popularity by showing the counter numbers)
After reading below given article, you will know that how you can add a Sleek or a Small Social media Icons as a social bookmarking widget in your blogspot blog.

Best Social Bookmarking Widget for Blogger

To add this Social Bookmarking widget in your blogger blog, you just need to follow the simple steps given below to. This Sleek social media icons include a digg button, re-tweet button, face-book share button, stumble upon button and a cute email this post link button.

Steps to Add Social Bookmarking Widget in Blogger
Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML and checked the Expand Widget Templates Check box.

Layout Edit HTML - Expand Widget Template

#Step 2. Find this code:
<data:post.body/> and replace it wit this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social'>
<b class='si'>Spread it!</b>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='social_button fb'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button buzz'>
<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
<div class='social_button em'>
<a expr:href='&quot;mailto:?subject=Sharing:&quot; + data:post.title + &quot;&amp;body=I wanted to share this with you. Thought you might enjoy it:%0A%0A&quot; + data:post.url' target='_blank' title='Email This'>Email This</a>
</div>
</div>
<div class='clear'/>
</b:if>
<data:post.body/>

#Step 3. Find this code:
]]></b:skin> and replace it with this code:
.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px; }.social .si { float:left;padding-top:3px;}
.social .social_button.dg { margin: 0px 0 0 30px ; padding-top: 2px;}
.social .social_button.tm { margin: 0px 0 0 32px; padding-top: 4px;}
.social .social_button.fb { margin: 0 0 0 15px; padding-top:3px;}
.social .social_button.su { margin: 0px 0 0 25px; padding-top: 2px;}
.social .social_button.em { margin: 0 0 0 25px; padding-top: 3px;}
.social .social_button.buzz { margin-left:30px ; padding-top: 3px;}
.social .social_button.em a{background:#eee url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat; padding:2px 3px 2px 22px; font-size:10px; border:#ddd 1px solid; text-decoration:none; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.social .social_button.em a:hover {background:#ddd url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}
]]></b:skin>

#Step 4. Save template and done!.

If you have any query then just leave a comment, i would love to help you.

Updated on July 28 2010: Added Google Buzz counter button code.


13 Responses to "Best Social Bookmarking Widget for Blogger (With Counter Button)" - Leave a response

  1. Unknown July 23, 2010 at 5:51 AM
    This looks really worthwhile for my blog, but can you tell me where the widget will show up, in my posts?

    Ideally I'm hoping it will appear where my current partially working Retweet button resides ie at the bottom of each post!
  2. Piyush - Admin @ Blogger How To Tips July 24, 2010 at 1:02 AM
    @pcd2k - Find this code in your template : <div class="post-footer-line post-footer-line-3">, right after that line put above #step2 code.

    Note: Don't include <data:post.body/>, because it is the code which directs widget to include in the beginning of post body.

    let me know in case you need more help :)
  3. Unknown July 26, 2010 at 10:44 AM
    Ok I followed your directions to the letter but after clicking Save Template
    this message returned

    We were unable to save your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "

    So what bit is meant to be in the code I just added ???
    If so where ?
  4. Piyush - Admin @ Blogger How To Tips July 26, 2010 at 9:58 PM
    @pcd2k, The element type "div" must be terminated by the matching end-tag means that you have not closed <div> tag properly. While changing code make sure that all the html and xml elements closes properly.

    if you are still facing problem, i can fix it for you.- Give me admin permission for that, read more instructions on how you can give me right to edit your blog: http://besthowtoblogger.blogspot.com/p/help-desk-for-bloggers-ask-questions.html

    you can trust me :) Take care...
  5. Anonymous August 18, 2010 at 7:52 PM
    Hi Piyush,

    I loved this. But on my blog the Facebook icon size is different than in your blog. Also, the count does not work for facebook. Visit my blog.

    http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html

    Do let me know what should I do?
  6. Piyush - Admin @ Blogger How To Tips August 19, 2010 at 12:15 AM
    Hi Virendra, i have visited your blog and i have noticed that your content wrapper will not be able to handle this social bookmarking widget because when facebook share counts your email this section will come down. so i suggest your to remove that email this section from the code. then try and let me know if it works or not.
  7. Unknown August 20, 2010 at 12:24 PM
    Hey there! I thought I followed your instructions to the letter but can't see the widget on my page at all! http://ingatruscott.blogspot.com/ if you can help, that would be AWESOME!

    Inga
  8. Piyush - Admin @ Blogger How To Tips August 20, 2010 at 8:25 PM
    @Inga Truscott, If you want to display the social bookmarks widget on your home page also then you have to remove first and second last line of the # step 2 code. I have put an IF condition in the code and hence you will see the social widget on only on Post pages. You will not be able to see it on Home page or other category pages. If still you are confused then let me know. :)
  9. Shaiksoft September 8, 2010 at 10:12 PM
    Nice post. I'm thinking of replacing my existing social book mark widget on my blog. Do you have any suggestion???
  10. Piyush - Admin @ Blogger How To Tips September 8, 2010 at 11:16 PM
    @Shaiksoft, This is a must try widget. This is one of the best widget for the blog's and websites.
  11. counter for Blogspot March 27, 2011 at 4:50 PM
    I like your way of explaining.Very informative post.I will definetly try this.Thanks for sharing.

Post a Comment

^ Scroll to Top