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.

View demo Open in new window
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>