Add Floating Social Media Share Buttons Widget For Blogger – Version 2

Add Floating Social Share Buttons to Blogger

Releasing the second version of the floating social media buttons bar for blogger alongside the total shares count in addition to custom buttons.

This version is totally dissimilar from the previous version because this fourth dimension I did non usage the official buttons of social networks in addition to instead I used own custom social buttons.

Along alongside Total shares count box, every push shows the number of total shares on that detail social media platform.

Previous Version: Floating Social Media Buttons Bar For Blogger With Total Shares Count


Please Read This Note Carefully Given Below!

Important Update (Must Read) :- I am using FREE hosting provided past times OpenShift.com for hosting my PHP scripts which are liable to fetch the total shares count on dissimilar social media platforms.

So at that spot is monthly bandwidth boundary on gratuitous packages in addition to whenever it volition cross the boundary of gratuitous bandwidth, it volition halt working. I tin give notice non upgrade from gratuitous hosting parcel to premium because I earn zilch from this blog. That is all to it.
One to a greater extent than thing. Free parcel is plenty for 1 spider web log in addition to you lot tin give notice upload these PHP files yourself on their server but it plant on Git in addition to Ruby. You bring to install them on your estimator in addition to hence usage the ascendency trend to exercise your PHP application in addition to upload those files. Please for to a greater extent than information exercise your trouble organization human relationship on OpenShift.com in addition to larn from there.
If you lot request my services in addition to hence you lot tin give notice contact me using contact shape page. I’ll exercise a dissever domain cite for you lot in addition to upload these scripts hence they volition non halt working.

Update: 8/17/2016
Just updated the sharecount API URL in addition to it’ll move working straightaway for everyone.

Features alongside Demo Screenshot

I tried my best to give it the await of other leading gratuitous in addition to premium part buttons similar every bit SumoMe. I bring disabled it on mobile devices alongside CSS, but you lot tin give notice arrive look on mobile likewise only past times deleting the piddling CSS code.
However, this is non recommended because at that spot is actually piddling infinite on mobile screens in addition to users volition move non move able to read your content properly every bit buttons bar volition move roofing to a greater extent than or less 50px infinite on the left side of screen.

Of course, it includes a exhibit shroud push but it’s ever proficient to move on the prophylactic side rather than losing visitors.

But you lot tin give notice install the social part buttons below the ship titles I bring released earlier in addition to I usage on this spider web log itself.

I could bring made it mobile compatible similar every bit SumoMe too, but this is actually likewise much piece of job for a 1 human army. 😉 I wishing I had individual to do it, but yet I got no 1 lol.
Overall I am happy alongside it because it includes no forced push for branding, solely what nosotros need. All other major manufacture leading plugins similar SumoMe are actually bully in addition to packed alongside amazing features, but you lot bring to become alongside pro version otherwise at that spot volition ever move 1 push of their ain inward the halt for branding.
Note: You do NOT bring Permission to re-create in addition to part my code on your blog.
Demo Screeshot of Floating Social Share Buttons bar
Its Live demo is on this spider web log itself hence are you lot impressed? Want to usage it?

Adding Floating Social Share Buttons Bar to Blogger

Step 1) As always, login to your blogger account – Select your blog – become to Template surface area in addition to download your template backup first. You’ll detect a Backup/Restore link on the top correct side inward Template area.
Step 2) Now click on Edit HTML and hold back for your template code box to load.
Step 3) For icons, I bring used FontAwesome 4.2.0 hence precisely detect out opening <head> tag in addition to precisely afterwards it, paste the FontAwesome icons Link given below.

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

Please note that this is the latest version of FontAwesome icons CSS link in addition to you lot request to update if you lot are using former version because, inward former versions StumbleUpon paradigm is non included.

Add Google JavaScript Library Link also if non already added to your template.

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


