Author Archives: Pharéo

How to float Jetpack’s social Sharing Buttons

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!

Nginx 1.8.0 “/usr/sbin/service: line 123: exec: reload: not found”

Recently, on one of our older servers, a Debian 6 installation, Nginx was upgraded to 1.8.0 from the dotdeb repos. The update went without any apparent errors, except one — easy to miss — message at the end:

/usr/sbin/service: line 123: exec: reload: not found

In fact, I had missed that and assumed all was fine but after a while the server went down and Nginx would not start again. At least, not after the usual nginx -t && service nginx reload

To my surprise, all other web services like php5-fpm, mysql etc. reloaded just fine with  service ... reload

A reboot did not start nginx either and service nginx start got a similar response:

/usr/sbin/service: line 123: exec: start: not found

Luckily, upon /etc/init.d/nginx start Nginx started correctly so I had my server running again. But I was not closer to finding the cause nor a solution.

Searching the web specifically for nginx 1.8 and debian 6 related issues did not reveal anything of interest. Only one question mentioning the issue in the comments on https://www.dotdeb.org/2015/05/07/nginx-1-8-0/ but it got no response.

I did find a bug report related to an entirely different service which mentioned the same error. And the solution there was to remove that service’s .conf file from /etc/init … so I looked in /etc/init and yes: there was an nginx.conf file there. And yes again: simply deleting it solved the problem!