Blogger Tips

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks.

This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want.

How to add the scrolling social bookmarking bar

Step 1. Log in to your Blogger Dashboard, select your blog and go to Layout

Step 2. Click on Add A Gadget link

Step 3. From the pop-up window, scroll down and select HTML/Javascript

Step 4. Copy the code below and paste it inside the empty box.

Step 5. Save the gadget.

The code to copy-paste (updated!):

<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from helplogger.blogspot.com">
<div class='button-share' id='like' /><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data- data-show-faces="false"></div>
</div>
<br /><div class='sbutton' ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' /><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div >Get <a href="http://helplogger.blogspot.com/">widget</a></div></div></div>

Customization:

Vertical alignment - Change the 15% value of bottom. The code positions the social bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.

Twitter setting - Replace Helplogger with your Twitter username

Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'> BUTTON CODE HERE </div>

Enjoy!!! :)

- Share Blog Posts In Social Media Using Addthis
In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the bottom of this post...

- Awesome Slide Open Heart Bookmarking Gadget For Blogger
This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook,...

- Add Social Bookmarking Buttons Near Adsense Ads
The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space besides Adsense units, making your blog look more attractive. Adding the social bookmarking buttons at the top...

- Add Social Bookmark Buttons To Blogger
In today's Blogger tutorial (Blogspot tutorial) you will learn how to place social bookmark buttons in the sidebar, footer and below each post in a Blogger Blogspot blog. This is a social bookmarking script for individual buttons or icons rather than...

- Add A Facebook Share Button To Blogger
An easy way to have your readers share your articles on Facebook is to add a Facebook Share Button to your Blogger blog (Blogspot blog). It only takes a few minutes to put a Facebook Share Button on your Blogger blog. Sharing your content on Facebook...

Blogger Tips