How to Add Floating Social Media Buttons on Website or Blog

By | December 20, 2013

social media sharing buttons

This post shares the way for using floating social media buttons on any website or blogs easily.
So are you looking for social media buttons which appear floating on the side of posts on your website or blogs. Its true there are lot of WordPress plugins for making it easy on WordPress sites. But what if you want to add these floating social media buttons on a custom website or a blogspot.com blog ?

As per my experience floating social media buttons helps to increase the rate of social share comparing to the fixed buttons. In this post i am sharing you a custom code which i found useful regarding the issue. I am successfully tested this code on blogspot blog and a custom website. Guess what ? I got success on displaying social media buttons on the sidebar which moves as users move down or up in a website.

Increasing on social share helps a website for getting more visitors which is good for every website owner. You guys can add below code any where on your website or on widget for a blogspot.com blog.

Update : This widget even works with WordPress Blogs, simply add it on sidebar from Widgets.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:200px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<!-- Facebook share button Start -->
<b:if cond='data:blog.pageType != "static_page"'>
<div style='float:left;padding:5px 5px 5px 0;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='https://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
</div>
</b:if>
<!-- Facebook share button End -->
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="5"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
 (function() {
 var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
 li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
 })();
</script>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<!-- AddThis Button END -->

This code includes Facebook Like, Facebook Share, Tweet and Google +1 buttons. You can add more social media buttons fromĀ Addthis Official page or click here for official page of Addthis.

2 thoughts on “How to Add Floating Social Media Buttons on Website or Blog

  1. SwahiliTutorials

    Hi Aashish, I really have liked the facebook JSLIKE button on the right, kindly tell me how I can have this for my website. Thank you in advance

    Reply
  2. Prakriti

    SwahiliTutorials Hi Swahili, I will be updating a tutorial using this. It’s a plugin LikeJS for WordPress.

    Cheers !

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.