Share buttons on the post page

I built this for anyone who wants to use it and are’t savvy enough to edit the theme like me and still want any easy way to add sharing buttons.

Step 1: Put the large code as an HTML element on a page or post and then save it as a snippet to add social media sharing buttons to any page manually in the future.

Step 2: You then only need to put this small font awesome code in the header injection on the entire site to get the icons to actually show up.

<link rel="stylesheet" href="" integrity="sha512-..." crossorigin="anonymous" />

Note: I am not great at this so the email button only works on desktop, and the sharing icon beside the email icon will trigger a mobile phones native sharing features which then allows them to share it anywhere, including their email.

The social media icons will open and share in mobile apps if the user is on a mobile phone and had the app downloaded, otherwise it will try and share it in the default web browser.

If any one is an expert and know how to fix the issue with why the email button only works on desktop, please let us know how to update the code. The native sharing features is the work around, but I would like the native sharing button to only show on mobile since it doesn’t do anything on desktop. But not sure that is possible with out theme edit.

.share-button {
  background-color: #00BFFF;
  color: #FFFFFF;
  border: 1px solid #00BFFF;
  padding: 15px 40px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;

.share-button:hover {
  background-color: #FFFFFF;
  color: #000000;
  border-color: #00BFFF;

.share-icons {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
} {
  display: flex;

.share-icons button {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 0;
  margin: 5px;
  border-radius: 50%;
  background-color: #000000;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 40px;
  color: #FFFFFF;

.share-icons button i {
  color: #FFFFFF;

<button id="share-button" class="share-button" onclick="toggleShareDropdown()">

<div class="share-icons" id="share-icons">
  <button onclick="shareOnFacebook()"><i class="fab fa-facebook-f"></i></button>
  <button onclick="shareOnTwitter()"><i class="fab fa-twitter"></i></button>
  <button onclick="shareOnPinterest()"><i class="fab fa-pinterest"></i></button>
  <button onclick="shareOnLinkedIn()"><i class="fab fa-linkedin-in"></i></button>
  <button onclick="shareOnFlipboard()"><i class="fab fa-flipboard"></i></button>
  <button onclick="shareOnTelegram()"><i class="fab fa-telegram-plane"></i></button>
  <button onclick="shareOnWhatsApp()"><i class="fab fa-whatsapp"></i></button>
  <button onclick="shareOnReddit()"><i class="fab fa-reddit"></i></button>
  <button onclick="shareViaEmail()"><i class="fas fa-envelope"></i></button>
  <button onclick="shareNative()"><i class="fas fa-share-alt"></i></button>

function toggleShareDropdown() {
  var shareIcons = document.getElementById('share-icons');

function shareOnFacebook() {
  var sharedURL = location.href;
  var facebookShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareOnTwitter() {
  var sharedURL = location.href;
  var twitterShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareOnPinterest() {
  var sharedURL = location.href;
  var pinterestShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareOnLinkedIn() {
  var sharedURL = location.href;
  var linkedInShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareOnFlipboard() {
  var sharedURL = location.href;
  var flipboardShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareOnTelegram() {
  var sharedURL = location.href;
  var telegramShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareOnWhatsApp() {
  var sharedURL = location.href;
  var whatsAppShareURL = 'whatsapp://send?text=' + encodeURIComponent(sharedURL);, '_blank');

function shareOnReddit() {
  var sharedURL = location.href;
  var redditShareURL = '' + encodeURIComponent(sharedURL);, '_blank');

function shareViaEmail() {
  var sharedURL = location.href;
  var emailSubject = 'Check out this link';
  var emailBody = 'I found this interesting link and thought you might like it: ' + sharedURL;
  var mailToLink = 'mailto:?subject=' + encodeURIComponent(emailSubject) + '&body=' + encodeURIComponent(emailBody);
  window.location.href = mailToLink;

function shareNative() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // Mobile device, trigger native sharing
    var sharedURL = location.href;
    navigator.share({ url: sharedURL })
      .then(() => console.log('Shared successfully.'))
      .catch((error) => console.log('Error sharing:', error));
  } else {
    console.log('Native sharing not supported on this device.');

Hey, sorry, I’ve been having the same problem as well
when you say " Step 1: Put the large code as an HTML element on a page or post and then save it as a snippet to add social media sharing buttons to any page manually in the future."
Like, how exactly can I do this? sorry I know very little about html. I’d like to put the sharing buttons in all of the posts of my blog.

1 Like

These are the 4 steps to make and save a snippet for future use. (a snippet is just something you make and save for future use, so you don’t have to remake it each time)

These photos show you how to create a snippet and save it for future use in this case we just so happen to be saving an HTML option. But you can do this with anything that you make if you have things that you repeatedly want to use you save them as a snippet so you can just click on it in the future and not have to remake it. In this case you would be saving this as a snippet so that at the end of every article you can scroll down and find your saved snippet and put it on each page easily instead of having to redo the code each time.

Your saved snippets will then be shown as you can see mine in the last photo.

Once you have done this you must go to site settings - Injection Code- Place small code in header and save. (Not shown in this, I am only showing how to save the large code for future use. The large code is the engine, the small code is the style)

If you want to edit styles you chat gpt and tell it how you want to change colors or button style etc. Its a novice best friend, It will edit any code in seconds.

This is great. I’m pretty sure it doesn’t work on the email newsletter because the script is defining the URL on page load, which doesn’t happen in the email. That said, I’m not sure how to replicate the email share in the email itself. I’ve been searching and I’m not coming up with a way to dynamically pull the post permalink.

Ideally, there would be a ghost variable that can go into the share button when creating the post in the editor. So, you could create a button with a link like mailto:?subject=I think you will like this&body=Check out this page: {{permalink}} and then ghost would just render the permalink in the html. But, from my testing, it doesn’t work this way.

Maybe someone else has a potential fix?

I wish someone would publish a video on YouTube on how to do this. :o)

Hey Jetsetter, this is great! Exactly what I was looking for.
Only issue I have is icons not showing. I mean it’s just black.

Where is it getting the icon graphics from?
Or better, how can I fix it?
Cheers, appreciate the help

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

Thanks a ton for your feedback, thats great Cathy.

It won’t let me do 3 replies, so Justin if you see this it was my solution to that issue.

What I did for a work around for email share functionality was create an email only snippet that says

Step 1:
View Post Online and the share button below will let you share on any social media or text to a friend.

Step 2
And if you you preview your post as an email and click “View In Browser” before sending the email it will go ahead and give you a working correct URL to your newsletter even if you never publish it as a post.

Step 3
Paste that URL with “View Alert Online”

The email only snippet is so that if it is an actual published post, that message to email readers doesn’t show up.

Best I could come up with.
Screen Shot 2023-07-18 at 6.52.12 AM

1 Like

Cary, take the large code I provided and go create an HTML block and paste the code and then save it as a snippet for future use. Then just add the smaller tiny code in the sites code injection settings and you will be good to go. If you don’t know what we mean, research “Ghost snippets” and “Ghost Site Code Injection” and it will all click. I don’t have time for a video, but if you want me to log on to your site for you, I don’t mind it takes 30 seconds because the code is already built. But try on your own first, you need to understand snippets and injection or your ghost experience won’t be great.

This is great and simple, too. But, is there a way to pull the URL and title dynamically so that the snippet can just be added without modifying it each time? @The_Jetsetter_Cheap mentions a workaround with getting the “view in browser” option, but is there a simpler option?

It would be great if Ghost could natively integrate sharing on most popular social media platforms, including twitter, linkedin, facebook, instagram, whatsapp, threads, and more.


Yes. window.location.href returns the current url in JavaScript. So you’d set the values to be shared dynamically with JS.

1 Like

Hey Cathy, thanks for the help.
I did add the code in the site header but still.
My website is if you have a look, please.
I can’t figure this one out.

I visited your site and I see the big blue share button and the icons that pop up when I click it. The buttons seem to be working, too. Can you please explain what’s not working right? Can’t figure out what help you’re asking for! :)

well, this is what I see…

ohhh shoot. it’s the adblocker.
Thank you

1 Like

Hello Justin, the code I shared does automatically pull the current URL. I wouldn’t be able to explain why it isn’t doing that for you. I would ask Cathy, she’s the Ghost forum expert on matters that are above most of our heads.

Including both the site and all blog posts, then allow users to delete any they do not use. I’ve spent hours on trying to add these and may end up spending another our now, in part because there isn’t video with instruction either.

@The_Jetsetter_Cheap Per instruction, I’ve created a snippet for social media icons, but - like Zavrod - see only black circles when attempting to share. After reading the additional guidance, I’m unclear on how to fix this issue. Thoughts? Sharing the URL to the post with this snippet - What's New with NiT? 🤔

@cary, are you loading the icons? I think that’s what you’re missing.

Add this:

<link rel="stylesheet" href="" integrity="sha512-..." crossorigin="anonymous" />

To your code injection head. (either site wide or on any page you want the sharing to work)

1 Like

@Cathy_Sarisky, it’s working. Thank you! :slightly_smiling_face: