Hi guys,
I’ve struggling for hours to no avail in the pursuit of adding just a standard set of social media “share buttons”, that is, buttons to share my blog post on facebook or twitter etc.
I lookup the help center and even this forum, but no anwers yet.
I understand there is a connection with the “social media card” in the post menu, but good God it has been a hell to go through and still I can’t make any of it work!
I do not want a facebook or twitter page connected to my ghost website, I just want the user (and myself) to have the ability to share the post on the social media.
Ghost allows you to set custom structured data for both Twitter and Facebook in the post settings menu, which means your audience can share a URL to your content and it will automatically populate with a card on these social platforms.
Beyond that, if you want to add sharing icons at the bottom of each post to encourage people to share, then you’d either need to choose a theme that has this feature built in, customize your existing theme, or use an external tool.
Great, I’ll give that a try,
but just to make sure I understood,
everytime a user shares my content, say by copy-pasting the link in the browser on their Twitter or FB, then the card details I’ve previously set-up for each post, will automatically be loaded on the social then, right?
That’s correct - when people share the URL the information will be automatically pulled in from the details you’ve added in the post settings.
I would recommend adding meta data to the post at minimum, which will be used by most social networks when your posts are shared (including Twitter and Facebook). The Twitter and Facebook sections within the post settings can be used if you want to have different sharing cards for each of those platforms.
Sounds like Ghost is too technical for Substack users. I am looking into Ghost and leave Substack since they have gotten into a conflict with Twitter and my publishing on Substack is trashed.
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.
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.
<style>
.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;
}
.share-icons.show {
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;
}
</style>
<button id="share-button" class="share-button" onclick="toggleShareDropdown()">
Share
</button>
<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>
</div>
<script>
function toggleShareDropdown() {
var shareIcons = document.getElementById('share-icons');
shareIcons.classList.toggle('show');
}
function shareOnFacebook() {
var sharedURL = location.href;
var facebookShareURL = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(sharedURL);
window.open(facebookShareURL, '_blank');
}
function shareOnTwitter() {
var sharedURL = location.href;
var twitterShareURL = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(sharedURL);
window.open(twitterShareURL, '_blank');
}
function shareOnPinterest() {
var sharedURL = location.href;
var pinterestShareURL = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(sharedURL);
window.open(pinterestShareURL, '_blank');
}
function shareOnLinkedIn() {
var sharedURL = location.href;
var linkedInShareURL = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(sharedURL);
window.open(linkedInShareURL, '_blank');
}
function shareOnFlipboard() {
var sharedURL = location.href;
var flipboardShareURL = 'https://share.flipboard.com/bookmarklet/popout?v=2&title=&url=' + encodeURIComponent(sharedURL);
window.open(flipboardShareURL, '_blank');
}
function shareOnTelegram() {
var sharedURL = location.href;
var telegramShareURL = 'https://telegram.me/share/url?url=' + encodeURIComponent(sharedURL);
window.open(telegramShareURL, '_blank');
}
function shareOnWhatsApp() {
var sharedURL = location.href;
var whatsAppShareURL = 'whatsapp://send?text=' + encodeURIComponent(sharedURL);
window.open(whatsAppShareURL, '_blank');
}
function shareOnReddit() {
var sharedURL = location.href;
var redditShareURL = 'https://www.reddit.com/submit?url=' + encodeURIComponent(sharedURL);
window.open(redditShareURL, '_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.');
}
}
</script>
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.
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.
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.
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.
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.
Hey Cathy, thanks for the help.
I did add the code in the site header but still.
My website is www.ratelian.cz if you have a look, please.
I can’t figure this one out.
Thanks
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! :)
