シンプルなシェアボタンを設置するjQueryプラグイン「share-buttons」の紹介

シンプルなデザインのシェアボタンを設置するjQueryプラグインを紹介します。以下のサービスに対応しています。

  • Twitter
  • Facebook
  • Line
  • Hatenaブックマーク
  • Pocket

「Line」や「Hatena」といった日本向けサービスにも対応し、簡単な記述でデザイン変更も行えます。

  1. デモ
  2. 設置方法
  3. オプション

1.デモ

以下のページで見た目を確認してください。

デモページ

2.設置方法

手順1
「share-buttons.js」のダウンロード

以下のリンクよりファイルをダウンロードしてください。

「share-buttons.js」のダウンロード

手順2
「share-buttons.js」の配置

ダウンロードした圧縮ファイルを展開し、「js」フォルダのみをローカルサイトフォルダに配置してください。

手順3
スクリプト読み込みコードの記述

(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>

手順4
シェアボタンの表示コードの記述

シェアボタンを表示したい箇所に以下の

タグを挿入してください。

<div id="share"></div>

<head>タグ内に以下のコードを記述してください。

 $(function(){
  $("#share").shareButtons();
 });

3.オプション

シェアボタンのデザインや、どのボタンを表示するかを変更することも可能です。オプション設定を含めた記述は以下の参考にしてください。

 $(function(){
  $("#share").shareButtons({
   buttons: ['twitter', 'facebook', 'line', 'hatena', 'pocket'], // 「表示するボタン」
   shape: 'flat', // 「デザイン」 'flat', 'ios' or 'circle',
   color: '#ffffff', // 「色(アイコン)」 'brand' or any color
   backgroundColor: 'brand', // 「色(背景)」 'brand' or any color
  });
 });

「シンプルなシェアボタンを設置するjQueryプラグイン「share-buttons」の紹介」への2件のフィードバック

  1. 久しぶりにお邪魔したら、ちょうど今日更新されていました!
    いつも勉強になります!!
    これからもよろしくお願いします。

    1. はは、タイムリーでしたね。
      ちょうど今日の授業用に慌てて記事を書いたところでしたよ。
      時々は頑張って記事を増やしていきますね〜。

コメントを残す

メールアドレスが公開されることはありません。