WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法

投稿日 2015年8月26日
更新日 2017年8月19日
著者 conti
カテゴリーコーディング

各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。
そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。

はじめに

各種ソーシャルボタンをまとめて簡単に設置できてしまう便利なjQueryプラグインがあるのでそれを使います。
jquery.socialbutton

対応しているソーシャルボタン

はてなブックマーク
Twitterつぶやくボタン
facebookいいねボタン
facebook Shareボタン
Google+1 ボタン
Evernote サイトメモリー
Pinterest ボタン
mixiイイネ！ボタン
mixiチェックボタン
GREE いいねボタン

使い方

まずはjQueryPluginを読み込みます。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.socialbutton-x.x.x.js" type="text/javascript"></script>

※jquery.socialbuttonは「jquery.socialbutton」からダウンロードしてお使いください。

使いたいソーシャルボタンを選択します。
※今回はよく使われている、はてなブックマーク、Twitter、facebookで解説します。

HTML

<ul class="sns-btn-list">
    <li class="hatena"></li>
    <li class="tweet"></li>
    <li class="facebook_like"></li>
</ul>

CSS

.sns-btn-list {
overflow: hidden;
}
.sns-btn-list li{
float: left;
margin-top: 0.5rem;
margin-right: 1rem;
list-style: none;
}

javascript

javascriptで下記のような記述をします。（オプションの指定あり。）
ここでは、上記で作ったclassの空のタグの中にどのボタンを入れるかを指定しています。
例）class=”tweet”の中にtwitterのソーシャルボタンを入れる。
※.hatena.tweet.facebook_likeは任意のセレクタでOKです。

<script>
  $(function () {
      $('.hatena').socialbutton('hatena'); 
      $('.tweet').socialbutton('twitter', {button: 'horizontal'});
      $('.facebook_like').socialbutton('facebook_like', {button: 'button_count'}); 
  });
</script>

ねっ、簡単でしょ(*ゝω・*)

See the Pen jQuery.socialbutton by conti (@contiki9) on CodePen.0

WordPressの場合

WordPressでは、色々pluginが出ていますが、私は「WP Social Bookmarking Light」をよく使います。
理由は対応しているソーシャルボタンが豊富なのと、管理画面で順番や出す位置も指定できるところです。
テーマ側に埋め込んで管理するのも簡単なのでオススメです。
詳細は下記からご確認ください。
WP Social Bookmarking Lightをもっと便利に使う方法

この記事を書いた人

conti

名古屋在住のUIデザイナ。UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントの実装するのが得意です。最近はReactを触るのとデザインシステムを作るのが好きです。コーギーと暮らしています。
プロフィール

記事一覧

Twitter