今回は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

   

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

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

   

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

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

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

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

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

モジュールの設定

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

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

SERVICE BUTTONS

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

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

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

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

• SERVICE BUTTONS

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

• ADDITIONAL OPTIONS

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

• エンティティ

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

最後に

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