シンプルなデザインのシェアボタンを設置するjQueryプラグインを紹介します。以下のサービスに対応しています。
- Line
- Hatenaブックマーク
「Line」や「Hatena」といった日本向けサービスにも対応し、簡単な記述でデザイン変更も行えます。
- デモ
- 設置方法
- オプション
１．デモ
以下のページで見た目を確認してください。
２．設置方法
手順１ 「share-buttons.js」のダウンロード
以下のリンクよりファイルをダウンロードしてください。
手順２ 「share-buttons.js」の配置
ダウンロードした圧縮ファイルを展開し、「js」フォルダのみをローカルサイトフォルダに配置してください。
手順３ スクリプト読み込みコードの記述
(1) jQueryを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>(2) 「jquery.share-buttons.js」ファイルを読み込みます。
<script src="js/jquery.share-buttons.js"></script> 手順４ シェアボタンの表示コードの記述
シェアボタンを表示したい箇所に以下のタグを挿入してください。
<div id="share"></div><head>タグ内に以下のコードを記述してください。
<script>
$(function(){
$("#share").shareButtons();
});
</script> ３．オプション
シェアボタンのデザインや、どのボタンを表示するかを変更することも可能です。オプション設定を含めた記述は以下の参考にしてください。
<script>
$(function(){
$("#share").shareButtons({
buttons: ['twitter', 'facebook', 'line', 'hatena', 'pocket'], // 「表示するボタン」
shape: 'flat', // 「デザイン」 'flat', 'ios' or 'circle',
size: '50px', // 「ボタンサイズ」
margin: '5px', // 「ボタン周りのマージン」
color: '#ffffff', // 「色（アイコン）」 'brand' or any color
backgroundColor: 'brand', // 「色（背景）」 'brand' or any color
});
});
</script>
久しぶりにお邪魔したら、ちょうど今日更新されていました！
いつも勉強になります！！
これからもよろしくお願いします。
はは、タイムリーでしたね。
ちょうど今日の授業用に慌てて記事を書いたところでしたよ。
時々は頑張って記事を増やしていきますね〜。