Drupal8でSNSシェア機能を実装してみた(AddToAny Share Buttonsモジュール)


今回はAddToAny Share Buttonsというモジュールを使って、SNSシェア機能を実装する方法をご紹介したいと思います。

AddToAny Share Buttonsとは

各種SNSに投稿などをシェアする機能を簡単に実装できるモジュールです。
インストール直後のデフォルトの状態で、なんと95のSNSやwebサービスに対応しており、下記に載っていないSNSやwebサービスを自分で追加することもできます。

対応SNS / webサービス一覧

Facebook / Twitter / Email / Pinterest / LinkedIn / Reddit / WhatsApp / Gmail / Telegram / Pocket / Mix / Tumblr / Amazon Wish List / AOL Mail / Balatarin / BibSonomy / Bitty Browser / Blogger / BlogMarks / Bookmarks.fr / Box.net / Buffer / Care2 News / CiteULike / Copy Link / Design Float / Diary.Ru / Diaspora / Digg / Diigo / Douban / Draugiem / DZone / Evernote / Facebook Messenger / Fark / Flipboard / Folkd / Google Bookmarks / Google Classroom / Hacker News / Hatena / Houzz / Instapaper / Kakao / Kik / Push to Kindle / Known / Line / LiveJournal / Mail.Ru / Mastodon / Mendeley / Meneame / MeWe / Mixi / MySpace / Netvouz / Odnoklassniki / Outlook.com / Papaly / Pinboard / Plurk / Print / PrintFriendly / Protopage Bookmarks / Pusha / Qzone / Rediff MyPage / Refind / Renren / Sina Weibo / SiteJot / Skype / Slashdot / SMS / StockTwits / Svejo / Symbaloo Bookmarks / Threema / Trello / Tuenti / Twiddla / TypePad Post / Viadeo / Viber / VK / Wanelo / WeChat / WordPress / Wykop / XING / Yahoo Mail / Yoolink / Yummly

 

インストール方法

  1. Drupal.orgからリンクをコピー

    https://www.drupal.org/project/addtoany

    ss-1

  2. Drupalサイトにインストール

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

    ss-2

  3. インストールしたモジュールを有効にする。

    リストからAddToAnyモジュールにチェックを入れ、最下部のインストールボタンをクリックしてください。

 

正しく有効にできているか確認

コンテンツに移動して、AddToAnyが正しく有効になっているか確認してみましょう。画像のように、コンテンツ下部にSNSシェアボタン等が表示されていれば成功です。

ss

 

プラスボタンにカーソルを合わせると、他のSNS/Webサービスが表示されます。しかし、この中に使用したいSNS/WEBサービスがない場合は、追加、編集をすることができます。

ss

 

モジュールの設定

拡張機能のモジュール一覧からAddToAnyを選択し、構成をクリックする。

ss-4

この画面でAddToAnyの設定が行なえます。

SERVICE BUTTONS

Service Buttons HTML Codeにサービス名を追記することで、SNSアイコンの一覧に追加することができます。ここではLINEを追加してみましょう。

ss

記述を追加して、構成を保存してください。投稿を見てみると、下記画像のようにLINEのアイコンが表示されていれば成功です。

ss

※追加したアイコンが表示されない場合は、記述が間違っていないか確認し、キャッシュをクリアしてみてください。

他にも、小さいアイコンに変更したり、Facebookの「いいね」ボタン、Twitterのツイートボタン、Pinterestの「保存」ボタンなどに変更することもできます。詳しくはこちら

 

  • SERVICE BUTTONS

ここではプラスボタンの表示、非表示、カスタムや、表示位置の変更ができます。

 

  • ADDITIONAL OPTIONS

JavaScriptやCSSを付け加えることができます。詳しくはこちら

 

  • エンティティ

AddToAnyを使用できるエンティティを指定することができます。必要な箇所に適宜チェックを入れてください。

 

最後に

いかがでしたでしょうか。
SNSシェア機能は実装が難しそうなイメージでしたが、AddToAnyを使うととても簡単に実装できたのでとても驚きました!
最後まで読んでいただきありがとうございました。

Profile picture for user Yohei Higashi
Yohei Higashi フルスタックエンジニア

石川県金沢市出身。 Drupalは日本語の情報がまだまだ少ないので、有益な記事を発信できるよう頑張ります!

株式会社アクレットは、15年以上のDrupal開発実績を持っています。
プロジェクトの要件定義、システム設計から、Drupalサイト構築、運用サポートまで、Drupalに関するあらゆるサービスを提供いたします。

お問い合わせ