Skip to content

Instantly share code, notes, and snippets.

@mlent

mlent/social-sharing-buttons.html

Last active February 24, 2023 08:22
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mlent/43b89b9adf22ca6a0358d0ae0bd3b7e0 to your computer and use it in GitHub Desktop.
Save mlent/43b89b9adf22ca6a0358d0ae0bd3b7e0 to your computer and use it in GitHub Desktop.
Download ZIP
Social sharing buttons
Raw
social-sharing-buttons.html
<ul>
<li>
<a href="https://twitter.com/share?text=TITLE OF YOUR POST via @YOUR_USERNAME&url=HTTPS://YOUR_WEBSITE.COM" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235'); return false;">
Share on Twitter
</a>
</li>
<li>
<a href="https://news.ycombinator.com/submitlink?u=HTTP://YOUR_URL.COM&t=YOUR CONTENT" onclick="window.open(this.href, 'hn-share', 'width=550,height=350'); return false;">
Share on Hacker News
</a>
</li>
<li>
<a href="https://pinterest.com/pin/create/button?url=HTTPS://YOUR_WEBSITE.COM&description=SOME DESCRIPTION &media=https://YOUR_SITE.com/IMAGE.JPG">
Share on Pinterest
</a>
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=HTTPS://YOUR_URL.COM" onclick="window.open(this.href, 'facebook-share','width=580,height=296'); return false;">
Share on Facebook
</a>
</li>
</ul>
@rodrigograca31
Copy link

rodrigograca31 commented Aug 11, 2020 •
edited

Gatsby version:

<ul>
  <li>
    <a
      href={`https://twitter.com/share?text=${post.frontmatter.title} @YOUR_USERNAME&url=${siteUrl}/${post.frontmatter.slug}/`}
      onClick={(e) => share(e, "twitter-share", "width=550,height=235")}
    >
      Share on Twitter
    </a>
  </li>
  <li>
    <a
      href={`https://news.ycombinator.com/submitlink?t=${post.frontmatter.title}&u=${siteUrl}/${post.frontmatter.slug}/`}
      onClick={(e) => share(e, "hn-share", "width=550,height=350")}
    >
      Share on Hacker News
    </a>
  </li>
  <li>
    <a
      href={`http://www.reddit.com/submit?title=${post.frontmatter.title}&url=${siteUrl}/${post.frontmatter.slug}/`}
      onClick={(e) => share(e, "reddit-share", "width=950,height=660")}
    >
      Share on Reddit
    </a>
  </li>
  <li>
    <a
      href={`https://www.facebook.com/sharer/sharer.php?u=${siteUrl}/${post.frontmatter.slug}/`}
      onClick={(e) => share(e, "facebook-share", "width=580,height=296")}
    >
      Share on Facebook
    </a>
  </li>
</ul>
const share = (e, name: string, size: string): void => {
  window.open(e.currentTarget.href, name, size);
  e.preventDefault();
};

Check it out at:
https://blog.rodrigograca.com/how-to-be-a-10x-developer/ 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment