Add to Any

各記事に表示していたSNSなどへの共有ボタンに関して、今回、「Social Buttons」モジュールから「Share Buttons by AddToAny」モジュールに変更しました。
SNS用のボタンにはいろいろな種類があります。
共有ボタンの用途は、自サイトの記事を他のサイトへ転載してもらうためのボタンで記事へのURLリンクが埋め込まれます。
私はこのボタンを利用してTwitterにツイートするようにしています。
そうするとTwitterがFacebookとMixiと連携しているのでそれぞれに自動でアップされます。
主に自分用の共有ボタンですが、ついでなので日本国内で利用してそうなサービスのボタンも配置してあります。
 

AddThisと比較して

AddToAnyは、AddThisと同じくThird-partyのサイトを利用します。
しかし、AddToAnyはサイトへのユーザ登録が不要です。
最新版はどうかわかりませんが、以前AddThisを使用していたころは、日本で多く利用されているMixiやLINEの登録がありませんでした。
そのため、使いたいShareボタンよりも使わないボタンであふれている印象でした。
今回使用するAddToAnyはMixiもLINEもラインナップになります。

Social Buttonsと比較して

AddThisではサイトへの登録が必要な点と使いたい共有ボタンがすべてそろっていなかった点で、自由にカスタム登録ができるSocial Buttonsに変更しました。
しかし、カスタム登録で作成したボタンは、各SNSで生成した貼付けコードを埋め込むため、スタイルの統一性がありません。
凸凹で、アイコンのサイズも異なるため、見た目はよくありませんでした。
スタイルシートをごにょごにょすれば何とかなったかもしれませんが、ボタンアイコンが表示されるまでの時間が異なり、読み込みも時間がかかっているようでした。
また、HTTPS対応かどうかも各SNSによって異なります。
Third-partyサイトを利用するモジュールと比較するといろいろな点で統一性がない印象でした。
自由度を優先すると仕方ないことなのかもしれません。

その他

その他のモジュールとして、「Service Link」モジュールを使用してみました。
このモジュールは名前の通りサービスと連携するためのモジュールで、各サービスが提供するAPIが利用できるようで高機能な感じです。
そのため、各サービスごとに用意されているサブモジュールを別途インストールする必要があります。
利用サイト数が圧倒的に多いのはいろいろな使い方があるためだと思います。
MixiやLINEのような日本国内で利用者が多いサービスとの連携機能がないようだったので使用をやめました。
共有ボタンを配置するだけの要件にはちょっと大げさなモジュールです。

もう1つ「Social Media」モジュールを試しました。
このモジュールは共有ボタン以外にもいいね!やその他主要SNSの機能が利用できるようです。
共有ボタンのアイコンがやはり微妙にズレるようで、MixiやLINEに対応していなかったので使用をやめました。

他にも多くの寄贈モジュールがありますが、日本国内で利用者の多いMixiやLINEをサポートしているモジュールはあまりありません。
また、日々更新されていくSNSの仕様に対応しているものはそれほど多くはありません。

今回は、MixiとLINEを標準でサポートしている点と32x32アイコンが揃っている点で「Share Buttons by AddToAny」に決定しました。

インストール

「Share Buttons by AddToAny」モジュールのインストール方法は、INSTALL.txtに記載がある通りです。

通常のDrupalモジュールと同じようにダウンロードしてモジュールを有効にするだけです。
今回は、drushを利用してインストールしました。

モジュールのダウンロード

 drush dl addtoany 

モジュールの有効化

 drush en addtoany 

※上記はダウンロードと有効化をそれぞれ行っていますが、いきなり有効化した場合、モジュールがなければダウンロードから行ってくれます。

設定

権限の設定

管理画面からモジュールを有効にすると、必要なモジュールでは権限ボタンが表示されます。
drushで行った場合はその旨が標準出力に表示されるようになっています。
drushを使った権限の付与方法がわからないので、管理画面で行いました。

AddToAnyモジュールでの権限設定は、設定画面へのアクセス制限のみですので、ログインしているユーザが管理ユーザであれば設定変更は必要ありません。
私のサイトでは投稿ユーザというロールを作成して通常はそのロールのユーザで作業しているのでそのロールにも権限を付与しました。

各種設定

AddToAnyの環境設定画面は以下の通りです。
アイコンサイズとサービスボタン設定

それぞれの設定はAddToAnyのサイトにあるドキュメントをみながら設定しました。

ボタン

ここでは、アイコンのサイズとサービスボタンおよびユニバーサルボタンを設定します。

サイズとサービスボタンの設定

 

  • アイコンサイズ32pixcel
  • Facebook,Twitter,Google+,LINE,MIXIを表示
  • 上記をユニバーサルボタンの前に表示

次が、ユニバーサルボタンの設定です。

 

ユニバーサルボタンの設定
  • ユニバーサルボタンのアイコンを標準アイコンを使用

配置

先ほど設定したサービスボタンとユニバーサルボタンを配置する場所を設定します。
選択肢はサイト内のコンテンツタイプです。
どのコンテンツタイプのノードに表示するのかを選択します。

設置場所の選択

 

  • 記事を作成する可能性のあるコンテンツタイプを選択
  • Contentに表示

Social Buttonsモジュールでは、コンテンツタイプごとに配置するボタンを変更できましたが、AddToAnyモジュールでは共通になります。
 

追加オプション

通常は必要ありませんが、今回は、ユニバーサルボタンで表示されるサービスの順番と無効にするサービスを設定しました。

追加オプションの設定

 

  • wordpress,hatena,blogger post,Google Bookmark,Yahoo Bookmarkを上位に表示
  • Aim,App Net,Amazon Wish List,Bibsonomy,Balatanin,Blinklist,Bookmark Fr,Box Net,Mail ru,Diary Ruのサービスを無効

ほとんどのサービスを無効にしたい場合、ユニバーサルボタンを非表示にするかもしくは、無効にしたいサービスをすべて記載するしかないようです。

設定が終わったら保存を押して変更内容を反映します。

カスタムテーマ対応

通常は以上の操作で利用できるはずですが、このサイトはテーマテンプレートをカスタマイズしていますので、ノードのコンテンツアイテムがこのままでは表示されません。
そのため、今回追加したAddToAnyのコンテンツアイテムが表示したい場所に表示されるようにnode.tpl.phpの編集が必要になります。

AddToAnyを表示したい場所に以下を追加しました。

 print render($content['addtoany']); 

次に「print render($content);」の直前に以下を追加しました。

 hide($content['addtoany']); 

※配置の設定で「Display in content section.」を選択しているため$contentの箇所を編集しています。

このあと、念のため、キャッシュクリアーをしておきます。

 drush cc all 

以上で「Share Buttons by AddToAny」モジュールを使った共有ボタンの配置が完了です。
 

Drupalバージョン

Drupal 7.x

モジュール

Share Buttons by AddToAny