Share buttons

Buttons to share the current page to social networks

Browser issues

When available, we make use of the Web Share API. The API uses the native share dialog to enable sharing to whichever apps the user has installed on their phone.
When the API is not supported, we fall back to a modal with separate buttons for sharing to Twitter and Facebook, as well as a button for copying a link to the current page to the clipboard.

How they look

On mobile, a native share dialog will open instead of the modal.

320 x 568

View code

    
<div class="gg-c-share gg-u-text-center">
  <button data-target="share-button" class="gg-c-share__button">
    <svg
      class="gg-c-share__icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M17.9 14.5c-1 0-1.9.5-2.5 1.2-2.2-1.3-4.4-2.3-6.6-3.4v-.4-.2c2.3-1.1 4.5-2.3 6.9-3.6.5.4 1.1.7 1.7.8.2.1.3.1.4.1 1.7 0 3-1.4 3.1-3 0-1.7-1.3-3.1-3-3.1s-3.1 1.3-3.1 3c0 .4.1.7.2 1l-6.6 3.4C7.8 9.5 6.9 9 5.8 9c-1.7 0-3.1 1.4-3.1 3.1 0 1.7 1.4 3.1 3.1 3.1 1.1 0 2-.6 2.6-1.5l6.5 3.4c0 .1-.1.3-.1.4-.1 1.7 1.3 3.1 3 3.2 1.7 0 3.1-1.3 3.1-3s-1.3-3.2-3-3.2zm-.1-10.3c2.2 0 2.2 3.3 0 3.4-2.1 0-2.2-3.4 0-3.4zM7.1 13c-.3.4-.7.8-1.3.8-2.1-.1-2.1-3.4 0-3.4.5 0 .8.2 1.1.5.3.3.5.7.5 1.2 0 .3-.1.6-.3.9zm10.7 6.3c-2.2-.1-2.2-3.4 0-3.4s2.2 3.3 0 3.4z"
        fill="currentColor"
      />
    </svg>
    <span class="gg-c-share__text">Share</span>
  </button>
  <dialog class="gg-c-modal">
    <div class="gg-c-modal__header">
      <h2 class="gg-c-modal__main-title">Share</h2>
      <button class="gg-c-modal__close-button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path
            d="M13 11.9l1.1-1.1c1.3-1.2 3.1-2.8 4.3-4.2.3-.4.4-.4.1-.9-.2-.4-.8-.6-1.2-.2-1.8 1.8-3.5 3.6-5.3 5.4l-1-1C9.8 8.8 8.7 7.6 7.5 6.4c-.3-.2-.9-1.2-1.5-.8-.4.3-.5.8-.2 1.2 1.7 1.8 3.4 3.5 5.1 5.1l-1.4 1.4c-.8.8-2.8 2.5-3.9 3.9-.6.8.3 1.7 1 1 1.2-1 3-2.9 3.9-3.9.5-.5.9-1 1.4-1.4l1.7 1.7c.9 1 2.6 2.8 3.4 3.5 1 .8 1.9-.3 1-1.1-1.4-1.3-3.3-3.3-5-5.1z"
            fill="#1d1d1b"
          />
        </svg>
      </button>
    </div>
    <div class="gg-c-modal__content">
      <div
        data-target="webshareAPI-unsupported"
        class="gg-c-share__button-group"
      >
        <button data-target="share-facebook" class="gg-c-share__button">
          <svg
            class="gg-c-share__icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 64.8 124.2"
          >
            <title>Facebook</title>
            <path
              d="M42.9,68.4c0-.3,0-.3.3-.3H61.5a.29.29,0,0,0,.3-.3c.3-2.7,2.7-21.9,2.7-22.2H43.2c-.3,0-.3,0-.3-.3v-15c0-1.2.3-3,.3-3.9.3-2.7,2.7-4.2,5.1-5.1a29.11,29.11,0,0,1,5.1-.3H64.8V.9C63.9.9,49.5,0,46.5,0A31.82,31.82,0,0,0,32.7,3c-5.7,3-9.3,7.2-12,13.2-.9,2.7-1.2,4.8-1.8,7.2a44.31,44.31,0,0,0-.3,6.3v15c0,.3,0,.3-.3.3H0V67.2H18.3c.3,0,.3,0,.3.3v56.7h24C42.9,124.2,42.9,85.8,42.9,68.4Z"
            />
          </svg>
          <span class="gg-c-share__text" aria-label="Share on Facebook">
            Share
          </span>
        </button>
        <button data-target="share-twitter" class="gg-c-share__button">
          <svg
            class="gg-c-share__icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 111.9 90.3"
          >
            <title>Twitter</title>
            <path
              d="M111.9,10.8a40.67,40.67,0,0,1-13.2,3.3,23.43,23.43,0,0,0,9.9-12.3A39.61,39.61,0,0,1,93.9,7.5,22.73,22.73,0,0,0,54.3,22.8a29.11,29.11,0,0,0,.3,5.1A64.26,64.26,0,0,1,7.5,3.9a21.26,21.26,0,0,0-3,11.7A22.17,22.17,0,0,0,14.7,34.5a19.38,19.38,0,0,1-10.2-3v.3A22.55,22.55,0,0,0,22.8,54a36,36,0,0,1-6,.9,19.81,19.81,0,0,1-4.2-.3c3,9,11.1,15.3,21.3,15.9A46.64,46.64,0,0,1,5.7,80.4,36.31,36.31,0,0,1,0,80.1,65.67,65.67,0,0,0,34.8,90.3C77.1,90,99.9,55.2,99.9,25.2v-3A43.46,43.46,0,0,0,111.9,10.8Z"
            />
          </svg>
          <span class="gg-c-share__text" aria-label="Share on Twitter">
            Tweet
          </span>
        </button>
        <button data-target="copy" class="gg-c-share__button">
          <svg
            class="gg-c-share__icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path
              d="M15.7 3.3C14.3 4 13 5.5 12 6.7c-.3.3-.3.8 0 1.1.2.2.8.2 1-.1.8-.8 1.6-1.7 2.4-2.4.2-.2.5-.4.7-.6.1-.1.4-.2.6-.3.1 0 .2-.1.3-.1h.3c.1 0 .2.1.2.1h.1c.4.4.7.6.9.8.5.4.9.9 1.3 1.4.3.4.2 1 0 1.4-1.2 1.9-3.3 3.3-5 4.7-1.4 1.1-2.6.6-4-.5-.8-.6-1.6.8-.8 1.4 1.8 1.4 3.7 1.9 5.5.5 1.1-.9 2.1-1.8 3.2-2.8 1-1 2.5-2.4 2.6-4 .3-2.6-3.2-5.2-5.6-4z"
            />
            <path
              d="M13.9 10.4c-1.2-1.4-3-1.7-4.6-1.1-.7.4-1.3.9-2 1.4-1.5 1.5-3.6 3-4.4 4.9-1 2.5 1.2 5.5 3.8 5.7 2.4.1 4.3-2.6 5.9-4.1.7-.7-.3-1.8-1.1-1.1-1 1.1-2.1 2.1-3.3 3.2-.9.7-2.3.5-2.9-.5-1-.8-1.2-2.4-.5-3.4l.1-.1c.9-1 1.9-2 3.1-2.9 1.4-1.4 3.1-2.8 4.9-.8.5.7 1.7-.4 1-1.2z"
            />
          </svg>
          <span data-target="copy-text" class="gg-c-share__text">
            Copy link
          </span>
        </button>
      </div>
    </div>
  </dialog>
</div>