ソーシャルボタンを設置するプラグイン【WP Social Bookmarking Light】の設置と設定

今回はWordPressにソーシャルボタンを設置するプラグイン「WP Social Bookmarking Light」の設置と設定、使い方を解説します。

このプラグインを使う事でどのボタンを使うか細かい指定もできますし設置も設定も非常に簡単にできます。細かい位置調整や設定をしておいた方がいいので、それを紹介しますね。

ソーシャルボタン-1

現在私のブログではソーシャルボタン(SNSボタン)はプラグインではなく自作しております。理由は少しでも軽くしてブログの表示速度を上げたかったためです。

結構複雑なので、WordPressに慣れるまではプラグインを利用し、余裕があれば自作してみるといいかも知れません。
ソーシャルボタンを自作してWordPressの高速化

それではプラグインの設定方法を紹介していきます。

プラグインをインストールして有効化しておく

まずはWordPressの管理画面から「プラグイン」⇒「新規追加」で「WP Social Bookmarking Light」を検索して「今すぐ有効化」をクリックしておきます。有効化すると自分のブログの個別記事にソーシャルボタンが設置されているはずです。

ソーシャルボタン-2

この時点で個別記事のタイトルの下にこのようにソーシャルボタンが出現します。初期設定のままだと「はてなブックマーク」「フェイスブック」「ツイッター」の3つが並んでいると思います。この部分の位置や表示するボタンの設定をしていきましょう。

「WP Social Bookmarking Light」の設定の仕方

WordPressの管理画面から「設定」⇒「WP Social Bookmarking Light」と進みます。すると「WP Social Bookmarking Light」の設定画面が開きますのでこのページで各種設定をして行きます。

一般設定

一般設定で表示位置やボタンの種類を設定する事ができます。まずは表示する場所を設定しましょう。

ソーシャルボタン-3

  • 位置:ここで表示位置を決めます。記事タイトルの下なら「Top」、記事下なら「Bottom」。
  • 個別記事のみ:これはどちらでもいいです。どちらを選んでも変化なし(私だけ?)
  • ページ:固定ページにも表示するかどうかの設定です。

次に表示するボタンの種類を増やしたり減らしたりできます。

ソーシャルボタン-4

この左の枠が現在使用中のボタンです。追加したいボタンは左の枠からドラッグ&ドロップで追加できますし、同じように順番の入れ替えもする事ができます。

同じボタンでも色々種類があります。例えば「はてなブックマークなら」「hatena」「hatena_button」という感じで同じボタンでも表示が違う種類がありますので、色々試して見て下さい。

各ボタンの細かい設定

「一般設定」の右に追加したボタンが並んでいると思います。ここから各ボタンの細かい設定ができます。

ソーシャルボタン-5

基本的にどのボタンも言語が英語に設定されてますので、この表示があればこれを日本語に直します。

ソーシャルボタン-6

ソーシャルボタン-7

言語を日本語に設定したら「変更を保存」をクリックして一度サイトを表示して確認してみます。

ソーシャルボタン-8

ツイッターの位置を入れ替えてみたのですが、ツイッターの吹き出しの右に余計な余白がありますよね。

ツイッターの右の余白を狭くする

ツイッターの右の余白が広くなってますので、もう一度「設定」⇒「WP Social Bookmarking Light」と進み、「スタイル」をクリックします。

ソーシャルボタン-9

すると下に「WP Social Bookmarking Light」のスタイルシートが開きますので、この記述を探します。一番下の方です。

.wsbl_twitter{
    width: 100px;
}

この「width」という部分が横幅ですので、この部分を100pxから90pxに変更します。この数字はサイトを確認しながら調整して下さい。

.wsbl_twitter{
    width: 90px;
}

変更ができたら「変更を保存」をクリックしてサイド表示を確かめてみましょう。

ソーシャルボタン-10

ツイッターの右の余白が改善されました。後は好きなボタンを追加して自分好みのソーシャルボタンを配置してみて下さいね。

ソーシャルボタンを設置するプラグイン【WP Social Bookmarking Light】の設置と設定”に2件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    ゆたか様

    コメントありがとうございます。WP Social Bookmarking Lightの設定ですが、プラグイン自体の不具合は時々あるようです。原因も色々あるようですが、他のプラグインとの相性などもありますので、一度WP Social Bookmarking Light以外のプラグインを一時的に停止してみて確認をしてみてください。

    また、確認されるときには「Ctrl」と「F5」を押してリロードをして下さい。それから別のブラウザもしくはスマホからの確認もしてみる事をおすすめします。それでも表示されていない場合にはお手数ですが、再度コメント頂けると助かります。どうぞよろしくお願い致します。

  2. ゆたか

    お世話になっております。
    こちらのブログにてワードプレスをはじめることができました。有り難うございます。仕事やりながらで少しづつ進んでいる感じで、本日記事投稿しましたら。
    WP Social Bookmarking Light
    で設定されているはずが、TwitterやFacebookのいいねボタンがどこにも見当たらないのですが、何か原因及び対策は有りませんか?何かアドバイス頂けると助かります。宜しくお願い致します。