シェアする機能は多くのWebサービスが提供しています。標準のシェアボタンは簡単に埋め込めるようになっていますが、デザインは専用のものなので自分のWebサイトに合っているとは限りません。 そこでデザインがカスタマイズ可能で、手軽にシェア機能が提供できるのがSharer.jsです。

Sharer.jsの使い方

Sharer.jsが対応しているのは次のサービスです。

  • Twitter
  • Facebook
  • Linkedin
  • Google Plus
  • Email
  • Whatsapp
  • Telegram
  • Viber
  • Pinterest
  • Tumblr
  • Hackernews
  • Reddit
  • VK.com

例えばTwitterは次のように埋め込みます。

<button class="sharer button" data-sharer="twitter" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Twitter</button>

表示は自由ですが、例えば次のようになるでしょう。

Facebookでシェアボタンをクリックすると次のように表示されます。

Sharer.jsを使えばデザインは自由に、多種多少なサービスに対応したシェアボタンが提供できます。標準のデザインではあまりサイトのイメージに合わないという時にぴったりではないでしょうか。

Sharer.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Sharer.js by ellisonleao ellisonleao/sharer.js