いいね !『WP Social Bookmarking Light』の使い方

近ごろ Facebook いいね! の導入を検討していたのですが、
もっと簡単に、ソーシャル機能を拡張してくれる方法が !

それが 『WP Social Bookmarking Light』 という
インストールして設定するだけの WordPress プラグイン。

Facebook の「いいね!」 や 「シェア」 だけじゃなくて、
他にも人気の 「Twitter」 や 「LINE で送る」 など
全部まとめてキレイに表示してくれます。

分かりやすく解説! WP Social Bookmarking Light の使い方
分かりやすく解説! WP Social Bookmarking Light の使い方

それでは、設置手順についてご紹介します。

インストール方法

他のプラグインと同様に WordPress の管理画面から
「Plugins プラグイン」 → 「Add New 新規追加」 と進みます。

次に 『WP Social Bookmarking Light』 を検索したら
「Install Now 今すぐインストール」をクリックします。

WP Social Bookmarking Light プラグインをインストール
WP Social Bookmarking Light プラグインをインストール

インストールが完了したら、
プラグインを有効化してください。

設定方法

「Settings 設定」 → 「WP Social Bookmarking Light」と進んだら
使いたいソーシャル機能を以下の画面で選択するだけ !

表示させたいソーシャルボタンをドラッグ&ドロップ
表示させたいソーシャルボタンをドラッグ&ドロップ

WordPress 初心者の私でも 10 分で設定完了 !
驚くほど簡単です、『WP Social Bookmarking Light』 さん。

表示する位置も、4 つの中から好きに選べます。
デフォルトの設定では「Top(記事の上)」となっていました。

1. Top(記事上)

【デフォルト設定】 記事がスクロールする場合には良くない
【デフォルト設定】 記事がスクロールする場合には良くない

2. Bottom(記事下)

読み終わったあとの 「記事下」 への表示は効果的
読み終わったあとの 「記事下」 への表示は効果的

3. Both(上と下の両方)

両方はしつこいかな ? でも記事の長さ次第ですね
両方はしつこいかな ? でも記事の長さ次第ですね

4. None(表示しない)

一時的な非表示や, テンプレートをカスタマイズする場合に
一時的な非表示や, テンプレートをカスタマイズする場合に

WP Social Bookmarking Light の使い方、
いかがだったでしょうか ?

ベーシックな使い方としては以上です !

設定するのが驚くほど簡単なので、
まるで『お好み焼きスペシャル』 のように
あれもこれも…とならないようにしましょう(笑)

あれ…うまく表示されない ? と思ったら

設定画面から表示スタイルを変更してみてください。
特に Facebook は FB root の折衝に注意。

参考として、私がこのサイトで設置したボタンは、
それぞれ次のような表示スタイルで設定しています。

追記:

執筆時から少し設定を変更していますので、
以下、各タイトル横のミニ画像を参考にしてください。

すべて言語は日本語に変更しており、
Horizontal(水平)に表示するという設定です。

プラグインの設定を変更したあとは、
W3 Total Cache などのプラグイン機能を活用し、
キャッシュをクリアするようにしましょう。

はてなブックマーク(はてブ ボタン)WP Social Bookmarking Light での はてなブックマーク (はてブ ボタン) の設定

はてなブックマークは, 他のソーシャルボタンに合わせてテキスト+バルーンの表示

はてなブックマークは, 他のソーシャルボタンに合わせてテキスト+バルーンの表示

FB(Facebook 設定)

すでに Facebook の機能を使っている場合は 「Add FB root: 」 を 「No」 に

すでに Facebook の機能を使っている場合は 「Add FB root: 」 を 「No」 に

FB Like(いいね!)WP Social Bookmarking Light での FB Like (いいね!) の設定

これで 「いいね!」 と 「シェア」 両方とも表示できます

これで 「いいね!」 と 「シェア」 両方とも表示できます

Twitter(ツイート)WP Social Bookmarking Light での Twitter (ツイート) の設定

Twitter も言語を 「Japanese」 に設定

Twitter も言語を 「Japanese」 に設定

LINE(LINE で送る)WP Social Bookmarking Light での LINE (LINE で送る) の設定

もはや無視できない 「LINE」 の威力

もはや無視できない 「LINE」 の威力

Pocket(Pocket に保存)WP Social Bookmarking Light での Pocket (Pocket に保存) の設定

Pocket は私がとても愛用しているオフライン Reader

Pocket は私がとても愛用しているオフライン Reader

さらに高度なスタイルの設定について

さて、ソーシャルブックマークが設置できたら、
次は「表示スタイル」 について悩むはずです。

表示位置を自由に設定したいという方は
2 つの方法があるので、試してみてください。

1.スタイルシートをカスタマイズする

こちらの記事 で紹介されているように
CSS スタイルシートを調整するのは簡単です。

でも、そもそも全く違う位置に表示したい場合には
CSS はあまり良い方法とは言えません。

参考: WP Social Bookmarking Light スタイルの設定

2.テンプレートにコードを組み込む

サイト内の 『好きな場所』 へ自由に配置したいなら
こちらの記事 を参考にしてみてください。

特にむずかしい手順はなく、私でも簡単にできました。

参考: WP Social Bookmarking Light を記事の好きな位置に挿入したい

# ボタンのデザインが好みじゃない場合

せっかくここまで読んでもらいましたが、
他のプラグインも試してみてください。

下のサイトで、綺麗に情報がまとまっていました。

参考:ソーシャルボタンを設置するwordpressプラグイン比較

まとめと感想

まだまだ発展途中のサイトですが、
最近はますます WordPress を触るのが楽しい !

これから WordPress を始めるという方も
ぜひ参考にしてみてください。

いいね !『WP Social Bookmarking Light』の使い方
バリ島地図.jp を運営しています !

バリ島在住 28 歳フリーランス Web デザイナー、翻訳の仕事もしています。2013 年のバリ島への移住をキッカケに、インターネットを活用した「海外ノマド生活」のブログを開設、バリ島の観光客向けに「バリ島の日本語地図」を紹介しはじめました。2014 年 6 月には バリ島地図.jp としてサイトをリニューアルし、運営を続けています。