Floating Social Media Buttons Bar for Blogger with Total Shares Count and Show Hide Button

SHARE
Floating Social Media Buttons bar for Blogger
Last time I had shared Social media share buttons bar to add below post titles for blogger and right now I am sharing floating social media share buttons bar with cool total shares count box, flip animation effect  and a tiny show hide button in bottom of it.

Social media platforms play a vital role in the success of our content to go viral and generate massive traffic in very short span of time than to start getting organic traffic from search engines because they take time and you need to generate some quality backlinks to hold rankings on first page and outrank your competitors.

So there is no reason for not to use friendly social media share buttons on our blogs.

You can see the hell lot of plugins like this available for WordPress on Codecanyon.net selling like crazy which inspired me to make one for blogger and that is for free. :)

It took me almost 4 days to design my floating social media share buttons bar with a bunch of powerful features and cool animation effects with CSS3.


Important Note: Respect copyrights. You do Not have Permission to copy and share my code on your blog. There is no credit backlink included, just what you need, but you can Not Remove the Comments added to CSS code, keep them intact. You can use it on any number of your blogs or websites for both, personal & commercial.
Total Share Count Box Credit: donReach.com code issued under GNU General Public License.
Icons credit: FontAwesome 4.0.3

Quick Note:-
*New Version Available: Add Floating Social Media Share Buttons Widget For Blogger With Custom Buttons and Shares Count Option.

Features of Floating Social Media Share Buttons Bar

It is full of powerful features and you need to know them to understand how it works so I have made a little Infographic, see below.

Demo of Floating Social Media Buttons bar for Blogger

1) Total Shares Count Box: It counts all the shares of URL on different social media platforms and shows them in the total count box.

2) FontAwesome Icons: I have used font Awesome icons on button overlay with cool CSS effects.

3) Flip Animation effect: On mouse hover, button's overlay flips to the right side and the hovered social media button becomes visible.

4) Show Hide Button: There is little "hide button" in the bottom of social media bar which allows users to hide the social media buttons on click and then "Show button" becomes visible.

5) Less JavaScript More HTML and CSS3: I have tried by best and used HTML and CSS3 to make the most of its design. Show hide button is purely made with HTML and CSS3.

So did it impress you? Let's move on to installation.

Update 1:-
Problem: Total Shares API uses cache and they are cleared after 24 hrs so total shares count box may take maximum up to 24 hrs to update total shares.

Solution: You can download the PHP scripts from the Github project page (links are given above in credits) and upload them on a Free hosting service like as OpenShift and change cache time inside configuration.php file in seconds to minimum time you want to request update of total shares (correct me if I am wrong).

I don't know how to make it work and you can find the information on the respected website or at Github project.

Update 2:-
I found the solution: Now there is no problem of not updating the total shares count live because I have downloaded these scripts and uploaded them to my OpenShift account. I did not use any cache file so your total count of shares will fetch live counts from all major social media platforms.

Although the task was really daunting for me to upload these scripts as OpenShift does not allow to upload anything to our applications directly from their server. Instead, they allow it offline from two software programs called Git and Ruby. These both software work from the command prompt and then connect to your  OpenShift account.

Ultimately I made it and now I learned to use Git and Ruby too. :)

Add Floating Social Media Share Buttons Bar to Blogger

Adding it to your blogger blog is super easy and will not take much of your time so follow some boring steps and get your stylish floating social media buttons bar ready.

Step 1) Login to your Blogger account - Select your blog - go to Template section - click on Edit HTML - now click anywhere inside your template code box - press Ctrl+a and save a backup of your template code first.

You can also download your template code backup in .xml format by going to Template - click on Top Right Side link Backup/Restore and download it from there.

Step 2) Add Font Awesome icons to your blogger blog - Find this opening tag <head> and paste the font awesome icons CSS link just below this opening tag.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Add Google JavaScript Library link too if not already added.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 3) Now add the CSS code - Find out ]]></b:skin> this code line and paste the whole CSS code just before it as it is.

