May 21, 2012

Create Floating Bar For Pinterest & Other Sharing Buttons


floating share bar for bloggerThis is one of the few social sharing widgets that took a lot of my time in designing it. You have seen the trend of floating sharing count buttons on popular blogs. The traditional icons are now replaced with auto incremented counter buttons that are updated in seconds.  We created different versions of this bar applying both Jquery effects and CSS3 styles but this widget is different because it contains custom twitter, pinterest and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. Pinterest pin it buttons are causing great trouble and it badly fails in fetching the correct thumbnail image. In most cases it does not even select a image thus making the entire pinning concept tasteless. We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float  to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience. We have tested the widget on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.
Developers and bloggers are requested to link back to this post if in case they wish to share our code with their readers. Lets get to work now!
Did you check the previous version? Floating Sharing Counters

Which Social Networking Buttons To Use?

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

Why not use JQuery?

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

How it works?

We have integrated both Addthis and ShareThis service in it. In order to customize the twitter button and others we took the Sharethis default code and customize it to change the button image, bubble size and count text. The widget that we initially developed looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below:
float bar for sharing buttons
You can observe that both Twitter, Google Plus, Pinterest and Stumbleupon are displayed with custom shapes, same sizes and different count colors. I spent a lot of time trying to make all buttons of the same size by using a common image linked by a sprite but the only problem with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis. If you add this sharing bar to your blog, you will see zero on all counters unless someone clicks them and circulates your content.
To correct this issue I had to unfortunately dropped the idea of sharing the above designed version and share this tutorial widget instead. However the widget on our blog still contains the twitter button which wont display official count but that of ShareThis. If you would like to replace it with the official big size twitter count box then you can surely do this by customizing the code shared below.
Adding Floating Bar To Blogger
The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Then Click Expand Widget Templates
  6. Search for
<b:includable id='post' var='post'>
      7.   Just below it paste the following code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

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

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

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/s400/bubble_arrow_pinterest.png') !important;
}


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

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='mybloggertricks'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
   
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Just replace mybloggertricks  with your twitter username.
   8.  Save your template and you are all done!


Optional step:

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

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Got Questions?

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




If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

