How to add floating share box using HTML and css3

How to add floating share box using HTML and css3

Adding a floating share box to your blog is the best way to bring more traffic to your blog or posts . Visitors always find an easier way to share the post if they find any interesting point on your post and like to share them in their social profile. Using the floating share box we can easily provide them a nice way to share the post.

You can see that, now-a-days most of the traffic come from Social Sites. Floating share box (social bookmarking) widget by the right or left of every page is just one of the wonderful widgets, you must add to your blog if you gather more free traffic from Facebook, Twitter, Google + and other Social Sites.

You must have seen in many WordPress blogs are using floating share box. Now it’s time for any blogging site to add a floating share box widget. In this tutorial I’m going to share a very simple but effective snippets about how to create a nice floating share box. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with your post. Let’s go-

Demo

Download

– Create Share Box Body Content:

 

<div id="pageshare" title="Share This With Your Friends"> 
    <div class="sbutton" id="gb">
        <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
        <fb:like class="fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered" layout="box_count" show_faces="false" font=""><span style="height: 0px; width: 0px;"><iframe src="http://www.facebook.com/plugins/like.php?api_key=&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df2348ac4eb6531c%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%252Ffcf4c558d74c62%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&href=http%3A%2F%2Flocalhost%2Fca%2Fcpanel%2Fpreview_tutorial%2F260.html&layout=box_count&locale=en_US&node_type=link&sdk=joey&show_faces=false&width=55" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 0px; width: 0px;" name="f2068b1c64ca004" id="ff32d05ad84be2" scrolling="no"></iframe></span></fb:like>
    </div> 
    <div class="sbutton" id="rt">
        <iframe style="width: 56px; height: 62px;" data-twttr-rendered="true" title="Twitter Tweet Button" class="twitter-share-button twitter-tweet-button twitter-count-vertical" src="http://platform.twitter.com/widgets/tweet_button.1381275758.html#_=1381690800052&count=vertical&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Flocalhost%2Fca%2Fcpanel%2Fpreview_tutorial%2F260.html&size=m&text=Tutorial%20Preview&url=http%3A%2F%2Flocalhost%2Fca%2Fcpanel%2Fpreview_tutorial%2F260.html" allowtransparency="true" id="twitter-widget-0" frameborder="0" scrolling="no"></iframe>
        <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div> 
    <div class="sbutton" id="gplusone">
        <script gapi_processed="true" type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;"><iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&bsv=o&size=tall&hl=en-US&origin=http%3A%2F%2Flocalhost&url=http%3A%2F%2Flocalhost%2Fca%2Fcpanel%2Fpreview_tutorial%2F260.html&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.rH61Rx8ffI0.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTN6m7GNFgp1JmU00eC9SBpsNGIq5w#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1381690800072&parent=http%3A%2F%2Flocalhost&pfname=&rpctoken=13215659" name="I0_1381690800072" id="I0_1381690800072" vspace="0" tabindex="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" width="100%"></iframe></div>
    </div> 
    <div class="sbutton" id="su">
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><su:badge layout="5"></su:badge> <script type="text/javascript">   (function() {     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);   })(); </script>
    </div> 
    <div class="sbutton" id="digg" style="margin-left:3px;width:48px">
        <script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>
        <span class="db-wrapper db-clear db-medium"><span><span class="db-container db-submit"><span class="db-body db-medium"><span class="db-count"></span><span class="db-copy"></span><a class="db-anchor">digg</a></span></span></span></span>
    </div> 
    <div class="sbutton" id="fb">
        <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </div>    
</div>

 

– CSS3 For Share Box:

#pageshare {
    position:fixed; 
    bottom:15%; 
    left:10px; 
    float:left; 
    border: 1px solid black; 
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#eff3fa;
    padding:0 0 2px 0;
    z-index:10;
} 
#pageshare .sbutton {
    float:left;
    clear:both;
    margin:5px 5px 0 5px;
} 
.fb_share_count_top {
    width:48px !important;} 
.fb_share_count_top, .fb_share_count_inner {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
} 
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
    width:49px !important; 
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
} 
.FBConnectButton_Small .FBConnectButton_Text {
    padding:2px 2px 3px !important;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;font-size:8px;
} 

div#page-content{
    height: 900px;
    width: 800px; margin: 0 auto;
}

– Add A Simple jQuery Script:

Sometimes user screen size may not enough big for showing share box widget. That means, It may be overlap with your post. To remove this bug we can use a simple jQuery snippet. If use screen size big more than 1110px ,than we only show floating share box, other wise we hide share box.

if( $(window).width() >= 1180 )
    $('#pageshare').show();

// Update when user resizes browser.
    $(window).resize(function() {
        if( $(window).width() < 1150 ) {
            $('#pageshare').hide();
    } else {
            $('#pageshare').show();
    }
});

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Tags:  

Share It

Related Posts