Quick Share buttons

05 Apr 2019

There are many Share This implementations out there, but my goal with this one was to provide something that’s highly customizable, lightweight, and requires no external libraries.

HTML:

<div class="share">
    <p>Share this:</p>
    <a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="share-btn">Facebook</a> 
    <a href="https://twitter.com/share?url={url}&amp;text={text}" class="share-btn">Twitter</a> 
    <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={url}" class="share-btn">Linkedin</a> 
    <a href="mailto:?subject={subject}&amp;body={url}" class="share-btn">Email</a>
</div>

CSS:

.share {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }

.share a {
    font-size: 1rem;
    color: #00a990;
    padding: 0.5rem;
  }

JavaScript:

window.addEventListener('DOMContentLoaded', (e) => {
  var shareButtons = document.querySelectorAll(".share-btn");
  if (shareButtons) {
        [].forEach.call(shareButtons, function (button) {
            button.addEventListener("click", function (event) {
                var width = 650,
                    height = 450;
                event.preventDefault();
                window.open(this.href, 'Share Dialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=' + width + ',height=' + height + ',top=' + (screen.height / 2 - height / 2) + ',left=' + (screen.width / 2 - width / 2));
            });
        });
  }
}

Codepen:

See the Pen Quick Share Buttons by Vinicius Philot (@vphilot) on CodePen.