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>
5 Likes
2

@akhil_bvs awesome! thank you :heart_eyes:

3

Inspired by this, in case you want to have a button to open WhatsApp chat:

<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;
    }

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

<button id="whatsappButton" aria-label="WhatsApp">
    WhatsApp
</button>

<script>
    const whatsappUrl = "https://wa.me/YOUR_FULL_WHATSAPP_NUMBER";

    document.getElementById("whatsappButton").addEventListener("click", function() {
        window.open(whatsappUrl, "_blank");
    });
</script>
1 Like
4

Thanks for this! It’s amazing!

How would you tweak this for the phone number to be variable?

More precisely, in my app, I’m listing some businesses and would need the URL to be different for each. I’m using an Airtable integration

5

@funkycoldmedina
You can try to hardcode different numbers based on different pages if it is good enough. Insert the custom code on the page level instead of the app level, and change the code so the right phone number will be different on each page.

If you want to get an actual variable that is changing, I need to get more details to be able to help

6

Hi mate!

It’s a people directory, so each person has a different number and hardcoding is not possible.

I would need to feed this button with a Whatsapp URL I have already created in Airtable, but that is variable for each user. I’m planning to add this button to a detail view.

The expected result would be quite simple: you get to a person’s detail page through a list, and then a WhatsApp sticky button should appear to send a message to that person.

7

Awesome share @akhil_bvs :raised_hands:

Just used it on my latest side project but updated to use Action buttons, this code assumes share is the first action button:

window.addEventListener('load', function() {
    setTimeout(function() {

    let buttons = document.querySelectorAll('[data-action-button-id]');

    if (buttons.length > 0) {
        buttons[0].addEventListener('click', function(event) {
            console.log('Share button clicked');
            event.preventDefault(); // Prevent the default anchor behavior
            handleDesktopShare();
        });
    }

    document.getElementById("shareUrl").onclick = function() {
        this.setSelectionRange(0, this.value.length);
    }

    }, 800);

});

PS Updated the links to use the logos:

        <div style="display: flex; space-between; margin: 15px 0;">
            <a href="#" id="twitterShare" target="_blank" class="share-link"><i class="fa-brands fa-twitter fa-2x"></i></a>
            &nbsp;&nbsp;<a href="#" id="instaShare" target="_blank" class="share-link"><i class="fa-brands fa-instagram fa-2x "></i></a>
            &nbsp;&nbsp;<a href="#" id="whatsappShare" target="_blank" class="share-link"><i class="fa-brands fa-whatsapp fa-2x"></i></a>
        </div>