Twitter や Facebook などのシェアボタンを簡単に作ることができる『Sharer.js』の使い方
10 years ago
phpshpot さんのエントリー 『data属性を付与するだけでシェアボタンが簡単に作れる「Sharer.js」:phpspot開発日誌』 で紹介されていた Sharer.js を使ってみました.
とても手軽に使えて依存性も少ないプラグインなので, 既存のプロジェクトに組み込んでみてはどうでしょう？
さっそく私も自分のプロダクトに組み込んでみました♪
http://phinajs.com
『Sharer.js』とは？
Sharer.js is a very tiny js lib to create custom social share components on DOM elements for your website. No dependencies.
Sharer.js は, あなたのウェブサイトの DOM にソーシャルシェア機能を付与できるとても小さなライブラリです. あと何にも依存しません.
的なことが書かれています.
具体的には, DOM 要素に data-* 属性を付けることで簡単にその要素をシェアボタンにすることができます.
『Sharer.js』デモ
それぞれボタンを押すとシェア用のウィンドウが表示されるのが分かるかと思います.
『Sharer.js』の使い方
Install
cdn 経由で読み込みます.
<script src="https://cdn.jsdelivr.net/sharer.js/0.2.3/sharer.min.js"></script>
これだけで Sharer.js を使えるようになります.
Usage
あとは data-* にそれぞれ値を指定するだけです.
data-sharer... シェアしたいサービス名."twitter"や"facebook"などdata-url... シェアしたい url を指定data-title... シェアしたいタイトル. サービスによって非対応あり.
といった感じです. 例えば twitter でこのブログ http://phiary.me をシェアしたいボタンを作りたければ
<button class="sharer button" data-sharer="twitter" data-title="Checkout phiary.me!" data-url="http://phiary.me/">Twitter</button>
と書くだけです. たったこれだけでそのボタンをソーシャルシェアボタンにすることができます.
便利ですね♪