SNSシェアボタンズ

特徴

• はてブ、LINEといった日本のSNSのシェアボタンも用意されてる。
• レスポンシブ対応でPCは文字の入った横長のボタンになりますがスマホでは正方形なアイコンのみになります。
• アイコンがSVGなので高精細なディスプレイでもきれい。
• cssとjavascriptの2つのファイルで出来てるのでシンプル。
• カウンター無しなので表示が早い。
• 並び替えや複数箇所配置もOK。
• metaデータから必要な情報を引っ張ってくるので設置が簡単。
• jQueryなどのライブラリを使っていないので軽い。
• Adblck Plusのソーシャルメディア アイコン トラッキングのブロックでもボタンが消えない。

ダウンロード

下記URLよりダウンロードしてください。
https://uda2.com/snssb/snssb.zip

設置方法

上記よりダウンロードしたファイルを解凍し、cssファイル「snssb.css」をコピーして読み込んでください。PCでもアイコンのみにしたい方は「snssb_icon.css」をお使いください。

<link rel="stylesheet" href="css/snssb.css">

設置したい場所に適当な空のタグを書いてください。

<div class="snsbtn"></div>

そしてbodyの閉じたタグの前あたりにjsファイル「snssb.min.js」をコピーして読み込んでください。

<script src="js/snssb.min.js"></script>

その下にスクリプト呼び出すを書いてください。
下記の場合classがsnsbtnのタグ内に6つのSNSボタンを貼ります。
現在用意してるSNSボタンが6つしかないので全てを表示する事になります。
OPGタグは書いた方がいいかと思いますが無くても動作します。

<script>
var obj = new SNSshareButtons(['twitter','facebook','hatena','pocket','line'],'.snsbtn');
</script>

更新履歴

2024/02/18

v0.0.4 Twitterのロゴ変更

2020/09/19

v0.0.3 Google+の削除

2018/06/15

v0.0.2 Adblckによるブロック回避

2018/06/04

v0.0.1 一般公開

ライセンス

スクリプトはMITライセンスとさせて頂きますが、各SNSのロゴは各社の規約に従ってください。本スクリプトを利用の結果生じたいかなる損害についても、当方は一切責任を負いません。自己責任でお願いいたします。