Social Sharing Functionality [Sticky Button]

Custom Coding
,
1

I’ve crafted a code snippet for seamlessly integrating a social sharing feature into the website:

Demo : https://www.shopdrops.xyz/

What does this do?

Let’s you add a Sticky Floating Button on the bottom right, this button is always within your user’s reach as they navigate the website.

On Desktop - Clicking the button shows up a modal with sharing options.
On Mobile - It invokes the device’s native sharing function for a more familiar user experience.

Feel free to integrate this into your site. Just drop it into your custom code section and tweak as necessary to align with your brand or design preferences.

Here’s the code :

<style>
    /* Styles for the emoji wave animation */
    @keyframes wave {
        0%, 100% { transform: rotate(-10deg); }
        50% { transform: rotate(10deg); }
    }

    #emojiWave {
        display: inline-block;
        animation: wave 1.5s ease-in-out infinite;
    }

    /* Modal Styles */
    #shareModal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.4);
    }

    #shareModal .modal-content {
        background-color: #FFFFFF;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 350px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        border-radius: 24px;
    }

    .share-link {
        color: #007BFF;
        text-decoration: none;
    }

    .share-input {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
    }

    .close-btn {
        float: right;
        background-color: #007BFF;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 4px;
    }

    #shareButton {
        position: fixed;
        bottom: 10px;
        right: 10px;
        padding: 10px 20px;
        background-color: #063431;
        color: #fff;
        border: none;
        border-radius: 1000rem;
        cursor: pointer;
        box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    }
</style>

<!-- The Modal -->
<div id="shareModal">
    <div class="modal-content">
        <h2>Share this page</h2>
        <p>Choose a platform:</p>
        <div style="display: flex; justify-content: space-between; margin: 15px 0;">
            <a href="#" id="twitterShare" target="_blank" class="share-link">Twitter</a>
            <a href="#" id="linkedinShare" target="_blank" class="share-link">LinkedIn</a>
            <a href="#" id="whatsappShare" target="_blank" class="share-link">WhatsApp</a>
        </div>
        <p>Or copy the link below:</p>
        <input type="text" id="shareUrl" value="https://www.shopdrops.xyz/" readonly class="share-input">
        <button class="close-btn" onclick="toggleModal()">Close</button>
    </div>
</div>

<button id="shareButton" aria-label="Share with Friends">
    Share with Friends <span id="emojiWave">👋🏻</span>
</button>

<script>
    const shareMessage = "Hey 👋,\n\nI came across this site and thought you might find it interesting.\n";

    document.getElementById("shareButton").addEventListener("click", function() {
        if (navigator.share) {
            navigator.share({ text: shareMessage + " " + window.location.href })
                .then(() => console.log('Thanks for sharing!'))
                .catch(console.error);
        } else {
            handleDesktopShare();
        }
    });

    function handleDesktopShare() {
        const shareUrl = document.getElementById('shareUrl');
        shareUrl.value = window.location.href;

        const encodedMessage = encodeURIComponent(shareMessage);
        const encodedUrl = encodeURIComponent(window.location.href);

        document.getElementById("twitterShare").href = `https://twitter.com/intent/tweet?text=${encodedMessage}&url=${encodedUrl}`;
        document.getElementById("linkedinShare").href = `https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedMessage}`;
        document.getElementById("whatsappShare").href = `https://wa.me/?text=${encodedMessage} - ${encodedUrl}`;

        toggleModal();
    }

    function toggleModal() {
        const modal = document.getElementById('shareModal');
        modal.style.display = modal.style.display === 'none' || modal.style.display === '' ? 'block' : 'none';
    }

    // Allow users to click on the input and select all text easily
    document.getElementById("shareUrl").onclick = function() {
        this.setSelectionRange(0, this.value.length);
    }
</script>
1 Like
2

@akhil_bvs awesome! thank you :heart_eyes: