Better buttons for social media sharing

28 May 2018

Like Tweet Share


Do your bit to help keep the World Wide Web tidy.


The share buttons provided by the big social media platforms make it easy for your visitors to post a link to your site, but they also gum up the web with extra HTTP requests and hidden tracking cookies. The code snippets below make use of simple hyperlinks to power share buttons instead. This is better for load times and better for your visitors’ privacy too.

To style these like the classic buttons you’re used to seeing around the web, try Font Awesome for the brand logos and some simple CSS to set the button shapes and colours.

Don’t forget to URL encode the links you want to share, and add target="_blank" if you want the dialogs to open in a new window.

Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=URL">Share on Facebook</a>

Doesn’t accept any other parameters (everything else is obtained automatically from your page’s Open Graph tags). It’s a derivative of the Share Button described here.

Twitter

<a href="https://twitter.com/intent/tweet?url=URL">Share on Twitter</a>

Also accepts the text, via and hashtags parameters. The link will render as a Twitter Card if your page has the correct markup. More info here.

LinkedIn

<a href="https://www.linkedin.com/shareArticle?mini=true&url=URL">Share on LinkedIn</a>

Also accepts the title and summary parameters, though this info will be also be picked up automatically from your page’s Open Graph tags. More info here.


Tags: coding design