ADD FLOATING SOCIAL MEDIA SHARE COUNT WIDGET IN YOUR BLOG

Our previous posts explained the ways to add share count buttons of various social media services like, Facebook, Reddit, ReTweet, Digg, Google Buzz, Google Wave, StumbleUpon etc. I have seen a new idea of keeping all these buttons as a single widget in many blogs. Here I am explaining a method to keep some of  these as a single widget that is floating near the post layout. You can select any other desired share count buttons of your choice and include in this widget. This submit & count button will display the submission count of URL of the displaying page.

How to Add Floating Social Media Share count buttons in your blog

   (Look at this picture to see a sample on the left side of the post layout)

1. Login to your Blogger account
2. Go to Design/Layout
3. Go to Page Elements
4. Click on Add a Gadget
5. Click on HTML/Javascript
6. Copy the code given below in red colors and paste it in the box. (Please note that some part of the code is given in blue colors for easy identification while customizing. Please copy everything including this.).Save and drag it to under the “BlogPosts”. Then Save the Template. You may make some changes in the code for customizing it, according to steps given at the end of this post.

<!-- floating page sharer Start -->
<style>
#pageshare {position:fixed; bottom:80px; margin-left:610px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:transparent;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
</style>
<div title="Get this at businessvartha.blogspot.com">
<div id='pageshare'><div class='sbutton' id='su'><a href="http://businessvartha.blogspot.com/2010/08/add-floating-social-media-share-count.html" target="_blank"><img src="http://i655.photobucket.com/albums/uu277/businessvartha/Picture2.png" border="0" alt="SHARE COUNT BUTTON" /></a>
</div><div class='sbutton'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div><div class='sbutton' id='rt'><script type='text/javascript'>
tweetmeme_style = &#39;large&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='sbutton'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div class='sbutton' id='digg'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='su'><script type='text/javascript'>url=&quot;<data:post.url/>&quot;; </script><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div></script></div><!-- floating page sharer End --></div></div>

 

Some changes to customize the above code:

1.  Position of the Share count Widget:

bottom:80px

You can change the position vertically by changing the “80px” to the height from the bottom of your choice.

margin-left:610px

The horizontal position of the widget can be controlled by changing the value from 610 to desired value. It is better to fix the Gadget near so close to the post layout .

2. Background color of the Widget

In the above code, back ground color is given as transparent that can be changed to #CCCCCC or any color code as given in the table below.

3. Adding more Social Media Buttons

If you want to add more social media buttons in the widget, simply subscribe my Feed and email me. I will send you the whole pack of code. Contact me using the contact form given in the header.

More Additives for your blog:

• ADD REDDIT SHARE COUNT BUTTON IN YOUR BLOG POSTS
• ADD CONTINUOUS SCROLLING IMAGE WIDGET IN YOUR BLOG
• ADD STUMBLEUPON SHARE COUNT BUTTON IN YOUR BLOG POSTS
• ADD RETWEET COUNT BUTTON IN YOUR BLOG IN YOUR BLOG POSTS
• ADD FACEBOOK SHARE COUNT BUTTON IN YOUR BLOG POSTS
• ADD GOOGLE BUZZ SHARE COUNT BUTTON IN YOUR BLOG POSTS
• ADD DIGG THIS SHARE COUNT BUTTON IN YOUR BLOG POSTS