/*----------------------------------------------------------------------------
Floating Social Media Share Buttons bar With Total Share Count
 and Show Hide Button
Designed by:: http://www.twistblogger.com
Shares Count Code by:: http://donreach.com/social-share-count
 issued under GNU GPL Licence
Icons:: FontAwesome 4.0.3
************** Do Not Remove These Credits *************
-----------------------------------------------------------------------------*/
.twistMe {
  position: fixed;
  bottom: 25%;
  padding: 0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.twistMe label:hover {
  cursor: pointer;
}
.twistMe label {
  text-align: center;
  width: 62px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  display: block;
  font-size: 12px;
  padding: 1px 0px;
  border-radius: 0;
  transition: all .4s ease-in-out;
  position: absolute;
  margin-top: 305px;
}
input.ShowHideButton:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  border: 1px solid #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
}
input.ShowHideButton ~ .ShowHideMe {
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHideButton:checked ~ .ShowHideMe {
  margin-left: -75px;
}
input.ShowHideButton {
display: none;
}
.twistBlogger-Floating-SocialBar {
  display: inline-block;
  margin: 0px;
  float: left;
  background: #DFDFDF;
  padding: 0;
  z-index: 9999!important;
  border-radius: 1px;
}
.twistBlogger-Floating-SocialBar > ul {
  padding: 0;
  margin:0;
}
.twistBlogger-Floating-SocialBar > ul > li {
  margin: 0px 0px 1px -1px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 5px 0px 0px 0px;
  height: 70px;
  width: 63px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: #000000;
}
.twistBlogger-Floating-SocialBar .tab-overlay .fa {
  font-size: 25px;
  text-align: center;
  text-shadow: 0px 0px 20px #FFFFFF;
  color: #FFFFFF;
  padding: 9px 9px;
  line-height: 1.7em;
}
.twistBlogger-Floating-SocialBar .tab-warp {
  perspective: 500px;
  perspective-origin: 0% 50%;
  -webkit-perspective: 500px;
  -webkit-perspective-origin: 0% 50%;
  -moz-perspective: 500px;
  -moz-perspective-origin: 0% 50%;
}
.twistBlogger-Floating-SocialBar .facebook-button-tab .tab-overlay {
  background: #4965B4;
}
.twistBlogger-Floating-SocialBar .googleplus-button-tab .tab-overlay {
  background: #E06352;
}
.twistBlogger-Floating-SocialBar .tweeter-button-tab .tab-overlay {
  background: #00A8E8;
}
.twistBlogger-Floating-SocialBar .linkedin-button-tab .tab-overlay {
  background: #0077B5;
}
.twistBlogger-Floating-SocialBar .tab-overlay {
  margin-top: -5px !important;
  height: 70px;
  width: 63px;
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 99999;
}
.twistBlogger-Floating-SocialBar .tab-wrap {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.twistBlogger-Floating-SocialBar .tab-flip .tab-overlay {
  display: block;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.twistBlogger-Floating-SocialBar .tab-flip:hover .tab-overlay {
  display: block!important;
  width: 0px;
  opacity: 0.5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transform: translateX(-5px) rotateY(-95deg);
  -webkit-transform: translateX(-5px) rotateY(-95deg);
  -moz-transform: translateX(5px) rotateY(-95deg);
  transform-origin: 0% 100%;
}
.twistBlogger-Floating-SocialBar .count {
  padding-top: 4px;
  height: 25px;
  position: absolute;
  background: #3A3939!important;
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  bottom: 100%;
  font-family: sans-serif;
  font-weight: bold;
  left: 0;
  right: 0;
  font-size: 15px;
  z-index: 1!important;
}
.twistBlogger-Floating-SocialBar .count.h4:after {
  content: "\f064";
  top: 5px;
  border-radius: 50px;
  font-family: fontawesome;
  font-size: 15px;
  left: 4px;
  position: absolute;
  width: 0;
  height: 0;
}
.twistBlogger-Floating-SocialBar .share-btn {
  margin: 0px 0px 1px 0;
  background: #3A3939;
  position: relative;
  text-align: center;
  font-family: cursive;
  font-weight: bold;
  font-size: 13px;
  padding: 0px 0px 1px 0px;
  border: 0;
  color: #FFFFFF;
}

Step 4) Add HTML code - Find out this closing </body> tag and just before this tag, paste the whole HTML and JavaScript codes given below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='twistMe'>
  <input class='ShowHideButton' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-backward'/></label>
  <div class='ShowHideMe'>
<div class='twistBlogger-Floating-SocialBar'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
    </div>
    </div>
<ul>
<li>
<div class='facebook-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-facebook'/>
</div>
</div>
<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false'/>
</div>
</li>
<li>
<div class='googleplus-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-google-plus'/>
</div>
</div>
<div class='g-plusone' data-size='tall'/>
</div>
</li>
<li>
<div class='tweeter-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-twitter'/>
</div>
</div>
<a class='twitter-share-button' data-count='vertical' data-via='TwistBlogger' href='https://twitter.com/share'>Tweet</a>
</div>
</li>
<li>
<div class='linkedin-button-tab tab-flip'>
<div class='tab-wrap'>
<div class='tab-overlay'>
<i class='fa fa-linkedin'/>
</div>
</div>
<script data-counter='top' type='IN/Share'/>
</div>
</li>
</ul>
  </div>
  </div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = document.location.href.toLowerCase();
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>
<script type='text/javascript'>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));
</script>
<div id="fb-root"></div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
</b:if>
</b:if>

