New, Improved Mashable-like Floating Social Sharing Buttons Widget for Blogger

I have grown tired of trying to find ways to solve horizontal alignment problems that normally come with the use of share buttons such as Facebook and Twitter. Finally made the decision to remove everything from my blogs and adopt something that was originally inspired by Mashable.

Yes, Mashable still has it on their blog and I have been using something similar for about 3 days now. So far, so good! I can even say that the newly-installed floating social sharing buttons widget (you can see it on the left-had side) has brought some pleasant results! Better traffic and engagement in just a few days!

There are several good tutorials out there that can show bloggers that are using Blogger the necessary steps in installing similar widgets. I have chosen the one made by Raju, the marvelous blogger behind simplebloggertutorials.com since his instructions are crystal clear! Well done, Raju!

On the 3rd day, I added a few new additions to my floating social sharing buttons widget and today I thought it would be great if I share the new, improved version with other bloggers.

What does the new floating social sharing buttons widget has to offer?

The new, improved widget offers bloggers that are using Blogger 4 new buttons that I believe have never been used by other bloggers on their own floating widgets before. The first two new buttons nicely integrated Blogger’s BlogThis and Email Post to a Friend tools, the other two are integrated with FeedBurner, giving visitors super quick ways to subscribe to our RSS feeds either by email or via FeedBurner.

How to install the new, improved floating social sharing buttons widget to Blogger

Open up your Blogger template and look for your <data:post.body/> data tag. Once found, add the following codes BEFORE your <data:post.body/> data tag:

<div id='putra-lrt'>
<div class='station-gp'><center><g:plusone annotation='none'/></center></div>
<div class='station-fb'><center><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&amp;appId=200228286715128&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/></center></div>
<div class='station-tw'><center><iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?text=&quot; + data:blog.pageName + &quot;&amp;count=vertical&quot;' frameborder='0' scrolling='no' style='width:55px; height:65px;'/></center></div>
<div class='station-bt'><center><a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><img src='https://lh3.googleusercontent.com/-HBXKAVgGrIU/Ts9xvNXLZ7I/AAAAAAAAClg/ihlzMDXeuxc/s800/blogger.png' width='48'/></a></center></div>
<div class='station-ma'><center><a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><img src='https://lh3.googleusercontent.com/-8WObLbyTjQg/Ts55ccr_5bI/AAAAAAAAClY/a8sFQWByjKI/s800/email.png' width='40'/></a></center></div>
<div class='station-er'><center><a href='Your Email Subscription Link' target='_blank' title='Subscribe by Email'><img src='https://lh4.googleusercontent.com/-_qC2GtV6Blk/Ts5QhRu8iTI/AAAAAAAAClI/R6KVBe2MxJs/s800/email-rss-.png' width='42'/></a></center></div>
<div class='station-rs'><center><a href='Your RSS Feed via FeedBurner URL' target='_blank' title='Subscribe via FeedBurner'><img src='https://lh4.googleusercontent.com/-L6DQyypFoPI/Ts5wkyV-c9I/AAAAAAAAClQ/GxToFjXcHuY/s800/rss.png' width='50'/></a></center></div>
</div>

Please pay attention to the ones colored in green and red. The one colored in red must be replaced with your FeedBurner (hope you’re using one!) URL while the one colored in green must be replaced with your FeedBurner-powered email subscription link. You can find it from your feed’s dashboard at FeedBurner, right under ‘Publicize’. Look for something that looks like this:

http://feedburner.google.com/fb/a/mailverify?uri=HomeBiss

I must also mention that the Twitter Tweet button that your visitors will be using after this installation is the iframe-based Tweet button, not the nasty JavaScript-based one. Please follow the link that I have provided earlier for more details about the iframe-based Tweet button.

Now look for ]]></b:skin> in your Blogger template and place the following code (jQuery) right after it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

Once a while or maybe at least once a month, visit Google Libraries API and look for jQuery updates. The current version is 1.7.0 and it might get revised or updated after some time.

Now you may place the following JavaScript code. Place the whole block BEFORE your HTML </head> tag.

<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#putra-lrt&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 20;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>

At last! We’re down to the last step and this one should be familiar for most bloggers. Just copy the whole block of CSS rules and place them in your embedded style sheet (aka Blogger template).

#putra-lrt {
float: left;
margin-left: -86px;
background: #f2f2f2;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#putra-lrt .station-rs {
float: left;
clear: left;
padding: 5px 5px 0px 7px;
}
#putra-lrt .station-er {
float: left;
clear: left;
padding: 5px 5px 0px 11px;
}
#putra-lrt .station-ma {
float: left;
clear: left;
padding: 5px 5px 0px 12px;
}
#putra-lrt .station-bt {
float: left;
clear: left;
padding: 5px 5px 0px 8px;
}
#putra-lrt .station-tw {
float: left;
clear: left;
padding: 5px;
}
#putra-lrt .station-fb {
float: left;
clear: left;
padding: 5px 5px 0px 10px;
}
#putra-lrt .station-gp {
float: left;
clear: left;
padding: 5px 5px 0px 13px;
}

Pay attention to the one colored in orange. You may have to play with the value over there to get the perfect fit for your floating social sharing buttons widget on your blog. Fine tune until you’re happy with it! :)

Problems?

If you run into any problems in installing the new, improved floating social sharing buttons widget, please let me know as soon as possible via comment down below.