August 30, 2011

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 »

72 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. 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. @ 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
  16. nice post dear....i have applied it in my blog...gowidrajput.blogspot.com

    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. Nice widget...but how do we add rss here? I want to put some rss subscribers. Thanks in aldvance.

    Check out my blog to see. <a href="http://latest-philippine-news.blogspot.com/'> Philippine News </a>

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

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

    ReplyDelete
  28. 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
  29. http://awaztube.blogspot.com here Google Plus One Missing for me!!! Please help me

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

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

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

    ReplyDelete
  33. nice & useful post.thnx for sharing bro.check this also it will be useful.

    how to add any share button you want to this widget

    http://www.tech-cave.com/2011/12/add-any-share-botton-to-floating-share.html

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

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

    http://techclient.blogspot.com

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

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

    ReplyDelete
  37. Your article is very wonderful,looking forward your next post what you said is so perfect,and give me great help,i am agree with you ,thank you very much............


    plastic surgery pricing

    ReplyDelete
  38. 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
  39. 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
  40. PLEASE ADD FACEBOOK LIKE IN THIS IT ALWAYS GET MORE SHARES:)

    ReplyDelete
  41. HI THIS IS OFF TOPIC BUT U DIDNT REPLIED MY PREVIOUS COMMENTS ON TOPIC RELATED TO FLOATING SHARING BUTTON,WEN I USE THESE SAME FLOTING SHARE BUTTON THAT U USE MY BLOG NAME APPEAR FIRST THAN POST TITLE WHEN SHARED ON FACE?WHAT SHOULD I DO THAT MY POST TITLE SHOULD APPEAR FIRST THAN BLOG TITLE? PLZ HELP

    ReplyDelete
  42. 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
  43. Thank You so much, this is so awesome great easy tutorial :)

    ReplyDelete
  44. @Alwyn Ash
    I have also added it to my blog with StumbleUpon Button also
    www.linkstoweb.in

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

    ReplyDelete
  46. 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
  47. can you please tell me how to replace Facebook share button with Like button

    ReplyDelete
  48. 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
  49. If I have other like buttons on the page will it update them when someone uses the widget and vica verca?

    ReplyDelete
  50. Assalamualaikum. Thanks Mohammad for your successful tutorial. I have done it.
    http://freeware9.blogspot.com/

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

    ReplyDelete
  52. Is it normal for the widget to have a zero for the Tweet and the G+1, but not above the Facebook Share? Obviously when you add to them, they increment and the Facebook shows up with a number once it is shared. I just would like a consistent look.

    WG
    http://itsmynd.com

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

    ReplyDelete
  54. nice post.You can increase your traffic with this widget.It will encourage users to share your content.thnx for sharing.check this also it will be useful.

    how to add any share button you want to this widget

    how to add any share button you want to this widget

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

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

    ReplyDelete
  57. Thank you for this widget. I'm using it on my site www.nba2k.org I also like your background color it gives a vibrant color. Thanks again.

    ReplyDelete
  58. Thanks Mohd , using it on mine http://hiqualityarowanahub.blogspot.com/...thanks once again, Assalamualaikum

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

    ReplyDelete
  60. 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
  61. 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
  62. Wasp dudes! Amazing stuff continues the good work.

    buy cheap likes

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

    ReplyDelete