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

SHARE
Add Floating Social Share Buttons to Blogger
Releasing the second version of the floating social media buttons bar for blogger with the total shares count and custom buttons.

This version is totally different from the previous version because this time I did not use the official buttons of social networks and instead I used own custom social buttons.

Along with Total shares count box, every button shows the number of total shares on that particular 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 by OpenShift.com for hosting my PHP scripts which are liable to fetch the total shares count on different social media platforms.

So there is monthly bandwidth limit on free packages and whenever it will cross the limit of free bandwidth, it will stop working. I can not upgrade from free hosting package to premium because I earn nothing from this blog. That is all to it.

One more thing. Free package is enough for one blog and you can upload these PHP files yourself on their server but it works on Git and Ruby. You have to install them on your computer then use the command mode to create your PHP application and upload those files. Please for more info create your account on OpenShift.com and learn from there.

If you need my services then you can contact me using contact form page. I'll create a separate domain name for you and upload these scripts so they will not stop working.

Update: 8/17/2016
Just updated the sharecount API URL and it'll be working now for everyone.

Features with Demo Screenshot

I tried my best to give it the look of other leading free and premium share buttons like as SumoMe. I have disabled it on mobile devices with CSS, but you can make it appear on mobile too simply by deleting the little CSS code.


However, this is not recommended because there is really little space on mobile screens and users will be not be able to read your content properly as buttons bar will be covering around 50px space on the left side of screen.

Of course, it includes a show hide button but it's always good to be on the safe side rather than losing visitors.

But you can install the social share buttons below the post titles I have released before and I use on this blog itself.

I could have made it mobile compatible like as SumoMe too, but this is really too much work for a one man army. ;) I wish I had someone to do it, but still I got no one lol.

Overall I am happy with it because it includes no forced button for branding, only what we need. All other major industry leading plugins like SumoMe are really great and packed with amazing features, but you have to go with pro version otherwise there will always be one button of their own in the end for branding.

Note: You do NOT have Permission to copy and share my code on your blog.

Demo Screeshot of Floating Social Share Buttons bar
Its Live demo is on this blog itself so are you impressed? Want to use it?

Adding Floating Social Share Buttons Bar to Blogger

Step 1) As always, login to your blogger account - Select your blog - go to Template area and download your template backup first. You'll find a Backup/Restore link on the top right side in Template area.

Step 2) Now click on Edit HTML and wait for your template code box to load.

Step 3) For icons, I have used FontAwesome 4.2.0 so just find out opening <head> tag and just after 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 and you need to update if you are using old version because, in old versions StumbleUpon icon is not included.

Add Google JavaScript Library Link also if not 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 inside the code box, press Ctrl+f or Cmd+f and find out this closing tag </head> then just before it paste 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:: http://www.twistblogger.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under 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 solid #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 solid 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 solid 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 only screen and (min-width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
  bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
  bottom: 15% !important;
}
}
 @media only screen and (max-width:479px) {
.twistBlogger_SocialBar {
  bottom: 10% !important;
  display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
</style>
</b:if>

Editing: If you want to make appear on mobile devices too, then just delete this code line display: none !important; and you are done.

Step 5) Now you need to add the HTML  and JavaScript API part so find out this code line <div class='post-footer-line post-footer-line-3'> and just below that, paste the whole HTML code given below as it is.

Note: You will find the above code line two times in your template, but you have to paste the HTML code and JavaScript API of share counts just after 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;   );   return 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; ); return 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;   );   return 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;   );   return 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;   );   return 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;   );   return 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=?", 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>
</b:if>
</b:if>

Editing: One thing you need to change in above HTML code is my Twitter Username TwistBlogger with your twitter username.

If you want to remove a button then just delete the HTML of that button including <li> </li> plus you need to adjust the margin of show hide button accordingly otherwise show hide button will be 50px below the share buttons with every removal of one button. That means you need to decrease the margin of show hide button by 50px after you remove one social button.

