So, I want to be able to insert a snippet within a post, or at the end, with social media sharing buttons. (I’m trying to get readers to do more sharing.)
I messed around with it by using the code for the sharing buttons at the top of the post, which are embedded within the theme files. Then it hit me: those use handlebar helpers for the post title and such, which won’t work inside an HTML code block within the post, since they are server-side.
So, is there a way to do this? I’ve got the block itself looking the way I want; but of course, it’s not functional, because there’s nothing there to capture any of the meta data (title, URL, excerpt, featured image).
Thank you! I gave your snippet a quick test, and it appears to work great. Tomorrow, I will expand it to the set I listed earlier, and let you know how it goes. (I will also study the script to add a little more to my personal understanding. )
Okay! Took some messing around, and I never did get the email link to work properly, but here is the code as it stands. Copy this to an HTML block, save it as a snippet with whatever name you want, then insert it into the body of a story to encourage more social media sharing. I didn’t include any other services, but you should be able to follow the pattern of these services to figure it out. Big thanks to Ryan for the help!
And remember, the line that starts if(window.clicky) is for the Clicky analytics service I use, so leave it out unless you use Clicky and want to track shares.
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. I added as many social medias as I could so everyone can edit the code and remove the ones they do not want and works on any theme.
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>
)