331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

Add Floating Social Media Share Widget For Blogger

Increase your social share count with our floating Social Share Buttons Bar to Blogger with Total Shares Count and Custom Buttons.
Add Floating Social Media Share Widget For Blogger
Add Floating Social Media Share Widget For 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

Add Floating Social Share Buttons to Blogger
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.

Floating Social Share Buttons For Blogger
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://Twistblogg.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>
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 @TwistBlogg - &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 TwistBlogg 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!

Share this post

Explore more articles by Satbir

140 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Thank you very much, working fine at my blog :D
  2. Very cool. I'm going to try this out later today. Thank you!
  3. Hi! Thanks for your code it works great! I have one problem though, it seems that the twitter share doesn't work.. I changed the twitter handle @twistblogger to my own handle. other than that everything is perfect!

    Looking forward to hear from you!
  4. it did not worked for me at www.madeforyouth.com
  5. thank you very much looking fine on my blog. http://boomspk.blogspot.com
  6. Hey, I am a blogger using blogger like you. I have tried looking for a different colored footer on blogger but have failed to do so. Please tell me how you got a grey colored footer on your blog as I want one too. Mine is plain white now which I dont like. please let me know. waiting for your reply. my blog is www.nadiyanajib.com
    1. Hey search the following code in your Eid HTML section. footer-wrapper

      Just under it, you will see "Background:#0F0D0C", you can replace #0D0D0C with any color code you want. and if you do not kno color codes, then you can search it at google
  7. Thank you for sharin this floating social sharing widget.
  8. Great! it worked perfectly on my blog. Thanks. keep up the good work.
    www.archccess.com
    www.bbnl-architects.com
  9. Very cool. I'm going to try this out later today. Thank you!
  10. I am unable to add this widget. Kindly help me out please. http://marvelousfacts.blogspot.in/
  11. 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.
  12. Thanks :D
  13. 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
  14. 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.
  15. Thnq so much,.... Its perfectly working in mah website
    But I need instagram too dere. Can u plz help me ?
  16. 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
  17. Manas Madrecha
    This comment has been removed by the author.
  18. 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?
    1. Khusboo:: I don't see any codes added in your blog!
  19. 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 ...
    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!
  20. 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
  21. Not working, no one can't fint post-footer.line3 >:(
  22. 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
  23. great !!!!! your work is considerable . thanks bro.
  24. step 5 html code not find in my template what i do
  25. 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
    1. Thanks, worked for me.
  26. For whatever reason the numbers are not showing up....Know why this might be happening?
  27. 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
  28. 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
  29. Hi, great article,

    One question: where are the php files for share counts? I'm lost in this level. The rest, perfect.
  30. 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!!
  31. its not working properly in my blog please checkit out

    www.softxblog.blogspot.in
  32. 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!
  33. 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?
  34. 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 .
  35. 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
  36. i will try on my blog tricksuniversity .
  37. Hey Buddy Social Count Wont Working Can you help Me Fast!!!!
    Blog--> http://techllog.blogspot.com/
  38. but facebook share is not working :) but it's great here's my site growithjake.blogspot.com
  39. 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!
  40. 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.....!!!!
  41. 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 :)
    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
  42. thanks it really work ! the best !
  43. φγ
  44. You dont write all this code, please dont share it like you do!
    1. Anonymous :: I could have removed your comment but wanted to reply. STFU and don't sh*t everywhere. #FAKE
  45. Not working....
    http://www.123tailieufree.com/2015/06/kham-pha-tu-duy-giai-nhanh-than-toc-hoa-hoc.html
  46. Where are the scripts?
    I have premium hosting if you wnt i can host this script for u...
    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
  47. 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.
    1. You can not make them appear on your home page. Output will an xml error.
  48. 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.
  49. 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.
  50. social button counter not working...
  51. 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
  52. Social buttonos counter stops to count. Any idea?
  53. 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.
  54. 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 :)
  55. please help me what i do i`ve set all code correctly but it isn`t working
  56. oops sry please don`t approve my previous comment i`ve solved that problem.
    there is another problem
  57. 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
  58. 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?
    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.
  59. For me, the facebook share only share the url and title, how about the body?

    Pleases i need ur help
  60. Great work......Cheers

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

    Thanks buddy
  61. what is i don't have (post-footer-line-3) where i can post the code?
  62. This share button wordpress plugin name plz .
  63. fixed error..
    Thanks Mr. Satbir
    Now i am going to test it all
  64. 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
  65. hey why no reply ..this is my blog..www.techconfigurations.com
  66. 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' >
    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!
    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 '>
    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.
    4. Here is my blog www.techconfigurations.com
    5. i have same problem.
      and it's showing template error
      www.tricksolver.com
  67. hey web king, how can i make it show on my homepage too?
    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.
  68. hey admin itz not working on my blogger will u plz help me??
    1. Please share more details about where you got stuck? Your blog address?
  69. Hi satbir
    added this code and work great but Facebook and Twitter Counter dose not work please help me what can i do :(
    1. Chetan :: But I saw it is working perfectly fine. I checked the latest article on your blog.
  70. 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?
    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!
    2. Twitter username is highlighted in yellow background => @TwistBlogger

      Change it with your twitter username
    3. Hello Satbir, I change exactly like you sad, its working! Thanks for your help!
    4. Vladimir :: You are more than welcome buddy and thanks for your feedback, I really appreciate it.
  71. 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
    1. Latest Picture SMS :: I will help you but please share your blog address buddy.
    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???
    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!
    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
    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.
  72. 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...
    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!
    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/
    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!
  73. 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.
    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!
    2. Again thanks for the solution. :) Cheers
  74. এসো বন্ধু
    This comment has been removed by the author.
    1. Esobondhu :: I have replied to your previous comment on Responsive Videos article too. Just contact me via email using contact form!
      Regards!
  75. 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. :)
    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!
  76. 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
    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!
  77. 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.
    1. Kian :: I am Happy for you buddy :)
      Cheers
  78. 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
    1. Kian :: It is showing perfectly on post pages. I checked it.
      It will not show up on homepage.
    2. 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
  79. 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 .
    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)
    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.
    3. Simply perfect
      Thanks so much for this ^_^
    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
  80. unfortuantely i added the the code without removing the old version one :/
    i need the codes of the old version to remove,please
    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.
    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
    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 ~
    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
  81. How to add a whatsapp button next to share buttons above?
    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. :)
  82. 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
  83. 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.
    1. Rohan:: Thanks for the taking time to leave your comment..!!
  84. 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
  85. 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?
    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 :)
    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
    3. Akuneme:: I just checked it, Its working perfectly fine and I am happy for you :-)
      Your blog design is really cool!
    4. Thanks a lot
    5. I have religiously followed instructions but it didnt work on my blog. it did not appear
    6. It didn't work on mine either.
    7. It didn't work for me
    8. hi guys
Post a Comment