Webtecho Blog

Floating bar on mobile / tablet and low res monitors

in Share Juice Pro

With every testing and review of Share Juice Pro, I received feedback to further improve its functions.

A major problem with the floating bar that hovers on the side of a single post or page is that it appears right in the middle of mobile phones and tablets.

This was pointed out by Plaban Manna in the review of the plugin and was also discussed in comments at Adrienne’s blog post Share Juice Pro: Plugin To Help You Increase Social Reach. He also provided other scenarios like behaviour of float bar at various screen sizes. We did some testing and realized that for screen size less than 800, float bar covers a sizable portion of the screen. For screen sizes > 800, the results are based on the space a theme allocates to the distance between border and text.

To resolve this , three things were done :

  1. Using a library (Mobile Detect ) from internet , Share Juice is now able to determine if the request for page is from mobile/tablet. If so, then it simply hides the float bar.
  2. If the screen size is less than 800, it hides the float bar. If it is more than 800, then it gives user option to click on a triangle and make share bar only 10px wide. If needed Share bar can be opened again by clicking on the triangle again.

image  -> image ->image

This solution manages the line between showing the bar and stopping it from obstructing the reading.

{ 6 comments… read them below or add one }

tushar May 23, 2013 at 11:50 am

Ideally; wouldn’t it be great if Share Juice Pro adds the same social sharing below or above (or both) content when viewport size is less than 800?

No other plugin does this for responsive themes.

Just a thought 🙂

Reply

Ashvini Kumar Saxena May 23, 2013 at 11:53 am

Hi Tushar,

If a user has already added social buttons above/below content, they are already visible in the mobile. The problem was only with float button. With share juice you can add the same button to all location by just checking a box.
I will take a look at this if requirement arise.
Thanks for your suggestion 🙂
Ashvini

Reply

Pankaj Gupta May 23, 2013 at 1:07 pm

Great. It will also help minimize loading speed of the blog. Is there any option to choose that small version rather than big one by default? If not then please make this also. I would like to show small version of share buttons.

Reply

Barry Wells May 23, 2013 at 4:01 pm

Hi Ashvini,

I also noticed this on my mobile when looking at my blog. So I swapped to below content but may have a look at using this again now that you’ve worked your magic 🙂

I’ve also noticed that the count numbers don’t display on Buffer of Facebook shares. I’ve noticed that on lots of blogs not just mine. Has anyone else said about that Ashvini?

Barry

Reply

Ashvini Kumar Saxena May 23, 2013 at 5:24 pm

Hi Barry,

Please try it out and let me know if you still see any problem :).
I think Buffer depends upon twitter and if twitter services do not work well, buffer might have an issue. Let us keep an eye out for this.

Reply

Praveen Rajarao May 24, 2013 at 1:52 am

Nice Ashvini, the flexibility to show the bar in a shrunken manner is a good feature, and am sure most of us would like to have it that way.

Good to know that you have also hidden the bar when viewing via a mobile device. It is somewhat irritating to see it come up with other plugins(which i currently have 🙂

Reply

Leave a Comment

Previous post:

Next post: