大手サイトの記事はもちろん、個人のブログサイトでも一般化しつつある記事の終わりに設置された「この記事が気に入ったらいいね!しよう」ボタン。
現在は検索エンジンからの流入だけではなく、FacebookやTwitterから記事にたどり着く流れ(リファラ)も、とても重要なものとなりました。
その流れを誘発させるFacebookページのいいね!やTwitterフォローを激増させるのが、今回紹介する、バイラルメディア風「この記事が気に入ったらいいね!しよう」ボタンです。かんたんで絶大な効果がありますので、必ず設置しておきましょう。
プラグインありとプラグインなし。2通りの設置方法をご紹介します。
[目次]
記事下にボタンを設置する理由
ほとんどのWordPressテーマには、記事の最初や最後にSNSボタンを表示させる機能が付いています。次のように、横一列に並んだボタンです。

Facebook、ツイッター、google+、はてなブックマーク、LINE、RSSやfeedlyなど、様々なSNSボタンを選んで表示させることができます。
もちろん、これらの効果も期待できるのですが、アイキャッチ画像と共に表示されるバイラルメディア風ボタンは存在感が違います。より多くのいいね!やフォローがクリックされる可能性が高まるということですね。
ちなみに、バイラルメディアの【viral】は、ウイルス性という意味。ウイルス感染のように、記事が多くの人に短時間で知れ渡るというニュアンスで付けられたようです。
日本のバイラルメディアとしては、「Spotlight」や「netgeek」「grape」などが、SNSでの拡散力が強いですよね。
プラグインでお手軽に設置方法

まずはプラグインでの設置方法です。プラグイン「VA Social Buzz」をインストールし、有効化させます。
プラグインのインストール方法については、こちらの記事を参考にしてみてください。
有効化した後の設定は、WordPress管理画面の左メニューにある、設定>表示設定からすることができます。
設定できる項目は少ないので、問題なくできるはずです。
- Facebookページやツイッターのアカウント
- 表示させる記事の種類(投稿、固定ページ)
- クリックを促す文章の変更
バージョンによって設定内容が異なる可能性はありますが、上記の項目がメインとなります。

当サイトでも利用させていただいています。
カスタマイズ性重視!PHPとCSSでの設置方法

続いて、プラグインなしの設置方法です。
先に紹介した「VA Social Buzz」は、とても簡単に設置することができますが、カスタマイズ性が高くはありません。
設置する位置の変更や、ツイッターフォロー・Push7ボタン(雷マーク)だけ非表示といった設定をしたい場合、有料バージョンを導入する必要があります。
「無料でなんとかしたい」「好きなようにカスタマイズしたい」という場合は、こちらのプラグインなしの設定をお試しください。
その方法については、ママブロガーまなしばさんの記事に詳しく掲載されています。
記事の流れ通りに進めていけば、問題なく設置できると思いますよ。

横幅や縦の長さの変更や色、表示位置など、好みに合わせた変更が可能です。ツイッター部分のコードを削除して、吹き出しとオフィシャルのフォローボタンを別で埋め込むことも出来ます。
Simplicityの場合
ここからは、プラグインなしの設置方法のアレンジ版として、一歩踏み込んだ内容を僕からお伝えします。
僕がWordPressの無料テーマとして、一番の信頼を寄せるSimplicity。
このSimplicityを構成したサイトでの設置方法を具体的に紹介します。
3つの行程で設置を進めていきます。
- PHP Text Widgetのインストール
- ウィジェットからPHPコードを貼り付け
- テーマの編集からCSSコードを貼り付け
貼り付ける2つのコードは、まなしばさんの記事からそのまま貼り付けていきます。
この方法の利点
PHPファイルを直接触る必要がないので、安心して設定することができます。このPHPファイルの編集作業はある程度の慣れがないと、挿入位置など戸惑う点が多いものですからね。
PHP Text Widgetのインストール

プラグイン「PHP Text Widget」をインストールして有効化させます。これは、次の行程で説明する、ウィジェットでPHPコードを有効にさせるために必要なプラグインです。
バイラルメディア風のいいね!ボタンの設置そのものにプラグインは不要ですが、そういった目的があるため、必ずインストールして有効化させましょう。
有効化させた後の設定などは、一切不要です。
ウィジェットからPHPコードを貼り付け

WordPress管理画面の左メニュー、外観>ウィジェットから、「投稿関連記事下」のスペースにPHPコードを貼り付けます。保存するだけでOKです。
どのウィジェットスペースでも表示させられるので、お好きな場所に設定してください。
テーマの編集からCSSコードを貼り付け
最後に、WordPress管理画面の左メニュー、外観>テーマの編集から、CSSコードを貼り付けます。
この際に、必ず子テーマは設定しておきましょう。
子テーマを設定していない場合、Simplicityをアップデートした場合、再度CSSコードを貼り付ける必要があります。今やどんなテーマでも、子テーマの設定は常識といっていいくらいですね。
いい記事をたくさん書きましょう
プラグインありとなしの設置方法をご紹介しました。
このバイラルメディア風ボタンがあれば、面白いくらいFacebookいいね!やTwitterフォロワーが増えていきます。とはいえ、それは記事次第です(笑)
読者に「面白い!」「読んでよかった!」と思われてはじめてクリックされるボタンですから、記事の良し悪しが決め手になるのは言うまでもありません。
多くの人に「いいね!」されるような、良い記事を書いていきましょう。