How to Create Social Media Share Buttons with Privacy

• Adam Douglas

• Published Jan 11, 2023
• Revised Jan 25, 2023

• web
• #100DaysToOffload #privacy #webdev

We all love to share the things we enjoy, and it just makes it that much easier to do when a website provides convenient social media share buttons. The unfortunate part for far too many years, these buttons have turned into something that far more than just sharing. Once implemented into a website they start to track you even without the use of the buttons. The level of tracking really depends on circumstance, and how the social media buttons were implemented. Instead of getting into the nasty details lets just focus on how can we take as much control back, but still have the capability of allowing someone to share a website link from your own website to various social media platforms.

Social Media Buttons

We cannot stop tracking entirely, but we can try to help protect your website visitors by following some key rules when it comes to integrating social media buttons into your own website.

• Do not use plugins
• Do not use add-ons
• Do not use social media button generators
• Do not use remote icons/images
• Do not use remote JavaScript
• Do not use themes with social media buttons built in
• Use only HTML and CSS
• Use local social media icons/images
• Use JavaScript only for copy to clipboard

Of course there are exceptions to what I’ve listed above. Some plugins, add-ons, etc. may be genuine, and purely do what they are intended to do and nothing more. All I’m trying to say is keeping things simple is key by not over complicating the feature. I would go farther and say to use only pure/vanilla JavaScript, meaning without libraries or frameworks.

How Do The Share Buttons Work?

What I’m doing to add this feature to my own website is nothing groundbreaking. It just uses the links each social media platform provides in order to share content. Each link will be crafted to contain the following information, though keep in mind the tags are not always possible.

• Website link
• Website link title
• Website link tags

How to Create Share Buttons

This feature can be added to any website as long as the logic and information is provided to build the links as shown. An example of this could be converting the Liquid template language code to PHP. The key is to at least use the HTML code provided below when building your own social media share buttons. Let’s get started.

The following code is a Jekyll include file called “share.html”. The first line loads another include file called “tags_to_csv.html”. See just below the first code block for further explanation. Add a include to load the “share.html” file to where ever you wish for the share buttons to appear.

{% include tags_to_csv.html %}

<div>
    <p class="fw-bold mb-2">Share</p>
    <ul class="nav social-list social-list-hover nav-pills">
        <li class="nav-item">
            <a href="https://www.facebook.com/sharer/sharer.php?u={{site.url}}{{page.url}}&t={{page.title | url_encode}}" title="Share on Facebook" rel="external noreferrer noopener" target="_blank" aria-label="Share on Facebook" class="nav-link">
                <span aria-hidden="true" class="icon icon-facebook"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="https://twitter.com/intent/tweet?text={{page.title | url_encode}}&url={{site.url}}{{page.url}}&hashtags={{tagscsv}}" title="Share on Twitter" rel="external noreferrer noopener" target="_blank" aria-label="Share on Twitter" class="nav-link">
                <span aria-hidden="true" class="icon icon-twitter"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="https://www.reddit.com/submit?title={{page.title | url_encode}}&url={{site.url}}{{page.url}}" title="Share on Reddit" rel="external noreferrer noopener" target="_blank" aria-label="Share on Reddit" class="nav-link">
                <span aria-hidden="true" class="icon icon-reddit"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="https://pinterest.com/pin/create/button/?url={{site.url}}{{page.url}}&description={{page.title | url_encode}}&media={{site.url}}/img/posts/{{page.img}}" title="Share on Pinterest" rel="external noreferrer noopener" target="_blank" aria-label="Share on Pinterest" class="nav-link">
                <span aria-hidden="true" class="icon icon-pinterest"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="https://www.tumblr.com/share/link?url={{site.url}}{{page.url}}&name={{page.title | url_encode}}&description={{page.excerpt | strip_html | url_encode}}" title="Share on Tumblr" rel="external noreferrer noopener" target="_blank" aria-label="Share on Tumblr" class="nav-link">
                <span aria-hidden="true" class="icon icon-tumblr"></span>
        	</a>
        </li>
        <li class="nav-item">
            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{site.url}}{{page.url}}" title="Share on LinkedIn" rel="external noreferrer noopener" target="_blank" aria-label="Share on LinkedIn" class="nav-link">
                <span aria-hidden="true" class="icon icon-linkedin"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="https://api.whatsapp.com/send?text={{page.title | url_encode}}&nbsp;{{site.url}}{{page.url}}" title="Share on WhatsApp" rel="external noreferrer noopener" target="_blank" aria-label="Share on WhatsApp" class="nav-link">
                <span aria-hidden="true" class="icon icon-whatsapp"></span>
        	</a>
        </li>
        <li class="nav-item">
            <a href="https://telegram.me/share/url?url={{site.url}}{{page.url}}&text={{page.title | url_encode}}" title="Share on Telegram" rel="external noreferrer noopener" target="_blank" aria-label="Share on Telegram" class="nav-link">
                <span aria-hidden="true" class="icon icon-telegram"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="mailto:?subject={{page.title}}&body={{site.url}}{{page.url}}" title="Share via email " rel="external noreferrer noopener" target="_blank" aria-label="Share via email" class="nav-link">
                <span aria-hidden="true" class="icon icon-email"></span>
            </a>
        </li>
        <li class="nav-item">
            <a href="{{site.url}}{{page.url}}" title="Copy link" rel="external noreferrer noopener" target="_blank" aria-label="Copy share link" class="nav-link" data-clipboard-text="{{site.url}}{{page.url}}" id="copy-site-link">
                <span aria-hidden="true" class="icon icon-link"></span>
        	</a>
        </li>
    </ul>
