Add Floating Facebook Share & +1 Button Next To Posts in Blogger

floating sharing widgetEver wondered to create a Mashable type floating sharing widget for your blogger blogs? There you have it today! We released a sliding, scrolling widget last month which contained major social media sharing buttons but some of you complained that the widget do not work properly with the new blogger templates so to keep things more flexible, we are releasing yet another version of a floating widget which contains the best social buttons like Facebook Share/like, Twitter and Google +1 button. All in one. I have not used any scripts this time and this widget works purely on CSS and HTML and is fully compatible with all major browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible so be confident to try this one out to better increase your social engagement and thereby your page views.
 Did you check the Latest version? Floating Sharing With Pinterest and Others

Adding The Sticky Floating Widget Next To Blogger Posts

  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript widget
  3. Paste the following code inside it,
<style>
/*-------MBT Floating Sharing Widget------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.mybloggertricks.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>
     4.   Save your widget and drag it just below the post body as shown below,
floating-widget
      5.   Now finally Click the save button at the top right corner and you are all done!
save-button
View your blog to see it hanging just to the left of your blog post body.

Customization

To align the widget more towards the left or right then edit this value margin-left:-70px;  Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.
To Change the background colour of the floating widget then change this background:#fff;
Use our color generator or colour chart to select a colour.
If you wish to show the widget only on post pages and not the homepage then follow these steps.
Give this floating widget a temporary title then do this
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the Expand Widgets Templates Box
  4. Search for the title of the widget
  5. The code for the widget will look something similar to this one,
<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE'  type='HTML'>
<b:includable id='main'>
bla bla bla bla
</b:includable> </b:widget>
Once you find the title then add the following two green bolded codes just below and after the bolded black text. For example if you wish to show a widget at Homepage only then do this,

<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
bla bla bla bla
</b:if>
</b:includable> </b:widget>
Save your template and you have successfully stopped the widget display on homepage and allowed it on all post pages. For learning more about how to control the widget display then read:
If you liked this widget then please try tweeting and sharing this post using this new widget to your left. :) Peace and blessings brothers and sisters.

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 »

53 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. It looks like floating anywhere if you will look it into other screen resolution. Is there any solution for that?

    ReplyDelete
  2. Hello,

    I put this widget on my blog, but could not see +1 button. Only twitter and facebook share buttons are visible.

    ReplyDelete
  3. could we place a small text ad there instead of those buttons?

    ReplyDelete
  4. Hi Bro

    Can you write an article about Panda effect on Web Designers. I mean what should they keep in mind while designing templates or sites.

    ReplyDelete
  5. @Manuel
    This widget looks good in resolutions great than 800 by 600 and in smaller resolutions it will not be visible. Since majority of users don't use smaller resolutions anymore therefore it is best to use it now.

    @Hetal
    Sorry pal just updated the code. :>

    @seminyha
    Yes we can but that wont attract visitors towards itself.

    ReplyDelete
  6. @Sam
    As I mentioned they should tag archives, labels, social media links, profile links and other useless links as nofollow. This is enough for them. Hope this helps buddy.

    ReplyDelete
  7. Thanks! nice widget. I love it when I can just add the code as a widget/gadget rather than play with the "edit html" :-D

    ReplyDelete
  8. hey i want to know how to add tht tweet bird flyng

    ReplyDelete
  9. Mohammad,

    You are truly amazing! Thank you, kind Sir, for this widget - it will certainly make Blogging more constructive for me! :O)

    ReplyDelete
  10. @vidya

    This has been our priority always. :)

    @arun
    Try this brother:
    Flying twitter bird

    @Alwayn
    With consistent motivation from your side we will always be at your service buddy. Thank you to you too. :)

    ReplyDelete
  11. @ Mohmd, I'm experiencing the same problem as Hetal, the +1 button isn't loading. If its an updated widget, what could be the problem.

    ReplyDelete
  12. @Mohammad
    So do you mean even the links like About Us page etc. should be nofollow. Eg. About us link on homepage should be nofollow??

    ReplyDelete
  13. UPDATE
    If you already have +1 button added to your template and you decided to add this new widget then you must delete the following code from the widget code given above:

    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>


    @Felix
    I have answered your query in the update. :)

    @sam
    Of course not. Nofollow is meant only for dynamic pages when you are talking about links within your blog. Dynamic pages are URLS of label pages, comment links and older, new post links.

    Keep drop down menu links all as dofollow along with links that point to your posts.

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

    ReplyDelete
  15. Wow :)this is it

    ReplyDelete
  16. @ Mohmd, it worked, thanks again. Your magic always amazes me. Now I'll try hiding the widget on the homepage. I only want it to appear in the posts. Using your tutorial as a guide, how do I go identifying the widget of interest? Also, how do I label or title the widget's html so that i can identify it in my template. When I hide the widget of interest, I hope a space won't be visible on the location where it was initially located, rather a seamless hide out. Is this possible? Well, again keep up the good job

    ReplyDelete
  17. thanks for the tips! that was so easy for a beginner like me :)

    ReplyDelete
  18. Hey! I have added that to my blog but still widget is visible in posts. I have done what you have said but still same. Help me

    ReplyDelete
  19. How i can add Facebook Like button in this widget?

    ReplyDelete
  20. I would also like to Add a Facebook Like and Email button.
    I have an existing simple FB Like button. On adding this widget it seems the count for FB Share is same as my previous FB Like count.
    Thanks,
    Mehrin

    ReplyDelete
  21. @Mohammad Mustafa Ahmedzai

    Hello, Thanks for the reply. Anyway, how you made your +1 in your sidebar? I mean if i have +1 on my sidebar, the +1 will be go to the post where you are, but in your case, only the homepage can be +1 wherever post you are. Thanks.

    ReplyDelete
  22. thanks it work from me just fine! question,can i make it a little thiner? less fat sorry my english is not that good.
    thanks

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

    ReplyDelete
  24. Hello Mohammad,

    I am trying to have this code working for XSITEPRO any suggestion?

    Thanks,

    Armand

    ReplyDelete
  25. i tried to shift it to right by changing this code(margin-left:-70px;) but nothing
    any suggestions

    ReplyDelete
  26. i tried to shift it to right by changing this code(margin-left:-70px;) but nothing
    any suggestions

    ReplyDelete
  27. Hello Mohammad, First of all I want to say that I love this widget! Secondly I would like to ask if there is a way to add a facebook 'Like' button and a 'ShareThis' button to it? I was able to hack those into the other type of floating sharing widget but that used div class= instead of td and tr. I've played around with it and have had no luck adding them to this widget. I hope you can help me out. Many thanks!
    Jenni

    ReplyDelete
  28. thanks!
    its perfectly working for me!!!!
    How i can add Facebook Like button in this widget?

    ReplyDelete
  29. Mohammad , i luv you man... loved this widget !!! Mwah !!
    Keep up da good work bro...
    -Zampa Saurav

    ReplyDelete
  30. This is amazing !!
    Thanks a ton :)

    ReplyDelete
  31. hello Mohammed
    Thanks.I added it to my blog.

    http://techclient.blogspot.com

    But Facebook share button not working...please help me...

    ReplyDelete
  32. Cannot share posts on Facebook. I am directed to the share page, but nothing happens when I hit "share link"

    ReplyDelete
  33. thanks man cannot say it any better

    ReplyDelete
  34. After giving the code it worked well. But there is a faint outline of a white box in the pop up. It looks very odd in the Black background. I just copied and pasted your code. My website http://tipsoftech.blogspot.com
    Please answer this at techtips.blogspot@gmail.com

    I am really grateful to you for giving the code.

    Wasee Haque

    ReplyDelete
  35. HEY THIS IS COOL BUT IWANNA HAVE FACEBOOK LIKE TAB AS WELLIN THIS SLIDER PLZ INCLUDE THT TOO
    DUDE U R AWSUM:)
    GOD OF BLOGGING

    ReplyDelete
  36. I do not want the numbers to come as initially on installing it will show only zeros which will be bad on old posts as it can send a message that post is not worth reading. How we can achieve the same.

    ReplyDelete
  37. Thank You so much, this is so awesome great easy tutorial :)

    ReplyDelete
  38. الكود يعمل ولكن على اليمين فقط
    http://mzarita.blogspot.com

    ReplyDelete
  39. I implemented it and it works however the button appears just right after my post (like after the last word) or the other variation under the post title...
    How can I add this button next to my "share bar", the part you can click to leave a comment, you see the labels etc...

    ReplyDelete
  40. can you please tell me how to replace Facebook share button with Like button

    ReplyDelete
  41. brother i already added this to my blogger when i add floating socialmedia then the facebook like box did not show what is the problem in that

    ReplyDelete
  42. If I have other like buttons on the page will it update them when someone uses the widget and vica verca?

    ReplyDelete
  43. Please provide me this floating widget along with the Fblike, Stumbleupon, Digg and Linkedin too.

    ReplyDelete
  44. Hello Mohammad...This widget is awesome and I have added this to my blog
    http://geekyparigyan.blogspot.in/

    ReplyDelete
  45. how to add pinterest in this menu.?

    ReplyDelete
  46. twitter counter is not increasing in my blog :(
    WWW.pctipstricks.in try it :(

    ReplyDelete
  47. I add this widget work well but, Facebook Share button Could not appear. And also want help in add Facebook Like button on my blog.

    ReplyDelete
  48. Thank you for sharing this code. I see that it has fb, twitter and G+. How do I get the Pin it button included?

    ReplyDelete
    Replies
    1. I found it! I haven't gotten it to work just yet, but I found it. :)

      Delete
  49. i applying this tutorial on my blog ,but not work nothing to display the count

    ReplyDelete