Jetpack’s Sharing module is great. It creates some fine looking social buttons that fit most any website. But there is one downside: they’re only showing at the bottom of a post or page.
Some other social plugins offer floating buttons, said to be far more effective in getting your content shared. And while I don’t know for sure if that is true, it sounds plausible. So let’s try to float Jetpack’s buttons too, shall we?
Where to place the sharing buttons
The best place would be not far from the content, in the left or right margin. But what looks best? And is there place for a vertical floating bar of about 50 pixels wide? It all depends on your theme and the visitors browser window or screen size.
First, let’s start with the basic style rules to float the buttons and make the bar appear presentable.
Since you must be using Jetpack already with the Sharing module activated (no point in following this how-to if you’re not) just go on and activate the Custom CSS module too. Start with adding the following rules to your new Appearance > Edit CSS admin page.
/* basic floating and box style, positioned about half way
* down the screen to the left of the content */
div.sharedaddy {
position: fixed;
top: 38%;
margin-left: -82px;
width: 32px;
background-color: white;
padding: 25px 15px;
text-align: center;
}
/* hide some stuff */
div.sharedaddy h3.sd-title,
.sd-social-icon .sd-content ul li a.sd-button.share-more span,
div.sharedaddy li.share-end {
display: none;
}
/* make the more button fit */
.sd-social-icon .sd-content ul li a.sd-button.share-more {
margin: 0;
padding: 4px 7px;
}
/* compact some more */
.sd-content ul {
margin: 0 !important;
}
Note that the negative margin-left: -82px;
makes the whole bar shift to the left. Adjust this to move it far enough to float nicely beside your post content. The background colour should of course be adapted to fit your theme too.
But this is not going to work well when there is no room for the floating social bar. On smaller screens, the box will be pushed out of view and becomes useless. So we’ll have to start doing some calculations and we’ll need to apply these rules only to screens sizes that allow room for the floating bar.
An example
Let’s take for example the TwentyTwelve theme that is used (at the time of writing) on this site.
The maximum width of the content (post plus sidebar) is 960 pixels plus a margin of 40 px on each side, 1040 px in total. The whole thing is centered so if a browser window is wider than 1040 pixels, there is a margin going to show on the left and right. If the browser window is wider than 1040 + 50 + 50 = 1140 pixels then there should be just enough room for a floating bar on the left side, close to the post’s main content. We’ll also need to allow room for the scroll bar on larger posts in this calculation (because many browsers do not take this into account on their own) so we’ll add another 20px for safety.
Now to only apply your style rules to screen sizes wider than 1160 pixels, wrap them in @media rules like this.
@media screen and (min-width: 1160px) {
...
}
What about smaller screen sizes?
In case of TwentyTwelve, there is some room between the post content and the right sidebar which can be used. But there are some pitfalls to consider.
For example: when a page uses a full width (no sidebar) template, the floating box might suddenly cover page content. Or some post format or post types have different padding, making the floating box location shift and partly cover the sidebar. Or when the option to show sharing buttons on archive and blog pages is checked, multiple sharing bars will start covering each other.
Generally, you only want the social icons bar to float on individual posts and pages, not on archives. And when there are special templates used, another position might be needed.
So to avoid problems, you will have to adapt and make your style rules more specific. How to do this, again, depends on your theme. You’ll have to study the existing rules in the theme style sheet and any available classes that are appended to the body tag when using a page template or (custom) post type.
Below is a complete working example for TwentyTelve, currently (at the time of writing) being used live on this site. Notice the use of classes like .page-template-default and .single-format-standard to target specific cases.
/* floating social */
@media screen and (min-width: 720px) {
.page-template-default div.sharedaddy, .single-format-standard div.sharedaddy {
position: fixed;
top: 44%;
left: 65.104166667%;
width: 32px;
text-align: center;
}
.page-template-default div.sharedaddy h3.sd-title, .single-format-standard div.sharedaddy h3.sd-title, .page-template-default .sd-social-icon .sd-content ul li a.sd-button.share-more span, .single-format-standard .sd-social-icon .sd-content ul li a.sd-button.share-more span, div.sharedaddy li.share-end {
display: none;
}
.page-template-default .sd-social-icon .sd-content ul li a.sd-button.share-more, .single-format-standard .sd-social-icon .sd-content ul li a.sd-button.share-more {
margin: 0;
padding: 4px 7px;
}
.page-template-default .sd-content ul, .single-format-standard .sd-content ul {
margin: 0 !important;
}
}
@media screen and (min-width: 1060px) {
.page-template-default div.sharedaddy, .single-format-standard div.sharedaddy {
left: initial;
margin-left: 637px;
}
}
@media screen and (min-width: 1150px) {
.page div.sharedaddy, .single-format-standard div.sharedaddy {
top: 38%;
margin-left: -72px;
padding: 25px 5px 25px 15px;
background: linear-gradient(to right,#eee,white,white);
border-radius: 24px 12px 12px 24px;
box-shadow: rgba(0,0,0,.3) -5px 0 3px;
}
}
You can see how there are now different @media sections, for different screen sizes. In this case, the vertical floating bar starts at a 720 pixel wide screen, positioned to the right of the content. Then, from 1150px onward, it will show on the left side.
To target only pages using the default template and posts of the normal post format, .page-template-default
and .single-format-standard
are used. In all other cases, the rules will not apply and the social sharing icons will show below the content as before.
Please note that these classes may not be available in your theme. You’ll have to find out which classes you can use in your case by opening the browser Developer Tools.
I hope this gave some inspiration to start playing around with CSS3 @media rules for your Jetpack social sharing buttons. Have fun!
13 Comments
FYI: You still haven’t given the CSS for a “fixed” element. Your statement even says that: “…positioned about half way down the screen to the left of the content.”
Hi James, that would be the position:fixed that follows right after it:
div.sharedaddy {
position: fixed;
…
Oh! It says “38%” from the top, but that means it stays at 38% from the top in a fixed position. Ok, thank you. It’s not staying in a fixed position for me for our website, that’s why I thought you coded it wrong.
Thanks for replying. 🙂
Blessings,
Hi James, it sounds like there are some style rules conflicting. Maybe your theme? If you can share a link, I can take a quick look if you want 🙂
That’d be great! Thank you.
http://www.LeesleyFilms.net/
The theme I’m using is Supernova.
Supernova by “TheGravity”
Can you activate the sharing buttons and the custom css with sharedaddy style rules? I need to see it live 🙂
Sharedaddy? I haven’t heard of it. Perhaps that’s the problem.
Sharedaddy is used by Jetpack’s share buttons module. Pharéo is referring to the style rules in this article…
Thanks for your input, Ravanh.
Pharéo, would you just want access to the back-end of the website?
Thanks
There is a problem when shown in the blog posts page. Since all posts have sharing buttons, the blog posts page shows them all. How do I display one side bar only on the blog post page.
Hi Lloyd, that’s indeed a problem that cannot be worked around. To show share buttons on the side, those buttons will need to be “for that particular page/post address” but Jetpack will not show share buttons for the blog page itself, it shows share buttons for each post on that page instead.
So even if you could (it should be possible) hide all share buttons except one button set and then move that to the side with CSS, this would not address the issue that those buttons will share the URL of a particular post, not the blog page URL.
You’ll either have to deactivate the share buttons on blog and archive pages or use specific style rule designators (like used in the example for Twenty Twelve) to not float the buttons on archive pages… Only alternative would be to use other similar share buttons (not from Jetpack) on these archive/blog pages, though a template modification or widget.
you are awesome thank you brother 🙂 love your post