Social Share Buttons

by infous

HTML

<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<div class="s">
    <div class="s-btn">
        <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <div class="s-btn">
        <div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true"></div>
    </div>
    <div class="s-btn">
        <!-- Place this tag where you want the +1 button to render. -->
        <div class="g-plusone" data-size="medium"></div>
        
        <!-- Place this tag after the last +1 button tag. -->
        <script type="text/javascript">
          (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>
    </div>
    <div class="s-btn">
        <script src="http://platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
</script>
<script type="IN/Share" data-counter="right"></script>
    </div>
</div>

<div class="sheet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores qui minus voluptatum accusamus harum neque sequi obcaecati deleniti nesciunt adipisci quae dolore veniam repellat consequuntur iusto vitae hic excepturi...

CSS

body {
    margin: 0;
    padding: 0;
    position: relative;
}

.s {
    background: #eee;
    background: transparent;
    bottom: 0;
    left: 0;
    padding: 20px;
    position: fixed;
    text-align: left;
    top: auto;
    -webkit-transition: top .3s ease;
    -moz-transition: top .3s ease;
    -o-transition: top .3s ease;
    -ms-transition: top .3s ease;
    transition: top .3s ease;
    visibility: visible;
}

.sheet {
    margin: 20px auto;
    width: 400px;
    
}