Share buttons on the post page

Using Ghost
13

Is it possible you need to load the font awesome still, @Zavrod ? See step #2 in @The_Jetsetter_Cheap 's excellent tutorial.

If that’s not it, this is almost certainly something else minor - if you can link the actual site, I can take a look for you.

This is not too hard:
Edit buttons you’d like to modify like this:

<button class="mobile-only-button" onclick="shareNative()"><i class="fas fa-share-alt"></i></button>

(Give each button that needs different behavior a different class name.)
And then change the styling of the button like this:

@media screen and (min-width: 769px) {
     .share-icons .mobile-only-button {
          display: none)
      }
}

That’ll cause your mobile only button to not show on anything 769px or wider. But it’s not perfect, because a really narrow desktop window is going to see it (not something I do often but…), and a big ipad is not…

A better option is to check if the sharing function is actually present. Here’s a demo:

On Windows 10, current version of Chrome, the share button is actually functional. (It’s experimental, so it may not work for you depending on your exact settings.)

Code’s at the link with the demo - you could use it to remove the share button when it is genuinely not going to work, rather than my bad size guessing above.

1 Like