概要
SNSシェアボタンを簡単に設置できるようになります。
それもかなり手軽に簡単にまとめて設置できます。
使い方
- 「sns_button_simple.css」と「sns_button.js」を読み込む(sns_button.jsはフッターで読み込むこと)
- ソーシャルボタンを表示したい箇所に
ulタグとliタグを追加する
ulの中は実際に使うものだけを選んでもらえれば大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<link rel="stylesheet" href="sns_button_simple.css"> <ul class="sns_button"> <li class="sns_button_twitter"></li> <li class="sns_button_facebook"></li> <li class="sns_button_hatena"></li> <li class="sns_button_google"></li> <li class="sns_button_pocket"></li> <li class="sns_button_line"></li> <li class="sns_button_slack"></li> <li class="sns_button_mixi"></li> <li class="sns_button_chatwork"></li> <li class="sns_button_evernote"></li> <li class="sns_button_feedly"></li> <li class="sns_button_linkedin"></li> <li class="sns_button_skype"></li> <li class="sns_button_tumblr"></li> <li class="sns_button_rss"></li> </ul> <script type="application/javascript" src="sns_button.js"></script> |
「sns_button.js」のダウンロードはこちら
「sns_button.min.js」のダウンロードはこちら
「sns_button_simple.css」のダウンロードはこちら
対応しているのは一応以下の通り
- はてなブックマーク
- Google+
- Line
- Slack
- mixi
- ChatWork
- EverNote
- feedly
- Skype
- Tumblr
- RSS
追加するとこんな感じになります。
デフォルトではcssで5列になるようにしていますが、実際に設置するボタンの数によって7行目のwidth:calc(100%/5);の数字を変えてもらえればと思います。
今後やりたいこと
- スタイルをいくつか作成し選べるようにする
- ソーシャルボタンを増やす
- シェアされた件数の表示
- SNSのアイコンを追加する
あとがき
それぞれのソーシャルボタンは規約があって画像の変更ダメとか文字はこれじゃないとダメとか、
一応見たのですがもしダメそうな部分があったら連絡ください。
あとAPIのURLが使えなくなってるよとかあったら連絡ください。
ソースコード
v1.0 20170621 とりあえず動く ソースコード
スポンサードリンク