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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
To your code injection head. (either site wide or on any page you want the sharing to work)
2 Likes
@Cathy_Sarisky, it’s working. Thank you! 
2 Likes
Justin I am not seeing that I ever shared this, but addtoany.com is the only email sharing functionality I’ve ever found to work. Unfortunately you do have to provide the target url, but I just keep this page always up with my settings i already have set and it’s good to go.
I publish a blog post with the other share functions I published above without sending by email, then copy that post and then use this solution for email only. It’s not perfect solution, bc twice the work but only one I have found for email functionality. (be sure to select no script)
I’m hoping one day the team at Ghost will surprise us with built in functionality.
hey @The_Jetsetter_Cheap thanks for sharing this code, I successfully implemented it. however, since twitter has now become X, I would like the twitter icon to also appear updated. Could you please share an updated version of the code.
This creates a X icon
.gh-head-menu .nav-x a::before {content: “\e61b”}
if you use the code generator at
though the code generator is not designed for sharing, you might be able to figure out how to adapt it. ( {content: “\e61b”})
Thanks a lot for this! 
Got three questions:
- Any chance to update the Twitter to the X logo?
- Is it possible to have colored icons?
- What do I have to remove/add to the code in order to skip the “share” button, so the icons are there from the beginning (without having to click “Share” in order for them to appear)?
Thank you.
Best,
AB
No sign-up, no tracking, with auto-generated code, you can add sharing buttons to your Ghost posts even if you know nothing about code! :
Add Sharing Buttons to Ghost Posts
Yes, here is the updated code that removes the twitter and replaces it with X.
<style>
.share-button {
background-color: #6BAED6; /* Facebook blue */
color: #FFFFFF;
border: 1px solid #3b5998; /* Facebook blue */
padding: 15px 40px;
border-radius: 20px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
.share-button:hover {
background-color: #FFFFFF;
color: #3b5998; /* Facebook blue */
border-color: #3b5998; /* Facebook blue */
}
.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: #1da1f2; /* Twitter blue */
border: none;
cursor: pointer;
font-size: 20px;
line-height: 40px;
color: #FFFFFF;
}
.share-icons button:nth-child(2) {
background-color: #000000; /* X (formerly Twitter) black */
}
.share-icons button:nth-child(3) {
background-color: #bd081c; /* Pinterest red */
}
.share-icons button:nth-child(4) {
background-color: #0077b5; /* LinkedIn blue */
}
.share-icons button:nth-child(5) {
background-color: #e92626; /* Flipboard red */
}
.share-icons button:nth-child(6) {
background-color: #0088cc; /* Telegram blue */
}
.share-icons button:nth-child(7) {
background-color: #25d366; /* WhatsApp green */
}
.share-icons button:nth-child(8) {
background-color: #ff4500; /* Reddit orange-red */
}
.share-icons button:nth-child(9) {
background-color: #e4405f; /* Email red */
}
.share-icons button:nth-child(10) {
background-color: #333333; /* Share black */
}
</style>
</head>
<body>
<button id="share-button" class="share-button" onclick="toggleShareDropdown()">Share</button>
<div class="share-icons" id="share-icons">
<button onclick="shareOnFacebook()"><i class="fa-brands fa-facebook-f"></i></button>
<button onclick="shareOnX()"><i class="fa-brands fa-x"></i></button>
<button onclick="shareOnPinterest()"><i class="fa-brands fa-pinterest"></i></button>
<button onclick="shareOnLinkedIn()"><i class="fa-brands fa-linkedin-in"></i></button>
<button onclick="shareOnFlipboard()"><i class="fa-brands fa-flipboard"></i></button>
<button onclick="shareOnTelegram()"><i class="fa-brands fa-telegram-plane"></i></button>
<button onclick="shareOnWhatsApp()"><i class="fa-brands fa-whatsapp"></i></button>
<button onclick="shareOnReddit()"><i class="fa-brands 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 shareOnX() {
var sharedURL = location.href;
var xShareURL = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(sharedURL); // Still using Twitter's sharing URL
window.open(xShareURL, '_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>
This is a solution based on RyanF tutorials.
The post is in Brazilian Portuguese.