SNS(ソーシャルメディア)

WP(WordPress)

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

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

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

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

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

 

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

記事の個別ページなどに以下のようなSNSボタンを表示させてくれます。
WP Social Bookmarking Light SNSボタンのデフォルト表示

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

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

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

プラグインの設定画面

「一般設定」タブ

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をカスタマイズできます。
WP Social Bookmarking Light CSS

 

余裕のある方は、ぜひ寄付してあげて下さい。
WP Social Bookmarking Light Donate

 

「Twitter」タブ

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

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

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

・Dnt

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

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

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

 

「Hatena」タブ

「はてぶ(はてなブックマーク)」のボタンを設定します。
WP Social Bookmarking Light Hatena
「standard-balloon」「standard-noballoon」「standard」「simple」「simple-balloon」から選択できます。
好みの「はてぶボタン」を選んで設定して下さい。

 

「FB」タブ

こちらの画面では、「Facebook」のいいね!ボタン(Likeボタン)の設定を行います。
WP Social Bookmarking Light FB
・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」タブ

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

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

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

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

 

「Pocket」タブ

「Pocket」ボタンの設定になります。
デフォルトのままでいいと思いますが、ボタンのタイプを変更することも可能です。
WP Social Bookmarking Light Pocket
・Button type
ボタンのタイプを「none」「horizontal」「vertical」から選択できます。

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

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

 

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

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

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

「Google+」は「google_plus_one」を、

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

追加すると、ユーザー側には以下の様にボタンが追加されます。
WP Social Bookmarking Light SNSボタン表示2

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

 

「Google Plus One」タブ

「Google+」のシェアボタンの設定になります。
個人的には「Language」以外はデフォルトのままでいいと思いますが、一応各項目について簡単に説明しておきます。
WP Social Bookmarking Light Google Plus One
・Button size
「small」「medium」「standard」「tall」から選択できます。

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

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

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

 

「LINE」タブ

「LINE」のボタン設定になります。
こちらの画面も特に変更する理由がなければ、デフォルトのままでいいです。
WP Social Bookmarking Light LINE
・Button type
ボタンのタイプを「line20x20」「line88x20」「line80x20」から選択できます。
・Protocol
ボタンのプロトコルを「http://」「line://」から選択できます。

 

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

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

WordPress短期学習プログラム

関連記事

  1. WP:WordPress(ワードプレス)

    WP(WordPress)

    【WordPress】閲覧中の記事IDを除外して、記事一覧を表示する方法

    現在閲覧中の記事ページを除外して、記事一覧を表示したい場合があ…

  2. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP3.6でビジュアルエディタが使えなくなった!!

    今日、業者さんからの依頼でWordPressのバージョンを3.6に…

  3. WP:WordPress(ワードプレス)

    WP(WordPress)

    【WordPress】query_postsは非推奨です。WP_Queryかget_postsを使い…

    メインクエリを書き換えてしまうquery_postsは非推奨で…

  4. WordPress(WP)
  5. WP:WordPress(ワードプレス)

    WP(WordPress)

    「WordPress JSON REST API」とかいうプラグイン

    最近、WordPressのJSON REST APIというプラグイ…

  6. WP:WordPress(ワードプレス)

    WP(WordPress)

    「Duplicate Post」でWPの記事複製

    WordPress「Duplicate Post」で記事の複製…

最近の記事

  1. URLのwwwあり・なしの統一方法
  2. URLのwwwはあり?なし?
  3. SEO(エスイーオー)
  4. 中古ドメイン(Old Domain)について
  5. CakePHP
  6. Technology-Connection-Net
  7. ドメインにハイフンを使うのは日本人だけ?
  8. SSL(HTTPS)
  9. ドメインについて
  10. WP:WordPress(ワードプレス)
PAGE TOP