Now save your template code and visit any post on your blog to see it live. If you found any bug or you could not make it work for you, just leave your comment or contact me via the contact us page.

Do you have any improvement suggestion? Your opinions are always welcome. Stay Blessed!
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!

131 Replies so far - Join Conversation

  1. Thanks for sharing....

    I removed the stumbleupon and linkedin share buttons, i don't know how to reduce the margin of the show hide button. How do i go about it?

    ReplyDelete
    Replies
    1. Akuneme Christopher:: You're welcome buddy!

      Back to your question- Just find out this class .twistBlogger_SocialBar label { in CSS code and in the bottom of it, you'll find margin: 346px; So just decrease it to 246px and save it.
      Please Let me know whether you sorted it out or not :)

      Delete
    2. Thanks buddy, it worked like magic, you can check it working perfectly fine at my blog http://www.lagschools.com/2015/02/pictures-from-yabatech-aro-day.html

      Delete
    3. Akuneme:: I just checked it, Its working perfectly fine and I am happy for you :-)
      Your blog design is really cool!

      Delete
    4. I have religiously followed instructions but it didnt work on my blog. it did not appear

      Delete
    5. It didn't work on mine either.

      Delete
    6. It didn't work for me

      Delete
  2. These are really awesome. And working perfectly. This was great! I love it! I'm gonna try changing the color to match my blog theme. Thanks so much for taking the time to share so many helpful hints with the world, it means a lot!! <3
    Thanks
    Max Bargas

    ReplyDelete
  3. Hi Satbir,

    OMG these look like the wordpress share buttons. How amazing is that! Definitely sharing the post and keep up the great work. :)

    ~ Rohan.

    ReplyDelete
    Replies
    1. Rohan:: Thanks for the taking time to leave your comment..!!

      Delete
  4. Thanks for sharing this tricks, These day I am using plugin for this function but this is increase my website loading speed, Now I can decrease my website loading speed by help of remove that plugin.

    Regards
    John Crook

    ReplyDelete
  5. How to add a whatsapp button next to share buttons above?

    ReplyDelete
    Replies
    1. Ronny :: Hi,
      You can add the Whatsapp button like as any other button (if you can play with HTML and CSS) but I will add update it as soon as I get time and include the WhatsApp button too.

      Do search about "how to add a WhatsApp share button" on StackOverflow and you'll definitely get the code for it. Then add it simply like as I have added other buttons after styling it with CSS. :)

      Delete
  6. unfortuantely i added the the code without removing the old version one :/
    i need the codes of the old version to remove,please

    ReplyDelete
    Replies
    1. Chief:: Hi,
      Old version needs to be removed so please visit the article of old version here
      Then remove the codes. Let me know if you're unable to do it yourself. I'll help you.

      Delete
    2. It's okay about the codes i managed to delete them
      But the new version doesn't look good on my blog
      Check this image .. That's how it looks
      http://i.imgur.com/AKhcGGH.jpg

      Delete
    3. Chief :: Thanks for letting me know, Please share your blog URL so that I can check them live in my browser and by inspecting the elements, I can see what is not in alignment. I'll definitely get them displaying same as on my blog.
      If you don't want to share your blog address publicly then you can send me an email from contact us page.

      Reply awaited ~

      Delete
    4. Here's the blog URL : http://cortanafans.blogspot.com/
      and by the way, i need a little help too in the template... i sent a message on facebook page but seems idle so if there's a way to contact directly with you it would be better
      and Thanks for your support

      Delete
  7. Chief :: Hi,
    Thanks to you buddy for letting me know that it is not in alignment on your template. I have used headings (H4 and H6) and I had to reset the CSS for them. Just because of that, your template's default settings of these headings were applied (Margin of 10px on top and bottom)

    Now I have updated the codes and checked it twice. Should work perfectly fine.

    Please just update the CSS part again and let me know whether it is solved or not. I am sorry for trouble.

    I am not that much active on FB these days but soon I'll. You can send me an email for further queries using the contact us form. Link is on the top nav bar .

    ReplyDelete
    Replies
    1. Works perfectly except just one thing.. When i hide the bar, the arrow disappears too
      Only a too tiny part is visible and i can barely click on it to show the bar again
      i tried it here on this blog and mine many times, but you can see the difference
      But except that everything is fine .. awesome job (y)

      Delete
    2. Chief:: hi,
      My bad, I did not check everything in one go last night because I was sleepy. :)
      I saw it today and this time I checked every single thing.
      Default settings of your template were creating these issues for you but they are all overridden.
      Now the button should work as per your expectation.

      Delete
    3. Simply perfect
      Thanks so much for this ^_^

      Delete
    4. Error parsing XML line 1187 column 7 The element type "div" must be terminated by the matching end-tag div. man now please update commands front awesome 4.5.0

      Delete
  8. Kian03:08

    I have done everything as you had mentioned, but it does not show up on my blog. Would you please check what is wrong. Just a quick note. The blog is in Persian and everything is from right to left.
    http://www.skyandweather.net

    ReplyDelete
    Replies
    1. Kian :: It is showing perfectly on post pages. I checked it.
      It will not show up on homepage.

      Delete
    2. Kian03:39

      oh and just to let you know: there was only one "div class='post-footer-line post-footer-line-3'" in my template, not two. So, I pasted the API right after that only one, and seems like it's working.
      Cheers

      Delete
  9. Kian03:32

    Hahaha, sorry about that. I was looking at the wrong spot. Thank you for letting me know before I would find out about it much later.

    Thank you again for the code.

    ReplyDelete
    Replies
    1. Kian :: I am Happy for you buddy :)
      Cheers

      Delete
  10. Hello Its best but not working on my blog Looking like this ----> https://lh4.googleusercontent.com/-wYFLzHr1lIk/VcOGPf46D9I/AAAAAAAABEo/P8Dzr6vzPTs/w868-h521-no/New%2BBitmap%2BImage.jpg
    Please help

    ReplyDelete
    Replies
    1. Admin :: Hey Buddy, First of all, It could be better if you had used your own name instead "Admin". :)

      Coming to your issue - It happens because you pasted the code in wrong place. It is working perfect. So now I can help you by adding this code in your template myself. If you want so then please contact me using Contact Us form and you're more then welcome. I would help you out for sure!

      Regards!

      Delete
  11. Wow Satbir! Awesome Work. You changed WordPress Sharing Button to Blogger Useable Sharing Button. I was also doing this so I know you did a lots of hard work. Thanks for providing these codes for free. I am surely gonna share it with my friends. :)

    ReplyDelete
    Replies
    1. Shivansh :: Thanks a lot for you appreciation and kind words <3 :) and you're more than welcome on my blog.
      I just tried my best to make them look like WordPress social share plugins with the Help of HTMl and CSS but the credit goes to the Author who provided the Total Shares Count PHP scripts for free on Github Project.

      Regards!

      Delete
  12. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Esobondhu :: I have replied to your previous comment on Responsive Videos article too. Just contact me via email using contact form!
      Regards!

      Delete
  13. Just work perfectly, can you please check it here http://www.techexpandable.com and also solve one of my problem? Check any one of my post and you will find that pics middle of the posts the oversize how to decrease the size of those pics.

    Bdw, Thanks for this awesome share. Have a Good Time.

    ReplyDelete
    Replies
    1. Thomas :: Hello buddy, Glad to know it worked and you liked it :)

      Solution for your problem about images ::

      Find out this CSS code in your template -

      .post img {
      max-width: 100%;
      height: auto;
      width: auto;
      margin-top: 15px;
      margin-bottom: 10px;
      }


      Now just remove width: auto; code line from above CSS code and save your template.

      Let me know if it worked as per your expectation or not!
      Regard!

      Delete
    2. Again thanks for the solution. :) Cheers

      Delete
  14. Hello man, please help me I got a new template and this works with the old template but with my new template no works. I can't find this code: < div class='post-footer-line post-footer-line-3' > I have been looking for that but I can't find it :( So where I should put the last code...

    ReplyDelete
    Replies
    1. George :: Hello buddy,
      Don't worry, If you can't find it in your new template then just paste it in post footer. Your new template is modified and I can't tell you the exact code line to look for unless I check your template myself.

      So please share your blog address and I'll let know soon after checking it.

      Regards!

      Delete
    2. Hello, well I put the code one this place: < div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop=' description articleBody' >

      is working but I don't know if is ok, if you want you can see on my blog: http://poplandweb.blogspot.mx/

      Delete
    3. George :: This not the right place to paste the code buddy. I checked your blog and the text of totals shares appears very big. If you want then I can add it for you perfectly the way you can see on this blog itself.

      Send me an email using contact form!
      Regards!

      Delete
  15. hello satbir
    i paste above code as you mentioned but its working on moile view not working in computer view???
    what can i do ??
    http://www.twistblogger.com/2015/08/add-custom-social-media-share-buttons-to-blogger-posts.html
    i used this code also but same problem arising please solve it

    ReplyDelete
    Replies
    1. Latest Picture SMS :: I will help you but please share your blog address buddy.

      Delete
    2. my blog is http://www.latestpicsms.com/ not working on computer view
      but working on mobile view http://www.latestpicsms.com/2015/09/bollywood-love-dialogues-in-hindi.html?m=1
      check both url and please say wht can i do for this problem???

      Delete
    3. Chetan Nanda :: Hello Buddy, So here is the solution:-
      You added the code in mobile template part of your blog and that is why it just appears on mobile version.

      Now just remove the HTML code of it and just add the floating social media buttons code right after SECOND APPEARANCE of <div class='post-footer'>

      Same applies to the horizontal version of these buttons... Paste the codes after second appearance of given code line in the tutorial!

      Delete
    4. thanks satbir its working properly on computer view but there is one question in home page the code is not appear but in post its appear so there is mistake in my code place please suggest me

      Delete
    5. Chetan :: Buddy there is no mistake in it. This code will appear in post pages only, not in home page. If you'll make it appear on homepage too then it will throw an error.

      Delete
  16. This bar works great, but only when I don't replace any of twistBlogger in the script...
    Once I remove them, the whole bar changed its appearance and jump to the Comments area. Then, when I paste back all of the twistBlogger string the bar jumps back and working just fine...
    Should I leave them all as is?

    ReplyDelete
    Replies
    1. Vladimir :: Hello Buddy,
      Just few days back, I updated the code and forgot to highlight my Twitter username to which you need to change. My bad. Sorry for the inconvenience. I just highlighted it again.

      You must have changed the class names in CSS code so please don't change them. Just change the highlighted Twitter Username in HTML only.

      Please let me know if you got it or not.
      Regards!

      Delete
    2. Twitter username is highlighted in yellow background => @TwistBlogger

      Change it with your twitter username

      Delete
    3. Hello Satbir, I change exactly like you sad, its working! Thanks for your help!

      Delete
    4. Vladimir :: You are more than welcome buddy and thanks for your feedback, I really appreciate it.

      Delete
  17. Hi satbir
    added this code and work great but Facebook and Twitter Counter dose not work please help me what can i do :(

    ReplyDelete
    Replies
    1. Chetan :: But I saw it is working perfectly fine. I checked the latest article on your blog.

      Delete
  18. Anonymous15:44

    hey admin itz not working on my blogger will u plz help me??

    ReplyDelete
    Replies
    1. Please share more details about where you got stuck? Your blog address?

      Delete
  19. hey web king, how can i make it show on my homepage too?

    ReplyDelete
    Replies
    1. Reginald Enyi ::Hello Buddy,
      Sorry to inform you but we can not do that because of XML structure. These buttons look for the Post URL to share and when it is not found, they will throw an error. So we can make it show up on homepage.

      Delete
  20. Hi satbir,

    Thank you for sharing such a great post,But i am facing some issue , i cant find this code line in my blog : www.techconfigurations.com
    < div class='post-footer-line post-footer-line-3' >

    ReplyDelete
    Replies
    1. ARUN KS :: Hello buddy,
      You don't really have to find only that particular line and you can also paste the HTML code just right after <div class='post-footer'> code line

      Hope this helps!
      Regards!

      Delete
    2. Thanks for the speedy reply bro,but i can't find it either,is it k to paste it below < div class='footer-right '>

      Delete
    3. Arun :: Nope buddy,
      footer right may be the class used at the end template for footer credit links and it will not work there as it has to be inside post area. Please share your blog url and I'll check it then let you know the solution.

      Delete
    4. Here is my blog www.techconfigurations.com

      Delete
    5. i have same problem.
      and it's showing template error
      www.tricksolver.com

      Delete
  21. hey why no reply ..this is my blog..www.techconfigurations.com

    ReplyDelete
  22. Cintia, from Argentine00:53

    Hi! I test it, but the counter not work. But not in my blog only, in yours too. You have 63 tweets. I made in your bar 4 tweets, and the counter never change, always count 63. Any idea?
    Thnaks! Excuse the bad English

    ReplyDelete
  23. fixed error..
    Thanks Mr. Satbir
    Now i am going to test it all

    ReplyDelete
  24. Anonymous11:04

    This share button wordpress plugin name plz .

    ReplyDelete
  25. what is i don't have (post-footer-line-3) where i can post the code?

    ReplyDelete
  26. Great work......Cheers

    Successfully implemented onto my blog. Want to hear more from your.

    Thanks buddy

    ReplyDelete
  27. For me, the facebook share only share the url and title, how about the body?

    Pleases i need ur help

    ReplyDelete
  28. Hey Satbir,

    There's no
    div class='post-footer-line post-footer-line-3'

    in my blog template. Can you help me out in placing the code?

    ReplyDelete
    Replies
    1. Hello Shafi
      I think i have your solution because i have faced same problem, you should past above code between and . but before doing it make sure you have download your template for backup.

      Delete
  29. I really need you help #Satbir_Patial if possible so plz kindly help me...

    i don`t know but why my facebook icon of sharing is not showing there in my sharing widget i tried your widget given in this blog it worked very well and i so much thankful to u for sharing this.But I need your what changes should I bring in my HTML so that my sharing button of FB works well.

    you can look at my Blog for this problem
    https://live-for-other.blogspot.com

    ReplyDelete
  30. oops sry please don`t approve my previous comment i`ve solved that problem.
    there is another problem

    ReplyDelete
  31. please help me what i do i`ve set all code correctly but it isn`t working

    ReplyDelete
  32. Thank You Soooooooooooo much i`m working on this since last 3 day but from your blog i find it working well and also thanks for the people who ask problem in comments my half of the problem gone just by reading them.
    Thanx once again keep up the great work by sharing post like this :)

    ReplyDelete
  33. In my template there is no line of post-footer-line post-footer-line-3 , there are 1 and 2 line but not 3 line, and I have checked by putting code under line 1 or 2 but it doesnt working.

    ReplyDelete
  34. Anonymous03:23

    Social buttonos counter stops to count. Any idea?

    ReplyDelete
  35. hello,
    i try all this with your instructions.
    but icons not appear to my blog.
    i have a simple blog template.
    in my template i found this code

    div class='post-footer-line post-footer-line-3'

    only once and i place the given code below it.
    but its not worked for me.
    will you guide me please.
    this is my e-mail add
    aazlqp@gmail.com

    ReplyDelete
  36. social button counter not working...

    ReplyDelete
  37. I tried this but no floating buttons are there in my blog, the buttons are only in the default share buttons area in blogger(bottom of the post). There is no hover effect too. Help me correct it.

    ReplyDelete
  38. Ok! now the floating share button works, its freaking awesome , gives a cool look. Is there any chance that I could use this when my blog is opened to its homepage instead of just visible in individual posts alone.

    ReplyDelete
  39. Hi guys, I have just tried to implement this Lines of codes in my blogger templates but one thing vague about this is how could I make this sharing floating menu in my homepage? My blog is www.geektemerity.com

    hoping to get prompt response from your end.

    ReplyDelete
    Replies
    1. You can not make them appear on your home page. Output will an xml error.

      Delete
  40. Where are the scripts?
    I have premium hosting if you wnt i can host this script for u...

    ReplyDelete
    Replies
    1. Praveen Shakya :: Follow this link to get the PHP scripts. I would not recommend to upload it for public use because you don't really know how many users are using this plugin right now. Your hosting provider will soon request to upgrade your hosting plan :p

      Just few days back I uploaded again after deleting the old Application and within an hours my monthly bandwidth limit crossed lol.

      Here is the link:- https://github.com/abeMedia/shareCount

      Delete
  41. Not working....
    http://www.123tailieufree.com/2015/06/kham-pha-tu-duy-giai-nhanh-than-toc-hoa-hoc.html

    ReplyDelete
  42. Anonymous15:49

    You dont write all this code, please dont share it like you do!

    ReplyDelete
    Replies
    1. Anonymous :: I could have removed your comment but wanted to reply. STFU and don't sh*t everywhere. #FAKE

      Delete
  43. thanks it really work ! the best !

    ReplyDelete
  44. Hello Satbir,

    Thanks for such an awesome tutorial. Buddy I have to say man you are an amazing designer.

    awesome work on blog :)

    Keep going !

    + after installing floating social media buttons one can really increase his/her social count.

    Thanks for such and awesome tutorial :)

    ReplyDelete
    Replies
    1. Damn ! what a beautiful template you have !! i will be thankful if you have a chance to share a copy of it with me :) really cool design bro keep it up

      Delete
  45. hi i have follow you instraction step by step but the icon did not appear in my blog
    my blog is http://www.shynnewz.blogspot.com

    ihave found only once this code in my blog
    div class='post-footer-line post-footer-line-3'
    will you help me please.....!!!!

    ReplyDelete
  46. thanks buddy :) amazing it worked.

    I placed the last codes before /body tag. It looks amazing!

    I will recommend this to my friends ;)

    Be Blessed!

    ReplyDelete
  47. but facebook share is not working :) but it's great here's my site growithjake.blogspot.com

    ReplyDelete
  48. Hey Buddy Social Count Wont Working Can you help Me Fast!!!!
    Blog--> http://techllog.blogspot.com/

    ReplyDelete
  49. thank you very much

    ReplyDelete
  50. Hi there
    This is my blog:http://engi-buddy.blogspot.in/ and i am not able to get it
    I have followed all the steps properly

    ReplyDelete
  51. I do not have a line post-footer-line-3 in my template only 1 & 2 are there so I applied to line 2 but I am not getting any widget .

    ReplyDelete
  52. Anonymous17:09

    These share social buttons are awesome. But have noticed one thing, if you enlarge page buttons get smaller (it is ok) but if you downscale site (ctrl -) then linkedin button drop down to second line.
    I use blogger and also I have problem how to grab first post image in facebook or google+ share window?

    ReplyDelete
  53. Please help me!
    I haven't div class='post-footer-line post-footer-line-3'>!
    I have only div class='post-footer-line post-footer-line-1'>; div class='post-footer-line post-footer-line-2'>. I added the code below div class='post-footer-line post-footer-line-2'> or out of div class='post-footer-line post-footer-line-2'>; my blog is no action!
    Thank you so much!

    ReplyDelete
  54. its not working properly in my blog please checkit out

    www.softxblog.blogspot.in

    ReplyDelete
  55. Its Working Fine in my blog but facebook button not working
    http://nallamothusridhar.blogspot.in/2016/03/how-to-track-your-friends-activity-on.html check this link facebook not sharing and linkedIn too some errors!!
    Please check it soon and give me code!!

    ReplyDelete
  56. Anonymous15:50

    Hi, great article,

    One question: where are the php files for share counts? I'm lost in this level. The rest, perfect.

    ReplyDelete
  57. hey man!! i have done all this but still my blog looks the same. No changes at all..
    www.tricksndeals.net
    Please check for it

    ReplyDelete
  58. Side floating icons are working good. but i have issue with bottom share icons, those are still same. i put footer-3 line code properly under that line.
    qs-learners.blogspot.com

    ReplyDelete
  59. For whatever reason the numbers are not showing up....Know why this might be happening?

    ReplyDelete
  60. ok for those whose share count wont appear...

    Place all those code Correctly then After pasting it.... Press Ctrl+f and type---> http://sharecount.twistblogger.com/?url=

    Now it will find that part replace
    http://sharecount.twistblogger.com/?url=

    with

    http://share-counters.rhcloud.com/?url=



    Thank me later
    @ www.techllog.com

    ReplyDelete
    Replies
    1. Anonymous15:25

      Thanks, worked for me.

      Delete
  61. step 5 html code not find in my template what i do

    ReplyDelete
  62. great !!!!! your work is considerable . thanks bro.

    ReplyDelete
  63. Hi , There is one problem I found that is LinkedIn sharing is not working at my blog(www.inspirespace.in) as well as not working at your's too.
    Please check it seriously and let me know through mail.

    bipul.jaiswal@live.com

    ReplyDelete
  64. Not working, no one can't fint post-footer.line3 >:(

    ReplyDelete
  65. Hi...I was follow the instruction, but I'm faced problem, I'm not found /*< class='post-footer-line post-footer-line-3'>", how to fix it? Need your reply...thank and here my blog, www.samasama-tau.blogspot.com

    ReplyDelete
  66. div class='post-footer-line post-footer-line-3'
    well i cant find this code in My Blog's HTML What Should I Do Now ...

    ReplyDelete
    Replies
    1. You can paste the codes in any footer line from 1 to 3. If you don't find footer line then paste the codes in post footer area. Simple it is!

      Delete
  67. It haven't worked on my blog !

    http://planetlifehack.blogspot.com/ I tried both the methods ( I deleted first codes and pasted fresh codes to try other one ) Don't know whats wrong, can you please help?

    ReplyDelete
    Replies
    1. Khusboo:: I don't see any codes added in your blog!

      Delete
  68. This comment has been removed by the author.

    ReplyDelete
  69. Bro thanks so much for this wonderful post of yours but i don't know why it didn't work for me @ www.bestnutritips.blogspot.com

    ReplyDelete
  70. Anonymous22:07

    Thnq so much,.... Its perfectly working in mah website
    But I need instagram too dere. Can u plz help me ?

    ReplyDelete
  71. Thanks. But when I applied this code, I am unable to see the individual shares; but only the total. Any suggestions as to why so?
    www.simplifyinguniverse.blogspot.com
    Also, when I checked on Facebook Debugger, a post had around 150+ shares; yet in this widget, the total count is showing 0.

    ReplyDelete
  72. Hi

    I have tried it but the code is not working.
    I have follow your Instruction . My email id isha10chopra12@gmail.com
    Kindly share ur email id

    ReplyDelete
  73. I could use some help with a page I am working on. If you have the spare time I could use some help and suggestions.

    ReplyDelete
  74. I am unable to add this widget. Kindly help me out please. http://marvelousfacts.blogspot.in/

    ReplyDelete