I want to show you how you can add social sharing to any website without installing any npm dependency or without including any third party service since those can introduce a lot of privacy concerns (at least for me).

All of social websites provide a way to share content via link. Where you can provide parameters like title, image, ect in the URL. Something like this (facebook example)

http://www.facebook.com/sharer/sharer.php?p[url]=URL_GOES_HERE

If you have a dynamic page and you have the data you need on the page during rendering you can construct the share link dynamically. In the following example I am using this snippet in the ghost blog that uses Handlebars as a template and conveniently I have access to the data of the post which I can use as the following:

<section class="post-full-social">
    Share on
    <a href="http://twitter.com/intent/tweet/?text={{title}}{{#if @site.twitter}} via {{@site.twitter}}{{/if}}&url={{url absolute="true"}}"
        target="_blank">twitter</a>,
    <a href="http://www.facebook.com/sharer/sharer.php?p[url]={{url absolute="true"}}&p[title]={{title}}"
        target="_blank">facebook</a>,
    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{url absolute="true"}}&title={{title}}"
        target="_blank">linkedin</a>,
    <a href="mailto:?subject={{title}}&body=You should check this out - {{url absolute="true"}}"
        target="_blank">email</a>
</section>

Which renders to this

And if you want to be fancy 😁 we can use some inline SVG instead of text.

<section class="post-full-social">
    Share on
    <a style="box-shadow: none;"
        href="http://twitter.com/intent/tweet/?text=Add social sharing to any website without any dependencies. via @seemsindie&amp;url=https://blog.seemsindie.com/p/617e500a-e771-4795-85c6-bde725a6ec82/"
        target="_blank"><svg width="28" height="28" aria-hidden="true" focusable="false" data-prefix="fab"
            data-icon="twitter-square" class="svg-inline--fa fa-twitter-square fa-w-14" role="img"
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z" />
        </svg></a>
    <a style="box-shadow: none;"
        href="http://www.facebook.com/sharer/sharer.php?p[url]=https://blog.seemsindie.com/p/617e500a-e771-4795-85c6-bde725a6ec82/&amp;p[title]=Add social sharing to any website without any dependencies."
        target="_blank"><svg width="28" height="28" aria-hidden="true" focusable="false" data-prefix="fab"
            data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img"
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor"
                d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z">
            </path>
        </svg></a>
    <a style="box-shadow: none;"
        href="https://www.linkedin.com/sharing/share-offsite/?url=https://blog.seemsindie.com/p/617e500a-e771-4795-85c6-bde725a6ec82/&amp;title=Add social sharing to any website without any dependencies."
        target="_blank"><svg width="28" height="28" aria-hidden="true" focusable="false" data-prefix="fab"
            data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img"
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor"
                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z">
            </path>
        </svg></a>
    <a style="box-shadow: none;"
        href="mailto:?subject=Add social sharing to any website without any dependencies.&amp;body=You should check this out - https://blog.seemsindie.com/p/617e500a-e771-4795-85c6-bde725a6ec82/"
        target="_blank"><svg width="28" height="28" aria-hidden="true" focusable="false" data-prefix="fas"
            data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img"
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor"
                d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
            </path>
        </svg></a>
</section>

Which in the end looks like this

If you found this useful please share it, because sharing is caring, thanks 😃