Step 4) Click within the code box, press Ctrl+f or Cmd+f in addition to detect out this closing tag </head> then just earlier it glue the whole CSS code given below. 

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=’text/css’>
/*————————————————————
Floating Social Share Button Bar Version 2.0
Designed by:: omelto.com
Shares Count Code by:: http://donreach.com/social-share-count
issued nether GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
————————————————————*/
.twistBlogger_SocialBar {
  position: fixed;
  bottom: 30%;
  padding: 0;
  left:0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
  cursor: pointer;
  opacity:1;
}
.twistBlogger_SocialBar label {
  text-align: center;
  opacity: 0.4;
  width: 50px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  padding: 0px 0px;
  border-radius: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  line-height: 1.5em;
  margin-top: 346px;
}
input.ShowHide_Button:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
  border: 1px corporation #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
  max-width: 30px;
}
input.ShowHide_Button , .ShowHideMe {
  -webkit-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);
  -ms-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);
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked , .ShowHideMe {
  margin-left: -75px !important;
}
input.ShowHide_Button {
  display: none;
}
.twistBlogger_SocialBar .social_menu {
  display: inline-block;
  float: left;
  list-style:none;
  max-width:50px;
  margin: 0;
  padding: 0;
}
.twistBlogger_SocialBar .social_menu .button_facebook {
  background: #3a579a;
}
.twistBlogger_SocialBar .social_menu .button_facebook:hover {
  background: #314a83;
}
.twistBlogger_SocialBar .social_menu .button_twitter {
  background: #00abf0;
}
.twistBlogger_SocialBar .social_menu .button_twitter:hover {
  background: #0092cc;
}
.twistBlogger_SocialBar .social_menu .button_googleplus {
  background: #df4a32;
}
.twistBlogger_SocialBar .social_menu .button_googleplus:hover {
  background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu .button_pinterest {
  background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu .button_pinterest:hover {
  background: #ae181a;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon {
  background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon:hover {
  background: #c7401f;
}
.twistBlogger_SocialBar .social_menu .button_linkedin {
  background: #2554BF;
}
.twistBlogger_SocialBar .social_menu .button_linkedin:hover {
  background: #224EB4;
}
.twistBlogger_SocialBar .social_menu .button_facebook .count,
.twistBlogger_SocialBar .social_menu .button_twitter .count,
.twistBlogger_SocialBar .social_menu .button_googleplus .count,
.twistBlogger_SocialBar .social_menu .button_pinterest .count,
.twistBlogger_SocialBar .social_menu .button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu .button_linkedin .count {
  color: #fff!important;
  padding-top: 4px;
  font-size: 13px !important;
  line-height: 1.2em;
  font-family: sans-serif;
  font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.twistBlogger_SocialBar .social_menu .share {
  background: #FFF;
  color: #807F7F;
  font-size: 11px;
  height: 45px !important;
}
.twistBlogger_SocialBar .social_menu .share .count.h4 {
  font-size: 18px;
  font-family: sans-serif;
  color: #424242;
  height: 25px !important;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu .share .h6 {
  padding-bottom: 3px;
  font-family: sans-serif;
  margin: 0px !important;
  line-height: 1.5em;
  font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul > li {
  margin: 0px 0px 0px 0px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 0px;
  border: 0px;
  border-left: 0 corporation rgba( 0,0,0,.4);
  height: 50px;
  width: 50px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: none;
  box-sizing: content-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0px;
  cursor: pointer;
  text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover {
  border-left: 5px corporation rgba( 0,0,0,.3);
  width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul > li i {
  color: #fff !important;
  font-family: FontAwesome;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover i {
  opacity: 0.9;
}
@media solely cover in addition to (min-width:768px) in addition to (max-width:979px) {
.twistBlogger_SocialBar {
  bottom: 20% !important;
}
}
@media solely cover in addition to (min-width:480px) in addition to (max-width:767px) {
.twistBlogger_SocialBar {
  bottom: 15% !important;
}
}
 @media solely cover in addition to (max-width:479px) {
.twistBlogger_SocialBar {
  bottom: 10% !important;
  display: none !important; /*—delete this code trace to arrive look on mobile–*/
}
}
</style>
</b:if>

Editing: If you want to build look on mobile devices too, in addition to hence precisely delete this code trace display: none !important; in addition to you lot are done.
Step 5) Now you lot request to add together the HTML  and JavaScript API constituent hence detect out this code line <div class='post-footer-line post-footer-line-3'> in addition to precisely below that, glue the whole HTML code given below every bit it is.
Note: You volition detect the to a higher house code trace 2 times inward your template, but you lot bring to glue the HTML code in addition to JavaScript API of part counts precisely afterwards the 2nd appearance of this code line.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div class=’twistBlogger_SocialBar’>
  <input class=’ShowHide_Button’ id=’twiSter’ type=’checkbox’/>
  <label for=’twiSter’><i class=’fa fa-arrow-left’/></label>
  <div class=’ShowHideMe’>
  <div class=’social_menu’>
<div class=’share’>
    <div class=’share-btn’ data-service=’total’>
        <div class=’count h4’/>
        <div class=’h6′>SHARES</div>
  </div></div>
<ul>
<li class=’button_facebook’>
<a expr:href=’&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title’ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   render false;’ rel=’nofollow’><strong><i class=’fa fa-facebook’/>
<div class=’share-btn’ data-service=’facebook’>
        <div class=’count’/></div></strong>
</a>
</li>
<li class=’button_twitter’>
<a expr:href=’&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @TwistBlogger – &quot;’ onclick=’window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); render false;’ rel=’nofollow’><strong><i class=’fa fa-twitter’/>
<div class=’share-btn’ data-service=’twitter’>
        <div class=’count’/></div></strong>
</a>
</li>
<li class=’button_googleplus’>
<a expr:href=’&quot;   https://plus.google.com/share?url=&quot; + data:post.url’ onclick=’javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   render false;   ‘ rel=’nofollow’><strong><i class=’fa fa-google-plus’/>
<div class=’share-btn’ data-service=’google’>
        <div class=’count’/></div></strong>
</a>
</li>
<li class=’button_pinterest’>
<a data-pin-config=’beside’ expr:href=’&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title’ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   render false;’ rel=’nofollow’><strong><i class=’fa fa-pinterest’/>
<div class=’share-btn’ data-service=’pinterest’>
        <div class=’count’/></div></strong>
</a>
</li>
<li class=’button_stumbleupon’>
<a expr:href=’&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title’ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   render false;’ rel=’nofollow’><strong><i class=’fa fa-stumbleupon-circle’/>
<div class=’share-btn’ data-service=’stumbleupon’>
        <div class=’count’/></div></strong>
</a>
</li>
<li class=’button_linkedin’>
<a expr:href=’&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ‘ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   render false;’ rel=’nofollow’><strong><i class=’fa fa-linkedin’/>
<div class=’share-btn’ data-service=’linkedin’>
        <div class=’count’/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type=’text/javascript’>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $(“link[rel=canonical]”).attr(“href”);
    $.getJSON(‘https://count.donreach.com/?url=’ + encodeURIComponent(shareUrl) + “&callback=?”, role (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>
</b:if>
</b:if>

Editing: One affair you lot request to alter inward to a higher house HTML code is my Twitter Username TwistBlogger with your twitter username.

If you lot desire to take a push in addition to hence precisely delete the HTML of that push including <li> </li> addition you lot request to conform the margin of exhibit shroud push accordingly otherwise exhibit shroud push volition move 50px below the part buttons alongside every removal of 1 button. That agency you lot request to decrease the margin of exhibit shroud push past times 50px afterwards you lot take 1 social button.

Now relieve your template code in addition to view whatever ship on your spider web log to run into it live. If you lot constitute whatever põrnikas or you lot could non arrive piece of job for you, precisely exit your comment or contact me via the contact us page.
Do you lot bring whatever improvement suggestion? Your opinions are ever welcome. Stay Blessed!