SNSシェアボタン一括挿入プラグイン「socialshares」のご紹介

SNSの各シェアボタンを簡単にまとめて設定でき、かつレスポンシブ対応のプラグイン「socialshares」をご紹介します。

jsファイルを1つ読んで必要なSNSボタンのコードを記述すれば、簡単に統一されたデザインでSNSシェアボタンを表示することができます。

キャプチャ

レスポンシブ時はテキストが消えて小さなアイコンになりますが、最初の方に記述したSNSのテキストを優先的に残す仕様のようです。

使い方

1. CDNを使うか、公式ページからjsファイル(socialshares.min.js)を落としてきます。
2. 以下のコードをHTMLファイルの記述します。
   

以上です。（簡単！）

※ちなみに、ここでは公式ページ同様使用可能なSNSを全て表示していますが、現在は最大6つまでが推奨されています。(将来的には解決する予定とのこと)

また、data-*属性の付与やjavascriptのオプションで、アイコンをモノクロにしたり、url、タイトル、説明文、ボタンサイズ等をカスタマイズすることも可能です。

対応ブラウザ

IE10以上
Chrome、Firefox、Opera、Safari、Edfe、Android(Chrome)、iOS(Safari)の最新版

公式ページは英語ですが、カスタマイズもメソッド例のとてもわかりやすく記載されているので、ぜひ使う際はご参照ください。

snsボタンは随時アップデートがされているのでその際の干渉・挙動が気になりますが、問題無ければシンプルで使いやすそうなプラグインですね。

＞＞socialshares
＞＞GitHub:socialshares