Floating Vertical Social Media Sharing Icons: How to add them to a website

Just one of those simple guides you will like to know about: “How to Add Floating Stylish Vertical Social Media Sharing Icons to a Website” effortlessly without breaking a single line of code. This is just a JavaScript with external css so should work with blogger.com cms (blogspot), wordpress.org cms (wordpress) , joomla cms , Drupal, Adobe Dreamweaver Sites  and any other regular website platform.

This is definitely not new at all but I have already visited many websites with some that aren’t working properly at the same time giving out backlinks [ get this] to someone who just made a blog post on it. While it is not bad at all to give backlink to people who spend most of their valuable time creating awesome stuff for you, one has to do this only when it actually works as a way of appreciating the coder. Now all the code you will be getting in this short tutorial is just from their official code (sharethis & addthis) only the last one was crafted.

After placing the code you will be having something very similar to the pix below, I named them in this sequence 1,2,3 to help you make a choice between the three.

Just copy the code below add it to any widget area of your choice using either the blogger html box or wordpress text widget . Paste this code anywhere within the site closing </body>  tag for other website / cms platform users

Here is the code to copy

<script type="text/javascript">stLight.options({publisher: "ur-6826fcab-fc57-b912-2fb8-fe8bddac3793", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<script>
var options={ "publisher": "ur-6826fcab-fc57-b912-2fb8-fe8bddac3793", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "pinterest", "stumbleupon", "linkedin", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

This very vertical social media sharing bar requires you to add this little code snippet to the </head> section of your website for it to work properly.

Here is the code for the </head> section of your site

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Just repeat the steps above quoted here

copy the code below add it to any widget area of your choice using either the blogger html box or wordpress text widget . Paste this code anywhere within the site closing </body>  tag for other website / Cms platform users

for this very bar we only need a single javascript code .

here is the code to copy for this very Vertical Social media sharing tools:

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51f211bb293d2055"></script>

Code for the Third Floating Vertical Social Media Fan Pages Follow bar Icons with Feed Burner Subscription opt-in Form

Just repeat the preceding two steps already stated above quoted here

copy the code below add it to any widget area of your choice using either the blogger html box or wordpress text widget . Paste this code anywhere within the site closing </body> tag for other website / Cms platform users

Here is the code to copy

<style>
img,a {
border: 0;}
#on {
    visibility: visible;}
#off {
    visibility: hidden;}
#facebook_div {
    width: 196px;
    height: 340px;
    overflow: hidden;}
#twitter_div {
    width: 246px;
    height: 353px;
    overflow: hidden;}
#google_plus_div {
    width: 152px;
    height: 97px;
    overflow: hidden;
    margin-left: 50px;
    margin-top: 10px;}
#knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;}
#kakinetwork_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
}/* right side style */#facebook_right {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    right: -200px;}
#facebook_right img {
    position: absolute;
    top: -2px;
    left: -35px;}
#facebook_right iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    left: -2px;
    top: -3px;}
#twitter_right {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    right: -250px;}
#twitter_right_img {
    position: absolute;
    top: -2px;
    left: -35px;
    border: 0;}
#google_plus_right {
    z-index: 10003;
    background-color: #F2F2F2;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-right: 2px solid #0056a0;
    border-left: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    right: -154px;}
#google_plus_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;}
#feedburner_right {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-right: 2px solid #5b5b5b;
    border-left: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    right: -303px;}
#feedburner_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;}
#kakinetwork_right {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;}
#kakinetwork_right img {
    position: absolute;
    top: -2px;
    left: -101px;
}/* left side style */#facebook_left {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    left: -200px;}
#facebook_left img {
    position: absolute;
    top: -2px;
    right: -35px;}
#facebook_left iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    right: -2px;
    top: -3px;}
#twitter_left {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    left: -250px;}
#twitter_left_img {
    position: absolute;
    top: -2px;
    right: -35px;
    border: 0;}
#google_plus_left {
    z-index: 10003;
    background-color: #006ec9;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-left: 2px solid #0056a0;
    border-right: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    left: -154px;}
#google_plus_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;}
#feedburner_left {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-left: 2px solid #5b5b5b;
    border-right: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    left: -303px;}
#feedburner_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;}
#kakinetwork_left {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;}
#kakinetwork_left img {
    position: absolute;
    top: -2px;
    right: -101px;}
.box-title1 {
    border: 1px solid #ddd;
/*border-radius*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
/*box-shadow*/
    -webkit-box-shadow: 5px 5px 5px #CCCCCC;
    -moz-box-shadow: 5px 5px 5px #CCCCCC;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    margin: 10px 0;}
.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
/*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;}
.submitbutton {
    background: #F2F2F2;
    border: 1px solid #F66303;
/*box-shadow*/
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    font: bold 12px Arial, sans-serif;
    color: #000000;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
/*border-radius*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>
<div id="on">
 <div id="facebook_right" style="top: 18%;">
  <div id="facebook_div">
   <img src="http://2.bp.blogspot.com/-AwJK988Hw9U/T_CUbBXoLmI/AAAAAAAABuM/XIwgqyH0zLw/s1600/facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2Fobasimvilla&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
   </iframe>
  </div>
 </div>
</div>
<div id="on">
 <div id="twitter_right" style="top: 35%;">
  <div id="twitter_div">
   <img id="twitter_right_img" src="http://2.bp.blogspot.com/-ggLNgeprfJo/T_CUf8BMk8I/AAAAAAAABuk/f38udn9GKo4/s1600/twitter-icon.png"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('obasimvilla').start();</script>
  </div>
 </div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 52%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="http://1.bp.blogspot.com/-zwfLV74trKg/T_CUcBJIkVI/AAAAAAAABuU/LVVwVCRESpI/s1600/google-plus-icon.png"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
  </div>
 </div>
 <div id="on">
  <div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=obasimvilla', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/>
<input value="obasimvilla" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><img id="feedburner_right_img" src="http://3.bp.blogspot.com/-Kw-Vbf9fQ9U/T_CUdFKZUQI/AAAAAAAABuc/5FhLcDmWmuA/s1600/subscribe-icon.png"/>
   </div>
  </div>
 </div>
</div>

This floating vertical social Networks fan pages follow tools requires a little personalization from you

Do the following :

After copying this code find or search for all values containing “Obasimvilla” and replace it with your official facebook fan page, twitter fan page

and feedburner form uri respectively .

Concluding Lines :

You have seen how easy it is adding this  Floating Stylish Vertical Social Sharing Icons to a Website irrespective of the platform or cms. It is now left for you to choose the one you are very much comfortable with out of the three already listed. You will also notice that with any of these three codes you are not giving away any cheap backlink  that most persons do add to them in form of ( get this) with [get this] linking to their own tutorial page.

Also see:

and

Do you find this little tutorial useful? drop a valuable comment or share it with your friends , remember to always link directly to us instead of copying our articles.