【WP】ソーシャルボタンを設置できる「WP Social Bookmarking Light」の導入方法

wp-social-bookmarking-light

ソーシャルメディアを通じて「いいね」と評価される記事が共有され多くの人に広がることは、第三者から好評を得ている、評判がいいことが多いと思います。

またSEOにおいては、内容が良いものはより上位に掲載されるという考え方があり、ソーシャルメディアで評価されることはSEO対策にも通じるものがあると考えられています。

そこで今回は、ソーシャルメディアに自身の記事を伝播させやすくするために各ソーシャルメディアの「共有ボタン」を簡単に設置することができるWordPressのプラグイン「WP Social Bookmarking Light」の導入方法をご紹介します。

WP Social Bookmarking Light

「WP Social Bookmarking Light」は、固定ページや投稿記事にFacebookやTwitterといったソーシャルメディアの共有ボタン(ソーシャルボタン)を付けてくれるプラグインです。

国産プラグインということもあり、mixiやHatena、nifty といったメディアにも幅広く対応しているのが特徴です。

まずは「WP Social Bookmarking Light」プラグインをインストールして有効化をします。

ソーシャルボタンの表示場所

プラグインが有効化されていると投稿された本文の上、下、または両方にソーシャルボタンが表示されます。

wp-social-bookmarking-light-01

「WP Social Bookmarking Light」は、WordPress上で投稿された本文を表示する「the_content関数」にフックしているので、page.phpやsingle.phpでthe_content()が使われいる場所にソーシャルボタンが表示されるようになっています。

「WP Social Bookmarking Light」を有効化してもソーシャルボタンが表示されない場合、テーマファイル内にthe_content()が使われているのかを確認してみるとよさそうです。

好きな場所にソーシャルボタンを表示させたい場合はテーマファイル内に直接表示するコードを記述します。

<?php echo wp_social_bookmarking_light_output_e(null, get_permalink(), the_title("", "", false)); ?>

このコードを記述する場合「the_content関数」があるとソーシャルボタンが重複してしまうので、一般設定で「none(表示しない)」に設定しておきます。

一般設定

「設定」メニューに「WP Social Bookmarking Light」が追加されていますので、「WP Social Bookmarking Light」の設定画面を開きます。

「一般設定」で表示内容など基本的な項目を設定することができます。

wp-social-bookmarking-light-02

設定名 説明 設定内容
位置 ソーシャルボタンの表示を設定します。
  • Top:本文上に表示する
  • Bottom:本文下に表示する
  • Both:本文上下の両方に表示する
  • None:表示しない
個別記事のみ singleタイプの記事での表示を設定します。
  • Yes:表示する
  • No:表示しない
ページ pageタイプの記事での表示を設定します。
  • Yes:表示する
  • No:表示しない
サービス 表示するソーシャルメディアを設定します。
  • Hatena
  • Facebook
  • Facebook Like Button
  • Facebook Share Button
  • Facebook Send Button
  • Twitter
  • Livedoor Clip
  • BuzzURL
  • @nifty clip
  • Tumblr
  • FC2 Bookmark
  • newsing
  • Choix
  • Yahoo!JAPAN Bookmark
  • Yahoo!Buzz
  • Google Bookmark
  • Google Buzz
  • Google +1
  • Delicious
  • Digg
  • FriendFeed
  • reddit
  • LinkedIn
  • Evernote
  • Instapaper
  • StumbleUpon
  • mixi Check
  • mixi Like
  • GREE Social Feedback
  • atode (toread)
  • LINE
  • Pocket

Styles

「Custom CSS」にスタイルを記述することで表示を調整することができます。

wp-social-bookmarking-light-03

各ソーシャルボタン

表示するソーシャルボタンの設定をすることができます。設定内容はソーシャルメディアによって異なります。

wp-social-bookmarking-light-0

関連記事

【デザイン】エレベーターに仕掛けられたクリエイティブな広告

エレベーターでは多くの人がじっとしていることが多く広告を見てもらうには良い空間かもしれません。そのようなエレベーターに仕掛けられたアイディアがあるクリエイティブな広告をまとめてみました。 Be born again. / Dr.Kim plastic surgery ...続きを読む

2015.03.12インスピレーション

【無料】商用利用OKシームレステクスチャ「玄武岩(バサルト)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。玄武岩(バサルト)の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 テ...続きを読む

2025.07.29シームレステクスチャ

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08CSSHTMLコーディング

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

今日から理解できる経営者が知るべきAI用語15選

AIの話題が日増しに増え、「聞いたことはあるけど実は意味を知らない」「正しく理解して活用できている自信がない」という経営者の方はとても多いです。 この記事では、難しい専門用語をできるだけやさしく・実務目線で解説し、明日からの経営判断に役立つ“最低限押さえてお...続きを読む

2025.11.26