Editing: You need to edit the above code where you have to replace the highlighted text TwistBlogger with your Twitter USERNAME. It will be added to your tweets whenever someone do share your web page URL on tweeter. This way you will get the notifications about who shared them.

Step 5) Remaining step is to SAVE your template code and you're done. Visit any of your blog post and see the floating social media share buttons bar hanging to the left side of your blog.

Was it a smooth installation? Did it work for you? Please report if you found any bug or you could not make it possible to work for you.

I need your favor, please do share at least on one social media platform you love and spread the word about it. :)

I'll do my best to assist you as soon as you ask for any help. Stay blessed!

Update:- New Version Available
Add Floating Social Media Share Buttons to Blogger Posts Version 2
Author

Article By: Satbir Patial

I manage this blog and post tutorials related to Blogger, SEO, Plugins, Widgets, Software Tools, CSS/HTML and Social Media. Did you find this blog helpful? Would You Please Socialize? Thanks for Your Support Buddy :)


Stay connected, You'll not be disappointed!

11 Replies so far - Join Conversation

  1. Hi Satbir,

    This is truly magical! I have been using third party services for the total share counts and it now seems like Blogger got its epic share buttons.

    I just had one doubt, do the total share count gets updated a bit later or there are some issues at my end. It shows only on shares but I have myself liked, tweeted and plussed it so the count must increase?

    I am totally in love with the animation when we hover the buttons. And the show/hide flip too is awesome.

    Well done Satbir. I am sure it will help many bloggers using the Blogger platform. You are going great!

    - Rohan.

    ReplyDelete
    Replies
    1. This is the problem I am facing right now. Total count box is not showing total counts for this post but it is working fine on other older posts. Looking for a solution.

      Thanks for taking time to leave your comment Rohan.

      Delete
  2. It worked perfectly fine, thanks bro

    ReplyDelete
    Replies
    1. Akuneme Christopher - Thanks a lot for your feedback.
      Please note that Total Share count box will update latest shares once in 24 hrs only because these are the settings by donReach.com API I have used in this widget.
      Thanks again for taking time to leave your feedback.

      Delete
    2. Just as a reminder: I have updated the code and now there is no problem of not updating the total number of shares as soon as you someone shares your post.

      Previously I had used the official API link which uses Cache file and remains active for 24 hours so it took 24 hours time for next update of total number of shares.

      But now I have downloaded these scripts and uploaded to my OpenShift account. I have removed their official API link and now I am using my own API link where I have not used any cache file.

      All credit goes to Adam of donReach.com who Provided these scripts on Github and recommended me to upload on OpenShift.

      -Satbir-

      Delete
  3. Hi Satbir,

    Thank you so much for the update. I am so glad you came up with this. Will let my friends know about it. :)

    - Rohan Chaubey.

    ReplyDelete
    Replies
    1. Rohan:: You're welcome buddy :)

      Soon I'll come up with an ultimate floating buttons bar with the total shares count that will look like as SummoMe.

      Thanks a lot for taking the time to leave your comment and making my blog active. :)

      Delete
  4. It is working without any bad effect on Page speed.
    Thanks

    ReplyDelete
  5. Vivek Bisht :: Hello Buddy,
    Please it is highly recommended to use the second version of these buttons which is already published and you can find the link in the end of the article.

    Second version is lightweight and made with pure HTML and CSS3. Plus it is more professional looking as you can see on this blog itself (hanging left side).

    Regards!

    ReplyDelete
  6. Waiting sharecount.twistblogger.com ???

    ReplyDelete
    Replies
    1. Unknown :: I am using FREE hosting provided by OpenShift RED HAT Project and I guess now so many users started using my codes.

      So it may have crossed the monthly Package limit.

      Delete