Drupal8でいいね機能を実装する方法(Like Buttonモジュール)


Post:2020/09/04

Update:2021/01/26

モジュール
bg-image
Drupal8でいいね機能を実装する方法(Like Buttonモジュール)

Yohei Higashi

今回は、Like Buttonというモジュールを使っていいね機能を実装する方法をご紹介します。

LikeButtonの特徴

Drupal8でいいね機能を実装できるモジュールは他にもたくさんありますが、Like Buttonモジュールでは、SNSシェア機能も同時に導入することができたり、リアルタイムレポート機能や投票の結果分析など、このモジュールひとつで様々な機能を実現することができます。
WordPressやJoomla、WIXなど多様なCMSで使われているプラグインです。


プランについて

Like Buttonモジュールは、FREE / PLUS / PRO / VIP / ULTRAの5つのプランから選べるようになっており、それぞれで利用できる機能に制限があります。
plan
> [Pricing - LikeBtn]より引用(2020/09/28時点)

最初の7日間はULTRAプランの機能を試すことができますが、その後はFREEプランに切り替わりますので、有料版の機能を使いたい場合はアップグレードする必要があります。

無料版でも十分実用性はありますが、1ページあたりに設置できるボタン数の違いや、ポップアップの設定変更などより高度なセッティングや幅広いテンプレートを利用したい方は有料プランを選択してください。

インストール方法

1. Drupal.orgからリンクのアドレスをコピーする。

[Like Button | Drupal.org]
  tar.gzを右クリックし、リンクのアドレスをコピー
ss-2


2. Drupalにインストール

インストール先のDrupalサイトの管理画面>拡張機能>新しいモジュールをインストール
「次のURLからインストールする」の部分に先程コピーしたリンクのアドレスを入力し、インストール
ss-3

3. Voting API モジュールのインストール

LikeButtonモジュールを利用するためには、[Voting API | Drupal.org]モジュールのインストールも併せて行う必要があります。依存関係があるため、VotingAPIモジュールなしではLikeButtonモジュールを有効にすることができません。

1~2と同様の手順でインストールを行ってください。

4. インストールしたモジュールを有効にする。
リストからLikeButton、VotingAPIモジュールの2つにチェックを入れ、最下部のインストールボタンをクリックしてください。

 

コンテンツタイプにLikeButton用のフィールドを追加する。

今回は標準の記事コンテンツタイプにLikeButton用のフィールドを追加してみます。
インストールが正しく行われていれば新しいフィールドを追加のリスト一覧からLike Buttonが選択できるようになっているはずです。
今回はラベルをLikeBtnとして保存して次をクリック。

ss-4
「最大長」、「許容する値の数」は特に変更せず次へ
ヘルプテキストは適宜変更してください。
フィールド追加ができたらコンテンツ画面に移動して確認してみましょう。

 

これで記事コンテンツタイプにいいねボタンが表示されるようになりました!
この時点でLikeとDislike、SNSシェアができるようになっています。
ss-5

※いいねボタンが表示されない場合はキャッシュのクリアを行うか、またはコンテンツタイプの表示管理画面で無効になっていないか確認してください。

 

設定について

このままでもいいね機能自体は使えますが、設定でカスタマイズできる内容を確認してみましょう。

拡張機能 > LikeButton > 構成 をクリック
ss-7

よく使いそうな設定項目に絞って説明していきます。

GENERAL DISPLAY OPTIONS

コンテンツタイプやコメントタイプ、エンティティなどによって表示するかどうかの設定ができます。


LikeBtn Setting

  • STYLE AND LANGUAGE

Likeボタンのテーマや言語の設定。
画像のように色々なテーマから選ぶことができます。

ss-8

    

  • APPEARANCE AND BEHAVIHOUR

デフォルトではLikeボタンとUnlikeボタンの両方が表示されるようになっていますが、ここで非表示にすることができます。

  • 共有

ここでSNSシェア機能のON/OFFや、ボタンサイズなどの設定を変更することができます。


最後に

いかがでしたでしょうか。
LikeButtonは様々なカスタマイズができることが特徴のモジュールです。
希望の仕様に合わせてカスタマイズしてみてください!

本記事ではいいね機能の設定に絞って解説しましたが、他の機能についてはまた別の記事でご紹介できたらと思います。
最後まで読んでいただきありがとうございました。

 

Profile picture for user Yohei Higashi
Yohei Higashi
フルスタックエンジニア
石川県金沢市出身。2020年8月〜web業界未経験からアクレットに入社した駆け出しエンジニアです。 未経験者ならではの視点で、わかりやすい記事を心がけて情報発信していきます!