</div>

This is the “tags_to_csv.html”, it’s entire job is to convert a post’s hashtags to a comma delimited string (e.g. 100DaysToOffload,webdev,privacy).

{% if page.tags.size > 0 %}
    {% for tag in page.tags %}
        {% if forloop.first %}
            {% capture tagscsv %}{{ tagscsv }}{{ tag }}{% endcapture %}
        {% else %}
            {% capture tagscsv %}{{ tagscsv }},{{ tag }}{% endcapture %}
        {% endif %}
    {% endfor %}
{% endif %}

To style and apply the icons I used Syntactically Awesome Style sheets (SASS), to help reduce the amount of Cascading Style Sheets (CSS) lines that I had to write.

$icons:
    //name, filename, width (rem), height (rem), background color (hover)
    ('email', 'envelope-solid.svg', 2, 2, '#ddd')
    ('facebook', 'facebook-f-brands.svg', 2, 2, '#ddd')
    ('link', 'link-solid.svg', 2, 2, '#ddd')
    ('linkedin', 'linkedin-in-brands.svg', 2, 2, '#1d9bf0')
    ('pinterest', 'pinterest-p-brands.svg', 1.4, 2, '#ddd')
    ('reddit', 'reddit-alien-brands.svg', 2, 2, '#ff4500')
    ('telegram', 'telegram-plane-brands.svg', 2, 2, '#ddd')
    ('tumblr', 'tumblr-brands.svg', 2, 2, '#ddd')
    ('twitter', 'twitter-brands.svg', 2, 2, '#1d9bf0')
    ('whatsapp', 'whatsapp-brands.svg', 2, 2, '#00e676')
;

.icon {
    width: .875rem;
    height: 1rem;
    display: inline-block;
    content: '';
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #808080;
    vertical-align: text-bottom;
}
@each $name, $filename, $width, $height, $color in $icons {
    .icon-#{$name} {
        -webkit-mask: url("/assets/img/icons/#{$filename}") no-repeat 50% 50%;
        mask: url("/assets/img/icons/#{$filename}") no-repeat 50% 50%;
        @if $width {
            width: #{$width}rem;
        }
        @if $height {
            height: #{$height}rem;
        }
    }
    @if $color {
        .social-list a:active .icon-#{$name},
        .social-list a:focus .icon-#{$name},
        .social-list a:hover .icon-#{$name} {
            background-color: #{$color};
        }
    }
}

Copy to Clipboard

I’ve opted to also add copy to clipboard in my share buttons. This may not be for everyone, though you would be surprised how many are not even aware how to do this. Either way for those that are interested I chose to use a local copy of clipboard.js, a long with some initialization code below.

The JavaScript code creates an event to listen for a click that has an element with an attribute ID of “copy-site-link”. When the link is copied successfully a tool tip will appear with a message of “Copied link”, and then disappear. Otherwise, an error message of “Failed to copy link” will appear as the tool tip.

document.addEventListener('DOMContentLoaded', function () {
    document.body.addEventListener('click', function (e) {
        if(e.target.parentNode.matches("[id$='copy-site-link']")) {
            e.preventDefault();
            var clipboard = new ClipboardJS('#copy-site-link');
            clipboard.on('success', function(e) {
                let trigger_click = e.trigger;
                trigger_click.setAttribute('title', 'Copied link');
                let tooltip = new bootstrap.Tooltip(trigger_click, { trigger: 'manual' });
                tooltip.show();
                hideTooltip(tooltip, 1000);
                trigger_click.setAttribute('title', 'Copy link');
            });
            clipboard.on('error', function(e) {
                let trigger_click = e.trigger;
                trigger_click.setAttribute('title', 'Failed to copy link');
                let tooltip = new bootstrap.Tooltip(trigger_click, { trigger: 'manual' });
                tooltip.show();
                hideTooltip(tooltip, 1000);
                trigger_click.setAttribute('title', 'Copy link');
            });
        }
    });
});

function hideTooltip(element, delay) {
    setTimeout(function() {
        element.hide();
    }, delay);
}

Now to load the JavaScript code, add the following in the exact order as shown to you the desired layout page.

<script src="/assets/js/clipboard.min.js"></script>
<script src="/assets/js/clipboard-init.js"></script>

Where Do I Get Icons?

I would recommend using SVG Repo, or Font Awesome Free.

This is post 86 of 100, and is round 2 of the 100 Days To Offload challenge.

References

• CSS, Wikipedia
• Hashtag
• HTML, Wikipedia
• Sass (stylesheet language), Wikipedia

Changelog

• Jan 25, 2023
  • Fix 100 Days To Offload message

Comments

Reply via email

Share