Static social media “share” buttons without JavaScript

Hand-shaped cursorSometimes you want a “share” link in your website or email newsletter but you don’t want the extra JavaScript and iframes that come with the standard social media buttons. Here’s how to do it, giving your users faster page loading times and a bit more privacy.

Twitter

Firstly Twitter, who like to make it easy for us. It’s possible to use twitter.com/home or twitter.com/share but the most useful sharing URL is this:

https://twitter.com/intent/tweet?
  • Parameters: url, text
  • Encode parameters? Yes

The difference is that the user will see a friendly “Share a link with your followers” heading rather than the usual “What’s happening?”. Not only that, but the text within the Tweet is highlighted to make it immediately editable. Nice touch.

Example

<a href="https://twitter.com/intent/tweet?text=Static%20social%20media%20%22share%22%20buttons&url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Twitter
</a>

Try it out here: Twitter buttonShare on Twitter

Documentation


Facebook

Despite having an official “Share” button in the past, Facebook have now deprecated it in favour of the ubiquitous “Like” button. For backwards compatibility, however, the “Share” URL still works:

https://www.facebook.com/sharer/sharer.php?
  • Parameters: u (URL)
  • Encode parameters? Yes

Example

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Facebook
</a>

Try it out here: Facebook buttonShare on Facebook

Documentation


LinkedIn

Apparently sharing links on LinkedIn is very good for SEO so this could be an important one to include. The base URL is:

http://www.linkedin.com/shareArticle?
  • Parameters: url, title, summary
  • Encode parameters? Yes

Example

<a href="http://www.linkedin.com/shareArticle?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f&title=Static%20social%20media%20%22share%22%20buttons&summary=How%20to%20build%20social%20media%20sharing%20links%20without%20JavaScript%20and%20iframes.">
    Share on LinkedIn
</a>

Try it out here: LinkedIn buttonShare on LinkedIn

Documentation


Pinterest

The relatively new kid on the block is Pinterest. Note that for it to work properly, you should include the media parameter and point it to an image at least 750 pixels wide. The base URL is:

http://pinterest.com/pin/create/button/?
  • Parameters: url, description, media
  • Encode parameters? Yes

Example

<a href="http://pinterest.com/pin/create/button/?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f&description=Static%20social%20media%20%22share%22%20buttons&media=http%3a%2f%2fdaniemon.com%2fblog%2fwp-content%2fuploads%2f2012%2f09%2fstatic-social-media-buttons.png">
    Share on Pinterest
</a>

Try it out here: Pinterest buttonShare on Pinterest

Documentation


Google+

Let’s not forget Google who have a bookmarking service, however this has now largely been usurped by Google+ which uses this URL:

https://plus.google.com/share?
  • Parameters: url, hl (human language, e.g. “en”, “ja”, etc. – optional)
  • Encode parameters? Yes

Example

<a href="https://plus.google.com/share?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Google+
</a>

Try it out here: Google+ buttonShare on Google+

Documentation


Hatena Bookmarks

Hatena Bookmarks is a popular bookmarking site in Japan, particularly among the tech crowd. It uses this URL:

http://b.hatena.ne.jp/entry/
  • Parameters: None – just append your target URL
  • Encode parameters? No

Example

<a href="http://b.hatena.ne.jp/entry/http://daniemon.com/blog/static-social-media-share-buttons/">
    Share on Hatena Bookmarks
</a>

Try it out here: Hatena Bookmarks buttonShare on Hatena Bookmarks

Documentation

Other similar resources

4 thoughts on “Static social media “share” buttons without JavaScript

  1. Kamalraj

    hi,
    Please can you say anyone how can i share the articles to instagram social media.

    thank you

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>