174 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. what great are you we are waiting for such posts like this mohammed i want to have more and more plugins please man double the posts daily

    ReplyDelete
    Replies
    1. Thanks for sharing a Great Blogger Widget. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.



      www.bloggertips.com

      Delete
    2. The only problem is that twitter sharing button doesn't work with popup style rather it opens a new tab and access the account. Is it possible to make it popup like facebook:-

      Different jQury menubar
      CSS3 label cloud tag
      Install blog pager plugin on blogger
      Pinterest button for blogger
      Disable hyperlink in blogger comments
      Enable meta description tag feature in blogger

      Delete
    3. @Noufal all code working to you? My twitter twitter sharing button doesn't work and i think due to my own CSS setting.
      Anyways a great widget for all bloggers.

      Thanks alot mohammad for sharing with us.

      Regard
      WAQAS
      Latest Tutorial

      Delete
  2. very nice m8, is there chance to add Dig Button?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Great Post....But I have one query ,How we can measure the usage of this widget .Suppose In MBT, face book like button is given at two place ,tweet button two places. So We would like to know number of clicks of each of share widget so that we can decide whether it is useful for a Blog or not after testing it over a period .
    Thanks in advance

    ReplyDelete
  5. What a post. Never thought like that.

    Many thanks for such posts. Keep it up.

    Subscribe To @ Employment News India

    ReplyDelete
  6. Hey Bro. .
    Nice Post n as per your suggestion i have changed the background of my blog. . how is this now Blogger Tricks

    ReplyDelete
  7. Why does chrome doesn't show the correct padding. When I adjusted the padding to make the widget bit more above, chrome didn't show any effect whereas firefox showed. Ghosh!!!

    ReplyDelete
  8. Twitter count showing zero for posts already tweeted before. Also I think you forgot to add that you need to change "MY BLOGGER TRICKS" in share button.

    ReplyDelete
  9. Thanks .. Good Tutorial ...

    ReplyDelete
  10. hmm only work facebook button i tryed 1st in my blog test

    http://livedownloadspt.blogspot.com/2010/08/text-read-more.html

    and only Like Button i can clik why?

    ReplyDelete
  11. Another useful widget for blogger.
    Thx for sharing brother.

    www.gulmiresunga.com

    ReplyDelete
  12. Wow,

    I'm impressed with this and that you are openly sharing with us all. I've seen other gloating toolbars but they flicker when the user scrolls, this however does not suffer that problem!


    Thanks

    ReplyDelete
  13. Thanks a lot buddy... Now my blog is looking clean

    ReplyDelete
  14. Thanks Buddy..
    But I cant make it on right...Anyway it looks Nice .

    http://22december.blogspot.com/2012/04/soulmates.html

    ReplyDelete
  15. THANKS DUDE ITS AWESOME , I AM WAITING FOR THIS FOR A LONG TIME
    http://mechfuturekings.blogspot.in/

    ReplyDelete
  16. I Got What i want.. Finally Thanks Muhammad..
    http://www.insertknowledge.com/

    ReplyDelete
  17. how i can add facebook share button to this tuto... hehehhe..

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. I tried it and it worked perfectly well. Good job Man...

    ReplyDelete
  20. facebook count is not working whenever share is pressed means it showing count as 1 but if we refresh the page it is not showing anything again the same f share icon come wat to do pls reply with solution pls i am searching for 1 week
    http://learnlego.blogspot.com

    ReplyDelete
  21. Hello dear Mohammad,

    Sorry for my bad english, i'm portuguese!
    I wonder if it's possible to change the "Like" title from Facebook share button?

    Thanks you my friend!

    ReplyDelete
  22. Visit my blog sameer9542.blogspot.com

    ReplyDelete
  23. How to create Facebook share button in java script is here. I think this tutorial helps you to understand how to add facbook share button in any website. http://www.databaseidea.com/2012/06/how-to-create-facebook-share-button.html

    ReplyDelete
  24. Thanks man, THAT HELPED A BUNCH. Thanks, I owe you one.

    ReplyDelete
  25. Thanks Brother, this Post Very Important to me, like it.. happy Blogging, i already take this script to my blog Http://www.ithedoctor.com , i will bookmark your site on my browser cause its very2 important...

    ReplyDelete
  26. Thanks so much for this!
    I've been looking for one that's working for almost a day now and finally I have one that works perfectly!
    Thumbs up!

    Check out my blog, I've added your floating bar :)
    I've also featured you in my post http://sharpasnails.blogspot.com/2012/06/starting-over-again.html#more


    http://sharpasnails.blogspot.com

    ReplyDelete
  27. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 video server| web applications

    ReplyDelete
  28. What if I want this more to the left.

    ReplyDelete
  29. Thank you so much for the float bar! I have used it on my blog and feels great, a post to see -- http://bakedexpression.blogspot.in/2012/06/cherry-peach-crumble.html#more

    ReplyDelete
  30. Thanks for sharing such a nice widget
    You can see this on my blog
    http://hackingpalace.tk

    ReplyDelete
  31. This comment has been removed by a blog administrator.

    ReplyDelete
  32. @hackingpalace
    Looks like you are an idiot who don't know how to respect others and their work.

    ReplyDelete
  33. And guess what!!!
    The same person named "Jayadeep km" is saying thanks as well. lol

    ReplyDelete
  34. Thanks for this tutorial now i know how to add floating social bookmark

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. but how can we add this widget in the home page :(

    ReplyDelete
  37. really need this widget on home page of new blogger site... n can we customise the buttons....like we choose what buttons we like to have on the floating bar...

    ReplyDelete
  38. Hi Mohammad,
    This Is William Here..... Very Nice Floating Bar Work Of Yours.... I Would Like To Ask You Something Related To This Floating Bar.... I Want To Even Display This Onto My Home Page Too... So Kindly Let Me Know..... I Will Be Very Glad To Here From Your Side... Mail Me On william4every1@yahoo.com

    Awaiting For Your Reply.... Take Care .... GOD Bless You .... :)

    ReplyDelete
  39. Can You Please Tell Me How To Use This On Wordpress???

    ReplyDelete
  40. Can you make a new script including Digg and stumble button?

    ReplyDelete
  41. Thank you sir... very helpful.. i just used it in my new blog and it work. once again thank you.

    http://naijaeduscholar.blogspot.com

    ReplyDelete
  42. Thanks Mohammad for the floating bar widget. It's just what i needed for my blog. I love this comment editor of yours. Can you please guide me on how to add one to my blog?

    ReplyDelete
  43. Thank You so much for this code :-)

    ReplyDelete
  44. Hi,
    I just tried to add your widget on my blog and it's not worked. I followed instructions as you described. Please help, my blog is http://www.riddimzragga.com. Maybe you can assist?

    ReplyDelete
  45. I like Pin-interest...easy to use and also good to share my likings with my friends in FB...also these little new additions make the social networks so very interesting and happening.Make money on Facebook

    ReplyDelete
  46. Hi, thank you for this floating/slide bar i placed it in my blog and it is great.. my blog is http://mysimplethoughtsonline.blogspot.com/ .. I just want to ask how can I also let it appear on the home page? my email is justme.mart@gmail.com

    will be waiting for your reply thanks...

    ReplyDelete
  47. Nice work Man. Keep Sharing... I am also working on my Site www.flavorsofsoul.com.
    Will wait for some feedback from your side as it needs lot of improvement.

    ReplyDelete
  48. Please tell me how to rearrange these buttons

    ReplyDelete
  49. can i make the background transparent ?

    ReplyDelete
  50. @Remen Raj Found it. change the background color to

    #sb-container .widget{opacity:.8}

    this will make the widget appear transparent :)

    ReplyDelete
  51. Assalamualaikum, brother i wanted to ask how do I shift the floating bar More towards the left of my page because for some readers, its annoying. however i think shifting it to the left would solve the problem.

    ReplyDelete
  52. Awesome! Another great post! Thanks a lot!

    ReplyDelete
  53. Tweet and like counts not working :\

    ReplyDelete
  54. Sir floating bar is awesome but i want to hide it when reach to my blog's footer "just like in your blog" looking for help from you.
    thanks

    ReplyDelete
  55. @Remen RajLook on this post of another share widget how to move this share widget to the left by making the number bigger. The widgets are very similar. http://www.mybloggertricks.com/2011/08/add-floating-facebook-share-1-button.html

    ReplyDelete
  56. This comment has been removed by the author.

    ReplyDelete
  57. This comment has been removed by the author.

    ReplyDelete
  58. This comment has been removed by the author.

    ReplyDelete
  59. This comment has been removed by the author.

    ReplyDelete
  60. does not work in the actual blogger version
    I had all done how it is written in your direction
    on an usual template of blogger, but nothing happens

    ReplyDelete
  61. Wow Great trick i like tha it worrks great it's hot with my horny page please look at it!

    ReplyDelete
  62. Great post.But I have problem. facebook like button not working.
    hey please please help me waiting for your reply

    ReplyDelete
  63. thanks a ton bhaiya :) I've added this to my blog and its looking very pleasant!

    ReplyDelete
  64. @ahmed safwan
    Yes, that is very fantastic job by Mohammad!. This is the solution for all blogger blogs to have a floating bar social buttons.
    We have written a simple plugin to add floating bar on any WordPress blog. Hopes WordPress users find it helpful.

    ReplyDelete
  65. HOW DO DELATE PIN IT, SHARE,EMAIL BOX and widget sign???

    ReplyDelete
  66. I had this on my blog and it worked great. But then I switched to a different template and it wouldn't show up anymore. I thought maybe it just got lost in the switch of templates, so I went back and found and removed where I had the code before and saved it, then went back and pasted it in there again, and it still won't show up. I know it's on the post pages only, but it's not showing up there. Any help? Thanks!

    shadesofsafhire.blogspot.com

    (I'm also having a hard time getting the images in my sidebar graphics to be centered. The text is fine, but the images are sliding off to the right. I put the center codes on both sides of the code too, and that didn't fix it either. Arghh :)

    ReplyDelete
  67. Oh, by the way. I switched from "Basic" template to "Awesome Inc." in case that matters :)

    ReplyDelete
  68. I am getting problem can you help me my blog name is rehut.org

    ReplyDelete
  69. This comment has been removed by the author.

    ReplyDelete
  70. Assalam o ALaikum
    Sir, can you please tell me that how I may show the number of comment under each post. Just like your blog?
    I mean #82
    #83
    etc...
    Thanks.!

    ReplyDelete
  71. Assalam o Alaikum bhai,
    You are really Proud of Pakistan,
    Really Really Good Work
    and yours widgets are every where over the internet.
    Stay Bless

    ReplyDelete
  72. Assalam o Aliakum brother,
    Great Great Work,
    but this code is not working on my blog plz tell me whta should i do. I have successfully save this code on my blog but it does not show any thing :(
    http://wizprogramming.blogspot.com/

    ReplyDelete
  73. Hey bro!
    Great efforts but it is not working my blog i dont why..?
    http://wizprogramming.blogspot.com/
    plz help me w8ing for your reply.

    ReplyDelete
  74. I don't christen this a brat's pellicle at all. Not because it has of age physical, because it doesn't. I say this because the pellicle is finished for everyone. Actually, everyone. There are things in it watch movies online every somebody can take delight in, no substance who they are. It has obnoxious homages to Stanley Kubrick's "2001: A Extent Odyssey", and any of age who remembers seeing that pellicle will note this.

    ReplyDelete
  75. Thank you very much for this. For those wondering how to move the widget a little more to the right edit this line of code:

    position:fixed; bottom:10%; margin-left:-60px; float:left;

    Change the value for 60px. Increasing it will move the bar to the left while decreasing it will move the bar to the right.

    ReplyDelete
  76. Hello sir Mustafa, I am a loyal reader MBT but I have tried this widget time and again but it isn't working for me.

    ReplyDelete
  77. thanks a lot this widget is now beautifully working at my site www.pollutionpollution.com. thanks a lot

    ReplyDelete
  78. Hello, I really like this floating media bar. But I need for it to go a little more down on my page, more in alignment with my posts, as it is now covering up my Header and my Page titles.

    Another question is how can I get the numbers updated from past "clicks" who have Pinned, Tweeted, Liked, etc.?

    Thanks for providing the bar.

    my site is
    http://sweetpepperrose.blogspot.com

    ReplyDelete
  79. See the long thread of comment, on how lots people saying it didn't work for me while they aren't giving the actual problem. I tried this floating share widget on my site, it displayed but the problem is wasn't aligned well. I tried editing its alignment but didn't succeed in doiing that.

    ReplyDelete
  80. Thanks alot for the code, it tried to install the code on my blog but it didn't work, i had to remove it from http://milkingtheinternet.blogspot.com/

    ReplyDelete
  81. nice widget on my blogspot.. tengkyu...

    ReplyDelete
  82. The hardest thing for me was finding the darn code, I didn't remember the shortcut. After that all I did was paste and change my username and done!! I could not believe how easy this was and how well it works. I PIN alot of stuff and it's always been such a hassle to log into Pinterest, now I can do it straight from the post. I also can't believe I finally have a FB like button on each post. AMAZING!! and so easy, I can not thank you enough!!

    ReplyDelete
  83. If you want to shift the box a little left then, change the value of - margin-left:-60px to margin-left:-80px, or increase the size until you get the right position.. :)

    ReplyDelete
  84. my buddy's aunt makes $61/hr on the computer. She has been without work for 5 months but last month her check was $15064 just working on the computer for a few hours. Go to this web site and read more http://Run19.com

    ReplyDelete
  85. After my Post ends..there is the DISQUS Comment box..and since I run a Physics blog..comment and discussion goes on there often..!!!

    Is there a way..so that the share bar vanishes once it crosses the normal post height and is just entering the DISQUS comment box region ??..

    Thanx a lot for this widget anyways..

    ReplyDelete
  86. Thanks Buddy..
    http://articlestech.com/

    ReplyDelete
  87. thanks http://jobnewsng.blogspot.com

    ReplyDelete
  88. This comment has been removed by the author.

    ReplyDelete
  89. I have been using AddThis share button for long on my wordpress site NaijaBizCom and it has been working but recently I noticed that any time I share to my facebook my post images does not show instead its wordpress logo that comes up. How can I resolve this challenges.

    ReplyDelete
  90. Why doesn't the "like" show up in my newsfeed? For example, if I hit "like" on this article on MBT, it shows up in my FB newsfeed. However, if I add this widget and hit "like" on my website, www.basesandbaskets.com, the liked article does not show up in my newsfeed. Any idea why this is occuring?

    ReplyDelete
  91. it is not working fully.not on side It is above posts .Any help

    ReplyDelete
  92. This comment has been removed by the author.

    ReplyDelete
  93. Implemented it on my tech blog.
    Very easy to use the code. Thanks for sharing.
    However, if you noticed, the tweet counter has overlapped slightly on top of the pinterest button. If you can make a minor adjustment, it would be perfect.

    ReplyDelete
  94. installed this on my blogger blog a few weeks ago and have been very pleased- until the day before yesterday when the pinterest pin it button stopped working. Any idea how to fix that?

    ifitshipitshere.blogspot.com

    ReplyDelete
  95. What if your home page is your posts page in Blogger. At this point, I need to have a Pin It button for each post and don't care if it's floating or otherwise. I just need to find something that works and the Posts page is the Home page. Thanks greatly. The Floating Bar that you put the code in an HTML widget works great, but it doesn't have a Pin It button. Thanks.

    ReplyDelete
  96. I tried to implement the floating share bar with no luck I put in the code just like you said and the bar don't show is there any way I can check this?

    ReplyDelete
  97. Thanks for this great post. I was successfully able to put this sidebar at my two below mentioned blogs.
    http://www.funWithPuzzles.com and
    http://www.theFunLearning.com

    I tried to put this bar on the right side but I was not successful.

    ReplyDelete
  98. Easy and effective! Thank you so much!

    ReplyDelete
  99. Mustafa I don't Find The above code in my blogger

    ReplyDelete
  100. nice post mohammad , but there is one problem i implemented the above code it works only for the posts , not for entire website . Plz reply

    ReplyDelete
  101. Awak code awak x jalan la dalam blog saya knp ye? saya dah tukar twitter akaun kepada saya punya.

    ReplyDelete
  102. Thanks for sharing.
    1 question --> how to show this widget on Blog's main page?

    My Blog ••• Web Developer / Designer

    ReplyDelete
  103. Thank you , long time have serched for it !

    ReplyDelete
  104. Love it! Thanks so much. Any way we can add it to the homepage too?

    ReplyDelete
  105. Having trouble though.. when I hover over the buttons they dont always become clickable, and the facebook one doesnt work. hmm.......

    ReplyDelete
  106. Hi Mohammed I have Modified Somme Css in order To fit With Arabic Content http://www.arab-teck.com/2013/01/blog-post.html Great Post BTW !



    computer tricks

    acne treatment reviews

    ReplyDelete
  107. GREATLY HELPED ME..:D can we make this same widget HORIZONTAL .?? PLEASE REPLY , my email id is -mukeshnayak643@gmail.com

    pLEASE CHECK MY FIRST BLOGPOST ..

    http://tap2tech.blogspot.in/2013/01/how-to-take-screenshot-video-footage-of_11.html

    Do comment ...

    ReplyDelete
  108. You can create floating bar for pinterest and other siwth help of the post her.e useful post
    CD Duplicator

    ReplyDelete
  109. This comment has been removed by the author.

    ReplyDelete
  110. Hi Mohammad,

    Thanks for all these tutorials. I tried using this floating bar but to no success. I was able to encode it but the result is not working well. Immediately, I have 7 FB likes and this applies to all my posts. Is it because of my template?

    ReplyDelete
  111. Absolutely fantastic bit of code, thanks for creating it and also sharing!

    ReplyDelete
  112. Seem to be getting an issue on the twitter function. When sharing it produces a share.es link but this is timing out with a 404 not found error.

    Any thoughts?

    Thanks

    ReplyDelete
  113. not working for me :( pls help, http://itech-hubz.blogspot.com/

    ReplyDelete
  114. Please try to give us the floating bar for special for Wordpress, because in wordpress i am getting much trouble...

    Founder
    myblogmymoney

    ReplyDelete
  115. this really help me
    thanks for this amazing and helpful post

    ReplyDelete
  116. Pau Gasol Hello .. firstly I would like to send greetings to all readers. Yahoo Fantasy Football Rankings After this, I recognize the content so interesting about this article. For me personally I liked all the information. I would like to know of cases like this more often. In my personal experience I might mention a book called NBA Rumors in this book that I mentioned have very interesting topics, and also you have much to do with the main theme of this article. Apartments for Rent in Michigan

    ReplyDelete
  117. Mohammad Bhai Love you :)

    Thanks for updating the code :>

    ReplyDelete
  118. i appreciate this widget... and it works pretty well too.. But i tweak it to make it more enjoyable.. how this works?
    simple, i modified so that if youre on the scroll top page, sidebar widget will hide... but if you scroll down, says, 100 px...then it will display(yet faded opacity 0.5) and when you hover it, it displays normal opacity..

    you can check here: Animated Scroll Fade + Opacity Hover

    ReplyDelete
  119. It works Properly but it takes lots of time to load.....!! What to do ?

    ReplyDelete
  120. @mobileping
    Check this post it will help you getting widget closes or far ways to your borders.
    How to get widgets closer to borders of the posts

    ReplyDelete
  121. Hi. I just installed it on my blog.. works great... but i have a problem with the facebook like button. When I click on it the facebook box that appears is kind of TRANSPARENT, so its interfering with the texts of my blog... like for example if the box opens adjacent to an image, the box goes behind the image and can't be seen. When when it opens next to texts it interferes with them... i dont't know how to explain properly. please see my blog and tell me how to fix it..

    Actually the same problem can be seen on your blog too... for eg when the box opens next to the comments or adsense ads... but other than that it works fine here.. but in my blog it's not working properly anywhere... please help

    ReplyDelete
  122. Thank you so much. I just had it on my blog and it works fine, but I was wondering if you could help me make it fade in like the scroll up button. Thanks.

    ReplyDelete
  123. If u can help me. I didn't know what's going on my blog. just did like the instruction and have try many code before. Fb button will hidden in post page. Any idea? hope u can help me. Visit my blog if there any solution soon :)

    ReplyDelete
  124. Your blog is quite informative. This issue, which you highlighted above, is very informative. Thanks for sharing such a information around. It is quite useful for everyone to training. Best connected with luck money for hard times blog articles.
    Click Here

    ReplyDelete
  125. Excellent work with the widget, loadtime has decreased now, you were right, jQuery does take a lot of time, check my blog now, it works fine - STB

    ReplyDelete
  126. When I created floating bar for pinterest,facebook, it get me some errors, can you please advise. seo services

    ReplyDelete
  127. Nice tips about create floating social bookmarking!

    ReplyDelete
  128. Thanks for posting this widget. I was looking for a working pin widget.

    ReplyDelete
  129. thanks alot ... i have used code in my blog and shared your topic
    http://www.geek-mind.com/2013/05/create-floating-bar-for-facebook.html

    thank you very much

    ReplyDelete
  130. Hi ,
    Your Widget was very useful for my blog. But I would like to show some logical mistake(not affected for the user experience at all). Assume we clicked the "Pin it" button and didn't pin anything. Still it counts that click , regardless of checking whether the picture was really pinned or not.

    Apart from that I have another request , Could you please instruct a way to add our own suffix to the description automatically for every pin ?

    Thank You.
    Love You.

    ReplyDelete
  131. I want to make it invisible after reaching lower wrapper, how can I do it. Please tell me. Subscribed for reply.

    ReplyDelete
  132. Thank you well in every point social icons are the most important things for your website and every blogger should add this gadget to the website here is another scrolling share buttons for blogger its also good but not better then you, :)

    ReplyDelete
  133. hello dude..
    i am new into bloggers world.
    need some suggestions for my queries..

    1. der is no floating baar appearing o my blog after pasting the desired code after the said line..

    the procedure i adopted is that---
    templates--edit html-a text box appeared
    there i searchd for ''
    and then pressed enter and copy paste the above body and then corrected twitter username and saved..

    after that i am luking on my blog and there is no floating bar..

    suggest me where i am doing mistake bro..

    incredibleknowhow.blogspot.com

    ReplyDelete
  134. Thanks for a wonderful post.
    After installing the widget, it looks great on computer but the view of the site within the iPad looks distorted. Why?
    I'm from Israel, Hebrew writing is from right to left, so I installed the widget on the right.

    http://www.nekudatinyan.com/

    ReplyDelete
  135. This comment has been removed by the author.

    ReplyDelete
  136. I using this widget on my website ( All Free Download ) but i have a problem, when i check errors on http://validator.w3.org/ , i detect errors eg.

    <fb:like layout='box_count' send='false' show_faces='false'></fb:like>

    =>
    - there is no attribute "send"
    - there is no attribute "show_faces"
    - element "fb:like" undefined

    And <g:plusone size='tall'></g:plusone>
    =>
    - there is no attribute "size"

    Please Help Me!!!

    ReplyDelete
  137. I am useing this in my Blog. Thanks

    ReplyDelete
  138. You can sound like Rocket Arabic you ARE a native Arabic Rocket Arabic Review speaker when you use Rocket Record, the pronunciation tool from Buy Rocket Arabic!
    Rocket Record learn arabic online allows you to listen to the way native speakers say hundreds of best way to learn arabic words and phrases. Then you can record yourself and accurately compare your speech with that of the native speaker how to learn arabic.

    ReplyDelete
  139. hi...tq for the great widget...but why it not appear on homepage?

    http://eksploria.blogspot.com

    ReplyDelete
  140. thanks for nice post, my blogspot http://moviereeviews.blogspot.com ,gibe me some tips for traffic

    ReplyDelete
  141. it works fine for me!

    Where can I find the code after installation if I want to edit it ?

    Naturly I was looking for it exactly where I placed it but there is nothing now..
    Can someone help me please?

    ReplyDelete
  142. I can not get this dumb thing off my test blog

    ReplyDelete
  143. http://z2asoftware.blogspot.com/ this blog free Premium Software and Games Free Download

    ReplyDelete
  144. I think that what you posted was very logical. thanks, Clipping Path

    ReplyDelete
  145. I tried it but it does not work, the reason maybe is the template I use, which is the " flipcard " in blogger. Do you think that's correct ?

    ReplyDelete
  146. It's great but you should add more social buttons. On my webpage, it only showed pin it and facebook.

    ReplyDelete
  147. congratulations guys, quality information you have given!!!

    buy cheap likes

    ReplyDelete
  148. Really useful and this blog is really helpful for newbies bloggers.
    HD Desktop Wallpapers

    ReplyDelete
  149. I get this message... The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.

    ReplyDelete
  150. Also, they removed the "Expand Widgets Template" option. I'm getting hung up on what to expand.

    ReplyDelete
  151. Hii admin i am running a blog name mbgadget and i want to add this tool on my site, when i add it shows in middle on the site, what should i do. ?

    ReplyDelete
  152. Fastidious blog you’ve got here. I’ve ever been seeing you just about many blogs recently.
    how to become instafamous

    ReplyDelete
  153. I dont know why but when i click Save template it says:
    The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements.

    ReplyDelete