WP Social Bookmarking Lightの使い方

  • このエントリーをはてなブックマークに追加
  • Pocket

ブログを運営するのであれば、ソーシャルボタンの設置は必須です。

ソーシャルボタンを設置しておけば、記事を気に入った読者がワンクリックで拡散する事が出来ます。つまり筆者と読者の両方にメリットがあると言う事です。

WordPressでは簡単にソーシャルボタンを設置できる「WP Social Bookmarking Light」というプラグインがあるので、導入方法と使い方を紹介します。

 

WP Social Bookmarking Light

 

WP Social Bookmarking Lightのインストール方法

 

ダッシュボードのから「プラグイン」⇒「新規追加」と進みます。

WP Social Bookmarking Light①

 

次に「WP Social Bookmarking Light」と検索をかけます。

WP Social Bookmarking Light②

 

続いて「いますぐインストール」をクリックします。

WP Social Bookmarking Light③

 

最後に「プラグインを有効化」でインストールは完了です。

WP Social Bookmarking Light④

 

おすすめのソーシャルボタン

 

WP Social Bookmarking Lightで対応しているソーシャルボタンは大量にあるので、その中でも以下のボタンをオススメしています。

スクリーンショット 2014-09-29 14.22.53
いいね ツイート はてブ Google+ Pocket

 

これらのボタンがユーザー数も多くおすすめです。(SEO効果もあるのでGoogle+に登録して設置しておきましょう)

 

一般設定

 

一般設定で出来る事は、以下の4つになります。

  • 位置の設定(ボタンの位置)
  • 個別記事の設定(記事毎のボタン表示の有無)
  • ページの設定(ページ毎のボタン表示の有無)
  • サービスの設定

サービスの設定に関しては追加したいボタンをドラッグ&ドロップするだけです。

WP Social Bookmarking Light⑤

 

サービスの設定以外の設定は以下の通りです。

位置の設定 Top=記事上のみ Bottom=記事下のみ Both=両方 None=配置しない
個別記事の設定 Yes=記事ページのみ表示される No=トップページ,カテゴリー,記事ページに表示される
ページの設定   Yes=記事ページ,固定ページに表示される   No=記事ページのみに表示される

 

スタイルの設定

 

ここではスタイルシートの編集を行う事ができます。

 

デフォルトでは以下のようになっています。

WP Social Bookmarking Light⑥

 

デフォルトのままでも問題はないのですが、ソーシャルボタンを記事上に設定していた場合、ボタンと文字の感覚が狭過ぎるんですね。

WP Social Bookmarking Light⑦

 

この間隔が気になる人は赤枠で囲んだ箇所のコードを書き換えます。

WP Social Bookmarking Light⑨

【変更前】

 

【変更後】

 

コードを書き換えるとこのように間隔が広くなります。

WP Social Bookmarking Light⑧

※間隔を調整したい方は【20px】の数字を変えれば調整できます。

 

ボタン毎の設定

 

ここでは追加したボタンの詳細設定をする事ができますが、全て紹介していたら1万文字ぐらいの記事になってしまいそうなので、先ほど紹介したおすすめボタンのみ紹介していきますね笑。

 

【Twitter】

WP Social Bookmarking Light⑩

 

「Via」にあなたのTwitterアカウントの@以下を入力すると、訪問者がツイートボタンで拡散した場合、「@あなたのアカウントさんから」という表記がされます。

WP Social Bookmarking Light⑪

 

次に「Language(言語)」ですが、特に理由がない限りは「Japanese」にしておくことをおすすめしています。

 

「Count」のデザイン

none horizontal
スクリーンショット 2014-09-29 14.14.59 スクリーンショット 2014-09-29 14.15.28

 

【Hatena】

WP Social Bookmarking Light⑫

 

「Layout」のデザイン

standard-balloon standard-noballoon standard simple simple-balloon
スクリーンショット 2014-09-29 14.16.25 スクリーンショット 2014-09-29 14.16.46 スクリーンショット 2014-09-30 8.50.56 スクリーンショット 2014-09-30 8.50.05 スクリーンショット 2014-09-30 8.51.23

 

【FB】

WP Social Bookmarking Light⑬

ここで設定するのは赤枠部分のみで大丈夫です。「Locale」はFBボタンの言語表記の設定です。デフォルトでは「en_US」となっていると思いますが、このままだと表記が「Like」になってしまうので、「ja_JP」に変更して下さい。

そうすると「いいね」になります。

 

【FB Like】

WP Social Bookmarking Light⑭

 

「Layout」のデザイン

button button_count
スクリーンショット 2014-09-29 17.28.46 スクリーンショット 2014-09-29 17.29.07

 

「Action」のデザイン

like recommend
スクリーンショット 2014-09-29 17.28.46 スクリーンショット 2014-09-29 17.34.46

 

「share」のデザイン

No Yes
スクリーンショット 2014-09-29 17.28.46 スクリーンショット 2014-09-29 17.37.09

 

※「Layout」,「Action」,「share」の組み合わせにより、上記に無いデザインにもできます。

 

「Width」はボタンの幅ですが、デフォルトのままで問題ないかと思います。

 

【Google Plus One】

WP Social Bookmarking Light⑮

「Button size」はそのままボタンの大きさなのですが、「medium」のままで良いかと思います。

 

「Language」は日本にしておいて下さい。(Annotationをinlineにした場合のみ効果有り)

 

「Annotation」のデザイン

none bubble inline
スクリーンショット 2014-09-29 17.43.47 スクリーンショット 2014-09-29 17.44.09 スクリーンショット 2014-09-29 17.44.37

 

「Inline size」はデフォルトで大丈夫です。

 

【Pocket】

WP Social Bookmarking Light⑯

 

「Bytton type」のデザイン

none horizontal vertical
スクリーンショット 2014-09-29 17.55.41 スクリーンショット 2014-09-29 17.56.06 スクリーンショット 2014-09-29 17.56.29

 

PHPで任意の位置に表示させる方法

 

これまでに紹介した場合では、決められた位置にのみソーシャルボタンを設置する事しかできません。ですが、PHPを使って任意の位置に表示させる事もできます。

以下のコードを表示させたい位置に挿入します

 

【投稿記事に表示させる場合】

 

まずは「一般設定」の「位置」を「None」にしておきます。

WP Social Bookmarking Light10

 

次にダッシュボードから「外観」⇒「テーマ編集」と進みます。

WP Social Bookmarking Light⑰

 

続いて「単一記事の投稿(single.php)」をクリックします。

WP Social Bookmarking Light⑱

 

そうするとずらーっとコードが出てくるので、任意の位置に先ほどのコードを挿入します。

WP Social Bookmarking Light12

 

例えば、上のように「記事本文上」の所に挿入すると記事の上に表示されます。

WP Social Bookmarking Light⑲

同じように記事下に表示させたい場合は、記事本文下に挿入すればできます。

 

まとめ

 

ソーシャルボタンを入れるのと入れないのでは拡散効果が断然違うので、これを機にWP Social Bookmarking Lightプラグインを是非導入してみて下さい。

 

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメント

コメントを残す

*