【WordPress】「WP Social Bookmarking Light」で手軽にSNSシェアボタンを設置

こちらの記事では「WP Social Bookmarking Light」を紹介します。

プラグイン「WP Social Bookmarking Light」について

こちらは、ソーシャル（SNS）関連のシェアボタンを簡単に設定することの出来るプラグインです。

国産のプラグインで、設定できるSNSの種類も多いので、使用されている方もかなり多いプラグインだと思います。

プラグインをインストールして有効化すると、

記事の個別ページなどに以下のようなSNSボタンを表示させてくれます。

ただ、こちらはインストール時のデフォルトでの表示になるので、

設定するSNSの種類を変更したい場合や表示するボタンを変更したい場合には、

「設定」→「WP Social Bookmarking Light」から設定することも可能です。

↓

プラグインの設定画面

「一般設定」タブ

・Position（位置）
ボタンを表示させる位置を選択します。
「Top」「Bottom」「Both」「None」から選択できますが、
「Both」を選択しておくと記事の上下にボタンを表示させられるのでお勧めです。

・Individual Article（個別記事のみ）
「Yes」「No」で選択します。
「Yes」を選択すると記事個別ページのみ表示になるので、
トップページやアーカイブなどにもボタンを表示させる場合には「No」を選択して下さい。

・Pages（ページ）
「Yes」「No」で選択します。
固定ページへのボタン設定不要であれば、「No」を選択して下さい。

・Enable Services（サービス）
表示させたいSNSボタンを選択します。
右から左へドラッグすると追加できます。

因みに、以下の関数を使ってSNSボタンを自分の好みの場所に表示させることも可能です。
<?php if (function_exists("wp_social_bookmarking_light_output_e")) wp_social_bookmarking_light_output_e(); ?>
※この場合、ボタンが表示され過ぎて鬱陶しいので、「Position（位置）」で「None」を選択しましょう。

「CSS」タブ

・Custom CSS
CSSをカスタマイズできます。

「Donate」タブ

余裕のある方は、ぜひ寄付してあげて下さい。

「Twitter」タブ

・Via(your twitter account)
Twitterのアカウントを登録して下さい。
登録しておくと、ツイート後にアカウントをフォローする画面が表示されます。

・Related(related twitter account)
関連するアカウントを登録しておくと、ツイート後にそのアカウントのフォローもおすすめしてくれます。

・Hashtags
ハッシュタグ「#」を使用したい場合には、登録して下さい。

・Dnt

・Language
デフォルトだと日本語の「ツイート」ボタンが表示されます。
例えば「English」を選択すると、「Tweet」ボタンに表示が変わります。

・Size
ボタンのサイズを「normal」「large」から選択します。
変更すると他のボタンとのサイズバランが変になるので、「normal」のままにしておきましょう。

・Version
「html」「iframe」から選択します。
「iframe」を選択すると、iframeでボタンが表示されます。

「Hatena」タブ

「はてぶ（はてなブックマーク）」のボタンを設定します。

「standard-balloon」「standard-noballoon」「standard」「simple」「simple-balloon」から選択できます。
好みの「はてぶボタン」を選んで設定して下さい。

「FB」タブ

こちらの画面では、「Facebook」のいいね！ボタン（Likeボタン）の設定を行います。

・Locale
デフォルトでは「en_US」を設定されています。
ボタンを「Like」から日本語の「いいね！」ボタンに変更したい場合には、「ja_JP」に変更して下さい。

・Version
デフォルトの「xfbml」のままで問題ないですが、「html5」「iframe」に変更も可能です。
それぞれ、
xfbml => <fb:like href="～">
html5 => <div class="fb-like" data-href="～">
iframe => <iframe src="～">
の形式でいいね！ボタンを表示してくれます。

・Add fb-root
デフォルトの「Yes」のままで大丈夫です。

「FB Like」タブ

Layout
ボタンのレイアウト（デザイン）を「button」「button_count」から選択できます。
デフォルトは「button_count」に設定されています。=>
「いいね！」された件数を表示させたくない場合には「button」を選択して下さう。

・Action
ボタンに表示させるアクション（動作）を「like（いいね！）」「recommend（おすすめ）」から選択できます。

・Share
「Yes」を選択すると「like（いいね！）」ボタンとは別に「Share（シェア）」ボタンを表示してくれます。=>

・Width
ボタンの横幅を設定します。

「Pocket」タブ

「Pocket」ボタンの設定になります。
デフォルトのままでいいと思いますが、ボタンのタイプを変更することも可能です。

・Button type
ボタンのタイプを「none」「horizontal」「vertical」から選択できます。

「horizontal」を選択すると =>
「vertical」を選択すると =>

というボタンになります。

ここまではデフォルトで設定されているボタンの設定になりますが、

「Google+」と「Line」のシェアボタンも設定したいですね！！

まず「一般設定」画面に移動して、

「Google+」は「google_plus_one」を、

「Line」は「line」を右から左にドラッグして追加します。

追加すると、ユーザー側には以下の様にボタンが追加されます。

「Google+」「LINE」の設定はそれぞれ以下で説明します。
↓

「Google Plus One」タブ

「Google+」のシェアボタンの設定になります。
個人的には「Language」以外はデフォルトのままでいいと思いますが、一応各項目について簡単に説明しておきます。

・Button size
「small」「medium」「standard」「tall」から選択できます。

・Language
デフォルトでは「English (US)」になっているので、「Japanese」に変更します。

・Annotation
アノテーションを「none」「bubble」「inline」から選択できます。
none => なし
bubble => ボタンを押したユーザー数を表示
inline => ボタンを押したユーザー数とそのプロフィール画像を表示

・Inline size
上記「Annotation」で「inline」を選択した場合のインラインサイズを指定します。

「LINE」タブ

「LINE」のボタン設定になります。
こちらの画面も特に変更する理由がなければ、デフォルトのままでいいです。

・Button type
ボタンのタイプを「line20x20」「line88x20」「line80x20」から選択できます。
・Protocol
ボタンのプロトコルを「http://」「line://」から選択できます。

慣れると必要な設定もチャチャっと行えるようになるので、

SNS系ボタンの設定にプラグインの使用を考えている方はぜひ試してみて下さい。