今回はSNSでよく見る「いいね」ボタンを自分のブログに簡単&無料で設置できるプラグインを紹介します。
そのプラグインの名前は「WP ULike」です。
WP ULikeを使うと下記のように読者から「いいね」をもらえるまるでSNSのようなボタンを設置できます。
WordPressにはコメント機能がデフォルトでついていますが、読者からするとわざわざコメントを入力するのはハードルが高いものですよね。
反応があるとブログへのモチベーションも上がるのでますます記事投稿に気合が入る方も多いのでは?(僕は入りました。)
というわけで、簡単に「いいね」ボタンを設置できる「WP ULike」のインストールから設定方法までを分かりやすく解説していきます。
よければ最後までお読みいただけると嬉しいです。
WP ULikeでできること
WP ULikeをインストールすると、次のようなことができます。
- ブログ「記事」にいいねボタンを設置する
- ブログの「コメント」にいいねボタンを設置する
- いいねボタンのアイコンは4種類から選択可能
- いいね数の多い記事をランキング表示
- いいね数の推移を確認する
WP ULikeのインストール方法
WP ULikeはWordPress用の無料プラグインです。
そのため、あなたのWordPressで作成したブログの管理画面からインストールすることができます。
Step1.管理画面からWP ULikeを検索→インストール
管理画面の左メニューから「プラグイン→新規追加」を選び、検索窓に「WP ULike」と入力します。
表示されたプラグインの中から下記のピンクのアイコンの「今すぐインストール」を押しましょう。
Step2.WP ULikeを有効化する
インストールが完了すると「有効化」というボタンが表示されるので、これを押してWP ULikeを有効化しましょう。
有効化すると、管理画面の左メニューに「WP ULike」という項目が追加されます。
ここから色々設定をしていきます。詳しくは次の項で。
WP ULikeの基本設定方法
ここからはWP ULikeの基本設定について解説していきます。
設定できる項目は色々ありますが、実際の挙動に関わってくる部分だけ分かりやすく解説しますね。
まず、WP ULikeのメニューは下記のようになっていますが、実際に設定するのは基本的に「Configuration」という大項目の中の「Content Types」だけでOKです。
以下の①~は全て「Content Types」内で設定可能となっています。
①いいねボタンのアイコンを4種類から選ぶ
まずはいいねのアイコンを決めましょう。
メニューの「Content Types」を開くと最初に目に飛び込んでくるのが下記の4つのアイコンになりますが、この中から好きなアイコンを選びましょう。
②いいねボタン設置のON・OFF
やっぱりいいねボタンの設置を止めようという時は、わざわざプラグインを無効化したりアンインストールする必要はありません。
「自動表示」をOFFにすればいいねボタンが非表示になります。
③いいねボタンの設置場所を設定する
「Button Position」という項目では、いいねボタンの設置場所を下記の3つから選ぶことができます。(コンテンツ=投稿記事だと思ってください)
- コンテンツの上部
- コンテンツの下部
- 最上・最下部
それぞれの設置場所のスクリーンショットをお見せしますね。
コンテンツの上部の場合
アイキャッチ画像と本文開始の間にいいねボタンが設置されます。
コンテンツの下部の場合
記事の最後にいいねボタンが設置されます。
最上・最下部の場合
これを選ぶと、前述した「コンテンツ上部」と「コンテンツ下部」の両方にいいねボタンが設置されます。
いいね数が多くなってきたら「最上・最下部」にすると、”この記事は人気ですよ”と読者にアピールできて良いかもしれません。
④いいねボタンを表示するページタイプを設定する
ブログの場合、ページのタイプが「投稿ページ」と「固定ページ」があると思います。
「Post Types Filter」では、投稿ページと固定ページのどちらにいいねボタンを設置するか、もしくは両方に設置するかを設定することができます。
※デフォルトは「投稿」のみなっています。
上記の赤枠部分をクリックすると「投稿」と「固定」の選択肢が表示されるので、表示させたいページタイプを選択してください。
表示させたくないページは×で削除すればOKです。
⑤いいね数「0」の表記は非表示で見栄えを良くする
残念ながらいいね数が0の記事も当然あります。
ですが”0”という数字が出ていると、読者に「この記事人気無い?ということはあまり役に立たない内容なのかな?」という誤解を与えてしまいかねません。
というわけで、いいね数が0の場合は”0”という数字は非表示にしておいた方が良さそうですね。
「Hide Zero Counter Box」という機能で非表示にすることができます。
ONの場合
OFFの場合
⑥コメント欄にいいねボタンを設置する
WP ULikeを使えばブログ記事のコメント欄にもいいねボタンを設置できます。
「Content Types」の設定画面を下にスクロールしていくと、「コメント」という設定画面があります。
ここの自動表示をONにするとコメント欄にもいいねボタンが表示されます。
ONの場合
OFFの場合
コンテンツの上部の場合
コンテンツの下部の場合
最上・最下部の場合
その他の設定は記事にいいねボタンを設置する時と同じですので、アイコンを4種類から選ぶことも0の数字を非表示にすることもできます。
WP ULikeの実際の挙動
基本設定が完了したので実際にWP ULikeを使ってみましょう。
下記のgifをご覧ください。
いいねボタンを一度押すといいねのカウントが1増えて、右下に「ありがとう!これにいいねしました。」というメッセージが表示されます。
もう一度いいねボタンを押すといいねのカウントが1減り、右下に「すみません!これをよくないねしました。」というメッセージが表示されます。
右下に表示されるメッセージは後ほど解説する特殊設定で自由に編集することができます。
「いいね」数の統計・推移を確認する
実際に獲得した「いいね」数の合計や、いつ「いいね」を獲得したかといったデータは、WP ULikeのメニューの「統計」から確認できます。
統計の画面から確認できるのは以下の内容です。
- 全期間合計の獲得いいね数
- 年間の獲得いいね数
- 本日獲得したいいね数
- 昨日獲得したいいね数
- 獲得いいね数の多い記事
- いつ、どの記事にいいねが付いたか
「いつ、どの記事にいいねが付いたか」だけは確認場所がちょっと分かりづらく、「Posts 統計」欄の右上にある「すべてのログを表示」というボタンを押す必要があります。
WP ULikeの特殊設定方法
WP ULikeは基本設定だけで問題無く使うことができますが、今から解説する特殊設定をすることで他のブログとの差別化ができます。
①自分の好きな画像をいいねボタンのアイコンにする
「Content Types」に「Button Image」という欄があります。
ここで好きな画像をアップロードすることで、いいねボタンのアイコンをその画像に変更することができます。
「アップロード」というボタンを押して好きな画像をアップロードするか、既にアップロードされている画像から好きなものを選択しましょう。
画像は「いいね」用と「よくないね」用で別々のアイコンを設定することもできますが、「いいね」用のみ設定した場合には「いいね」用で設定したアイコンの色違いアイコンが自動的に「よくないね」用に設定されます。
「いいね」用と「よくないね」用で別々のアイコンを設定した場合
「いいね」用のみアップロードした場合
アップロードしたアイコンを使いたくない時は下記の「削除」を押せばOKです。
②いいねを押してくれた人へのメッセージを編集する
WP ULikeのメニューにある「翻訳」から、いいねを押してくれた人へ向けたメッセージを編集することができます。
翻訳(Strings)の設定画面を開き、「いいね通知メッセージ」と「よくないね通知メッセージ」の欄に好きなメッセージを入力しましょう。
ちなみに僕は下記のような感じにしてみました。
「よくないね」という表現は読者には上手く伝わらないと思いますので、『「いいね」を取り消しました。』に変更しました。
実際の表示は下記になります。
いいね通知メッセージ
よくないね通知メッセージ
通知メッセージを表示させたくないという人は、Configurationの一般にある「Enable Notifications」のOFFにしてください。
③いいね数の多い記事をランキングで表示する
WP ULikeの優秀な機能として、「いいね数の多い記事をランキング表示する」ためのウィジェットが挙げられます。
下記が実際のウィジェットになります。
僕が使用しているWordPressテーマは「THE THOR」ですが、トールの場合は各設定を下記のようにするとちょうど良くなります。
- タイトル:自由に入力ください
- タイプ:最もいいねした投稿
- 表示するアイテム数:5
- 期間:すべての時間
- スタイル:ハート
- タイトルリム(長さ):50
- プロフィールURL:BuddyPress(デフォルトのまま)
- いいねカウントをアクティブにする:チェックを入れる
- サムネイル/アバターを有効にする:チェックを入れる
- サムネイル/アバターサイズ:350
そして実際に表示されるのが下記のようになります。
④いいね「数」の前後に好きな文字を入れる
これはちょっと変わった機能になりますが、いいねボタンのいいね数の前後に好きな文字を入れることができます。
設定場所は「Configuration→一般」の中にある「Filter Counter Value」になります。
初期設定では「Prefix」タブの”いいね”と”よくないね”に「+」だけが入っています。
この+は初期からいいね数の前に表示されているものです。
Prefixではいいね数の「前」に表示させる文字を、Postfixでは「後ろ」に表示させる文字を設定することができます。
例えばPrefixのいいね側に「★」、よくないね側に「◎」と入れてみた場合の表示は下記のようになります。
Postfixのいいね側に「あ」、よくないね側に「い」と入れると下記の表示になります。
PrefixとPostfixは両方を同時に設定することができ、設定した場合の表示がこちらです。
ちなみに、ここで変更した内容はウィジェットで表示するランキングにも影響します。
⑤アイコンの代わりに「テキスト」を表示させる
さて、いよいよ最終項目です。
WP Ulikeではアイコンの代わりに好きなテキストを表示させられます。
これは「Content Types」の「ボタンタイプ」を”テキスト”に変更し、「ボタンのテキスト」に入力することで設定できます。
試しにいいね側に「いいねを押してね」と設定するとこうなります。
そして、よくないね側に「いいねを取り消さないでね」と設定してみた結果がこちらです。
まとめ
ブログ記事にSNSのような「いいね」ボタンを簡単に設置できる無料プラグインの「WP ULike」はいかがでしたでしょうか。
豊富なカスタマイズが簡単にできるので、WordPress初心者にもオススメです。
そのため急遽別のプラグインを探していて見つけたのがこちらのWP ULikeです。
結果的にはWP Ulikeの方が使いやすく、他のブログとの差別化ができるカスタマイズが豊富だったので切り替えて良かったと思います。