Latest Floating Social Sharing Bar Widget For Blogger

Hi Friends lets play new things mango with tomato oh just kidding friends. Today i share with you a latest fit floating social sharing horizontal bar widget for Blogger. This widget is horizontal social sharing bar widget with counter and is displayed in above the post body. while you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with Twitter, Facebook, Google plus, Pinterest, StumbleUpon and Digg buttons.

Start Step by step

    Login to  Blogger Dashboard > Choose your Blog
    Select the Template > Click on Edit HTML > Proceed
    Check/Tick the Expand Template Widgets check-box now not available

Now just follow 3 Simple steps,

The jQuery Plugin!

This is always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.

Add the below snippet code before </head> tag . If you have already then leave

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2
/jquery.js"></script>

The Social Scripts

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages.

Add the below snippet code before </head> tag


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-
bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0
 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<divid="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial")
:a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});/*]]>*/
</script>
<script type="text/javascript" src="http://makemoneyfreewithus.blogspot.com.js"></script><script type="text/javascript">
/*<![CDATA[*/
    // Twitter    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c
)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNo de.insertBefore(a,d)}})(document,"script","twitter-wjs");    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.a
sync=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByT
agName("script")[0];b.parentNode.insertBefore(a,b)})();    // Stumbleupon
    (function(){var a=document.createElement("script");a.type="text/javascript";a
.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getE
lementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();    // Digg

    (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTag
Name("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com
/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/
</script>
</b:if>

Adding Social Buttons Widget

Let’s add the final Social horizontal bar widget code.

Add this code before <data:post.body/> tag.

 <b:if cond='data:blog.pageType == &quot;item&quot;'><div id="w2bSocialFloat" class="w2bSocialFloat"><table  width="100%" class="w2bSocialFloat">

    <tr>        <td>            <a href="https://twitter.com/share" class="twitter-share-button"

expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>        </td>

        <td>            <iframe expr:src="&quot;//www.facebook.com/plugins/ like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>        </td>

        <td>            <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style=

"display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPi

nitButton">                <data:post.body/>                <script type="text/javascript">                    w2bPinItButton({

                        url:"<data:post.url/>",                        thumb: "<data:post.thumbnailUrl/>",

                        id: "<data:post.id/>",                        defaultThumb: "http://4.bp.blogspot.com/

-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",

                        pincount: "horizontal"                    });

                </script>            </div>        </td>        <td>

            <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>

        </td>        <td>            <su:badge layout="1" expr:location="data:post.url"></su:badge>

        </td>        <td>            <a class="DiggThisButton DiggCompact"></a>

        </td>    </tr></table></div></b:if>

Now Save Template!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.

New Changes

1. I found the tag Three times?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,

Solution:

Search for below two lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Place the Widget code in between the two tags.

2. How to change the background color of Horizontal bar?

You can change the background color of Horizontal bar.

Solution:
In the Second step (The Social Scripts), search for

background:#FFFFFF;

and change the #FFFFFF with your own Hex Color.