Social Media sharing buttons (for blog post)

Feature Requests Website Builder Request
6

Hello all,

I ran into this problem with a client page and just ChatGPT how to make a button that takes the URL of the current page and place it in a button. It was surprisingly easy.

On the blog page on the bottom I just added an HTML embed with this code


<!DOCTYPE html>
<html>
<head>
  <style>
    /* Optional: Add styles for the button or image */
    .image-button {
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      max-width: 80px;
    }
      .image-button img {
      max-width: 80px;
    }
  </style>
</head>
<body>

<button class="image-button" onclick="shareOnFacebook()">
  <img src="upload://361HvTRiVUfg9pby7xizgKZuyKt.webp" alt="Image Button">
</button>
<script>
function shareOnFacebook() {
  // URL of the current page
  const currentPageUrl = window.location.href;

  // Open the Facebook Share Dialog
  window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(currentPageUrl), 'facebook-share-dialog', 'width=626,height=436');
}
</script>
</body>
</html>

It could probably be changed to do any social media sharing apps
Hope this helps !

4 Likes