Create Floating Bar For Pinterest & Other Sharing Buttons

Which Social Networking Buttons To Use?

Your first priority should always be Facebook, Google+, Twitter, Linkedin and Now Pinterest. All these sharing counters play well in circulating your content over a wide range of visitors. Social Media is a non-stoppable engine, which if driven correctly and carefully can bring tons of valuable traffic each visitor worth a dollar. Since displaying too many count boxes could surely effect your blog load time therefore we have added a AddThis share button which provides visitors with over 330+ social sharing options all at one place.

Why not use JQuery?

Ignore JavaScript and its library which is Jquery as much as possible. Browsers like Internet Explorer still lacks support to all functionalities offered by jquery. Moreover JavaScript is responsible for a great percentage of your overall blog load time. We therefore did not add a smooth sliding effect to this plugin as we previously did to Jquery Sliding share widget

To learn more about blog load time optimization Please read: 

• Make your blog load faster                       Note: I still need to complete this series

How it works?

We have integrated both Addthis and ShareThis service in it. In order to customize the twitter button and others we took the Sharethis default code and customize it to change the button image, bubble size and count text. The widget that we initially developed looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below: 

You can observe that both Twitter, Google Plus, Pinterest and Stumbleupon are displayed with custom shapes, same sizes and different count colors. I spent a lot of time trying to make all buttons of the same size by using a common image linked by a sprite but the only problem with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis. If you add this sharing bar to your blog, you will see zero on all counters unless someone clicks them and circulates your content.

To correct this issue I had to unfortunately dropped the idea of sharing the above designed version and share this tutorial widget instead. However the widget on our blog still contains the twitter button which wont display official count but that of ShareThis. If you would like to replace it with the official big size twitter count box then you can surely do this by customizing the code shared below.

Adding Floating Bar To Blogger

The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps: 

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Click Expand Widget Templates
6. Search for   <b:includable id='post' var='post'>  

      7. Just below it paste the following code: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EWuOgdVfEjYAF22T4FWdFeW1ZqCVD6taaHDmapBCTOYFJTSLIt-rnjxQ-IEzls_fMZSuwcgMUXluyuW4wGn1uTGwb_xJWspt9dzE_ETor2Nka7deIEOkGu-46_vqFJqg5_50q7vDjcjc/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EWuOgdVfEjYAF22T4FWdFeW1ZqCVD6taaHDmapBCTOYFJTSLIt-rnjxQ-IEzls_fMZSuwcgMUXluyuW4wGn1uTGwb_xJWspt9dzE_ETor2Nka7deIEOkGu-46_vqFJqg5_50q7vDjcjc/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsA3PbZ7LhTyQRNVITsL313OAjX5VaZYhtzPHItd1ecsV17CmkKrqJapekrq95IE-4IiSU7zvxtfFmMbP-r8Mz6cXgV839dLVoWT8LWWkClXxCDCWVfzI3pEIdUWW_QthuUJjYlJjzoGI/s400/bubble_arrow_pinterest.png') !important;
}


.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='jittuGames'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://jittugames.blogspot.in/2015/08/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
        Just replace JittuGames  with your twitter username. 

   8.  Save your template and you are all done! 

Optional step:

If in case the facebook like button did not work then add this Javascript SDK code just below <body>

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

 This floating bar would display on post pages only and wont display on homepage. The widget has a white background and floats to the left of blog posts. If incase you want it to float to right then all you need is to edit the part of the code bolded in black. You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves and your loved ones. Peace and blessings pals! :)

Share This:

Tags:

BlogTutorial TECH

• Prevoius
• Next