• RSS

[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Twitterの「ツイート」やFacebookの「いいね!」の他、mixi やはてなブックマークなどの各種ソーシャルボタンを一元管理できるWordPressプラグインが「WP Social Bookmarking Light」です。

結構前からあるプラグインですが、「Line」を含めて着々と連携できるサービスが増えていっているので、ソーシャルボタンの管理はこのプラグイン1つでだいぶ楽になるような気がします。

目次

WP Social Bookmarking Light のインストール

WordPress管理画面のプラグイン新規追加より WP Social Bookmarking Light を検索するか、以下よりプラグインファイルをダウンロードします。


WP Social Bookmarking Light の基本設定

WP Social Bookmarking Light では様々な連携先のサービスがあらかじめ用意されているので、ドラッグ&ドロップで追加したいサービスを追加していきます。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

同じくドラッグ&ドロップでSNSボタンの並び順も変更できます。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

「一般設定」では、ボタンを表示する位置やページなどを選択できます。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」


「スタイル」のタブをクリックする事で、CSSファイルを編集することもできます。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」


一般設定で追加したサービスはページ上部のタブに表示されますので、サービス毎の詳細設定が可能になります。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

個々のサービスの設定

Twitter

Twitter のアカウントと言語、ボタンのデザインをそれぞれ選択します。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

はてなブックマーク

はてなブックマークのボタンのデザインを選択します。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

Facebookのいいね

Facebook のいいね!ボタンのレイアウト、デザインを選択します。

設定項目が多いですが、いいね!ボタンを手動で設定する際に必要な項目ばかりです。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

Google Plus One

Google +1 ボタンの設定を行います。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

フロントの確認

WP Social Bookmarking Light の設定ページで「変更を保存」ボタンをクリックすると、フロント画面にソーシャルボタンが追加されます。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

デザインが崩れまくっているので一般設定を変更し、ボタンの位置は上部のみに表示し、詳細ページにのみにボタンを設置するようにしました。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」

必要に応じて、カスタムCSSで補正すれば良さげです。
[WP]TwitterやFacebook、mixi、Lineなどのソーシャルボタンを一元管理できるプラグイン「WP Social Bookmarking Light」



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

  1. 記事拝見させていただきました。
    手順どおりにやってみたところ すんなり設置はできたのですが、
    ワードプレスサイトのブログページ以外の固定ページにも表示されてしまいます。
    この部分をどうしても解決したいのですが、お時間ある時に是非ご教授いただきたく
    思いコメントさせていただきました。

    よろしくお願い致します。

  2. 度々質問させて頂きます。
    ソーシャルボタンの設置まではうまくいくのですが、
    設定を完了させると画面左上にテキストで –> という文字(記号)が表示されてしまいます。
    ワードプレスで使われているhtmlやphpのテキストファイルを一通り見ましたが、
    どこにもこのようなテキストが見当たらなく 消すことが出来ません><

    http://ooigawa.bitter.jp/question.jpg ← こちらが実際の画面です

    この現象についてお分かりになりますでしょうか
    よろしくお願い致します。

    1. 回答遅くなりましてすみません。WEBアンテナ管理人です。

      ソース全文が無いので判断が難しいですが、
      現象を拝見したところ、コメントの際の閉じタグではないでしょうか。
      <!–ここから–>

      <!–ここまで–>

      のようなコメントの「–>」の部分だけが
      余って(閉じ漏れで)画面に表示されているのではないかと思います。

      1. WEBアンテナ管理人様

        早速ご解答頂きありがとうございます。
        とりあえず関連付いてるファイル全部見直して、問題ありそうな閉めタグをひとつづつ
        消して反映させながらチェックしていったところ、ある部分の閉めタグを消したら解決しました!!
        ありがとうございます。

        ただ気になっているところがあります。
        開始タグだけを残しておかないと表示が崩れてしまうという点です。
        ちゃんと表示できたから結果オーライという踏ん切りがつきません。
        この開始タグの必要性がわかりません><

        http://ooigawa.bitter.jp/question-2.jpg

        この画像と説明だけで判断が難しいかもしれませんが、お時間あれば返信頂けると幸いです。
        よろしくお願い致します。

        1. WEBアンテナ管理人です。

          <!–<?php wp_head(); ?>
          の先頭の
          <!–を取る事でwp_head が起動します。(起動という表現は変ですが…)

          表示が崩れるという事は、
          wp_head が出力するscript やcss などの記述と、
          このテーマで使われているCSSやscript の記述などと
          バッティングしているのためではないかと推測されます。

          ただ、この表示ズレがプラグインを入れたためなのか、
          別の原因によるものなのか、
          また、どこかどのように崩れているのか、
          現時点では分かりかねる問題ですので、

          ・崩れた個所のCSSの記述を見直す
          ・プラグインが原因であれば、別のプラグインを利用する

          などをされると良いかと思います。

          よろしくお願い致します。

  3. WEBアンテナ管理人様

    コメントありがとうございます。
    なるほど、色々な記述とのバッティングですか…

    その辺のリカバリするスキルはまだ至らない部分なので、
    とりあえずは カスタムは程々にして、常にバックアップ
    をとるといったところは気をつけながら今後も進めていこうと
    思います。
    とりあえず、気になっていた部分は消すことが出来たので
    助かりました。ありがとうございました。

    ちなみに、確認なんですが この開始タグ( <!– )の部分の記述だけでも
    コメントアウトの効果が起動するわけですね??

    (※この一行の部分が必要のないコードなのだと思い 閉めタグまでつける
    と表示に閉めタグのテキストが反映されてしまいます‥><)

    1. WEBアンテナ管理人です。

      開始タグですが、<!–があると、
      次の終了タグ(–>)までの記述が
      コメント扱い(コメントアウト)になります。

      よろしくお願い致します。

  4. コメントありがとうございます。
    なんか変な質問してしまいました、すみません。

    自分自身、こののタグをどのタイミングで、
    どういう意図で消そうとしたのか 全然思い出せなくて
    色々とお聞きしてしまいました。

    とりあえず消したかった閉めタグの表示を消すことが出来ましたので
    ほっとしています。

    色々とありがとうございます。

大井川琢也 へ返信するコメントをキャンセル