どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
最近ブログの記事下にFacebookの「この記事が気に入ったらいいね」というボックスが、設置されているのをよく見かけるようになりました。
基本的にはSNSボタンが記事下に並んでことが多いですが、さらにボックスも設置するだけで全く印象が違い、FacebookページやTwitterのファンの獲得にも効果倍増です。
私も「この記事が気に入ったらいいね」を設置してみたかったので、方法を調べていると「single php」「style.css」などのコードが少し複雑で難しい。
なかなか上手くブログに反映できなかったので、もっと簡単な方法はないかと探しているとワードプレスプラグインでパパッと設置できて即解決できました。
そこで今回はボックスが簡単に設置できるオススメしたいプラグインが2つありますので、ご紹介する内容を参考に好きな方を利用されてみて下さい。
ご紹介する2つのプラグイン
まず1つ目のプラグインは「VA Social Buzz」というもので、Facebookページへのいいねボタンやシェアボタン、Twitterへのツイートボタンやフォローボタンを表示できます。
Webプッシュ通知サービスの「Push7」にも対応しているので、導入されている方はこちらも表示させることが可能です。
参考:「Push7」Webプッシュ通知で更新情報をお届け!登録・設定や使い方 |
ブログに設置した際のデザインは以下のようになります。
そして2つ目のプラグインは「この記事が気に入ったらいいね」というそのまんま日本語が名前となっている珍しいプラグインです。
こちらもいいねボタンやフォローボタンを表示でき、何より設定が非常にシンプルで凄く簡単なのが特徴です。
ブログに設置した際のデザインは以下のようになっています。
それではワードプレスに設置していく方法を、順に解説していきたいと思います。
「VA Social Buzz」で設置する方法
プラグインのインストール&有効化
ワードプレスに「VA Social Buzz」を導入する為、管理画面メニューから「プラグイン」⇒『新規追加』をクリックします。
右上のプラグイン検索ボックスに「VA Social Buzz」と入力後、『今すぐインストール』をクリックして完了したら『有効化』をクリックして下さい。
これでワードプレスに「VA Social Buzz」が追加され、デフォルトで記事内に「シェアする」「ツイートする」ボタンが表示されます。
プラグインを設定する
プラグインが追加されると、ワードプレス管理画面メニューの「設定」⇒「表示設定」内で、「VA Social Buzz」の設定を行うことができます。
必ず設定しておく必要があるのは以下の3ヶ所になります。
「Facebookページのユーザーネーム」は「https://www.facebook.com/」の後に続く部分のことです。
「アプリ ID」とは「App ID」と言われているもので、Facebookに開発者登録してアプリを作成した際に取得できるIDになります。
詳しい内容については、以下の記事を参考にして頂ければと思います。
参考:Facebookページの連携に必要な「App ID」を開発者登録して取得する方法 |
「Twitter のユーザーネーム」は「@」に続くユーザー名の部分になります。
後はボックス内のテキスト内容や、ボタンの配色などをお好みのものに変更していきましょう。
変更し終わったら下にある『変更を保存』をクリックして、「VA Social Buzz」の設定は完了となります。
不要なボタンを非表示にする
FacebookとTwitterのシェアボタンを非表示にしたい方は、子テーマの「style.css」内に以下のコードをコピー&ペーストするだけで簡単にできます。
/*-- シェア・ツイートボタンを非表示 --*/ .va-social-buzz .vasb_share { display:none; }
「Push7」購読ボタンも非表示にしたい方は、以下のコードも追記しておきましょう。
/*-- Push7購読ボタンを非表示 --*/ .va-social-buzz .vasb_notification { display:none; }
「この記事が気に入ったらいいね」で設置する方法
プラグインのインストール&有効化
「VA Social Buzz」の時と同様に、「この記事が気に入ったらいいね」プラグインを導入する為、管理画面メニューから「プラグイン」⇒「新規追加」と進んで下さい。
検索ボックスに「この記事が気に入ったらいいね」と入力し、プラグインのインストール&有効化を行いましょう。
こちらのプラグインは導入しただけでは何も表示されません。
プラグインを設定する
先程と同じようにワードプレスの「設定」⇒「表示設定」内で行います。
設定内容は「VA Social Buzz」の時よりも至ってシンプルで、以下の3項目だけで設定は完了します。
「Facebook ページの ID」はFacebookページの「ページ情報」内にある「ページID」に記載されています。
「Twitter 表示名」の上側はテキスト内に表示したいアカウント名、下側は「@」に続くユーザー名を入力します。
後は『変更を保存』をクリックすれば、記事下にボックスが表示されます。
まとめ
「この記事が気に入ったらいいね」ボックスは、上記2つのプラグインなら数分のうちに設置を完了させることができます。
記事下のエリアを上手く活用することで集客効果を高めることができますので、FacebookページやTwitterを利用されている方は、ボックスを設置してみてはいかがでしょうか。