AMP

amp-addthis

Description

AddThis の埋め込みウェブサイト ツールを表示します。

 

Required Scripts

<script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>

実例

AddThis の埋め込みウェブサイト ツールを表示します。

必須のスクリプト <script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
サポートされるレイアウト fill、fixed、fixed-height、flex-item、nodisplay、responsive

AddThis を使用する理由

amp-addthis コンポーネントは、シンプルで美しい共有ボタンを実現します。これにより、ウェブサイト ユーザーは、メッセンジャーや、WhatsApp、Facebook、Twitter、Pinterest など、200 を超えるソーシャル チャネルに簡単にコンテンツを共有することができます。

AddThis は、1,500 万以上のウェブサイトで利用されている信頼できるツールであり、全世界で 20 億人以上のユニーク ユーザーが 60 以上の言語でコンテンツを共有しています。

共有ボタン

フローティング

ページの左右や上下に配置可能で、閲覧者が画面をスクロールすると、一緒に移動します。それほど強引にならずに、共有を促進する優れた方法です。

例:

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
  width="320"
  layout="responsive"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="957l"
  data-widget-type="floating">
</amp-addthis>

インライン

共有ボタンをコンテンツに統合することで、シームレスな共有機能を実現できます。

例:

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
  width="320"
  height="92"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="mv93"
  data-widget-type="inline">
</amp-addthis>

属性

data-pub-id ログインすると、AddThis ダッシュボードの URL 内に AddThis サイト運営者 ID が表示されます。たとえば、URL が https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff の場合、ra-5c191331410932ff がサイト運営者 ID になります。
data-widget-id 表示するツールの AddThis ウィジェット ID。AddThis ダッシュボードにも表示されます。特定のツールのウィジェット ID は、AddThis ダッシュボード内でそのツールを開き、URL の最後の部分をコピーすることで確認できます。たとえば、URL が https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l の場合、957l がウィジェット ID になります。
data-widget-type ウィジェットのタイプを示す属性。
  • フローティング: data-widget-type="floating"
  • インライン: data-widget-type="inline"
data-title (省略可)この属性を設定した場合、共有の発生時に AddThis ツールが共有を試みるタイトルになります。設定しなかった場合、amp-addthis タグを格納しているドキュメントのタイトルが使用されます。
data-url (省略可)この属性を設定した場合、共有の発生時に AddThis ツールが共有を試みる URL になります。設定しなかった場合、amp-addthis タグを格納しているドキュメントの location.href プロパティが使用されます。
data-media (省略可)この属性を設定した場合、共有の発生時に AddThis ツールが共有を試みるメディア(画像や動画)の URL になります。設定しなかった場合、未定義のままになります。
data-description (省略可)この属性を設定した場合、共有の発生時に AddThis ツールが共有を試みるページの説明になります。設定しなかった場合、未定義のままになります。

実装に関するドキュメント

  1. まだ AddThis アカウントを持っていない場合は、https://www.addthis.com/register でアカウントを作成する必要があります。AddThis アカウントの作成は完全に無料で、包括的なウェブサイト ツールや詳細な分析レポートを利用して、サイトのソーシャル トラフィックを把握することができます。
  2. ダッシュボードに移動して、共有ボタンをカスタマイズします(現在のところ、AMP がサポートしているのは、フローティング共有ボタンとインライン共有ボタンだけに限られます)。
  3. 共有ボタンを自由にカスタマイズして、[Activate Tool] をクリックします。[Get The Code] ページにリダイレクトされます。
  4. 最後に、インライン コードをコピーして、共有ボタンを表示するページの body セクションに貼り付けます。フローティング共有ボタンの場合、コードは body 内の任意の場所に配置できます(ツールの設定に応じて画面の左や右に自動的に表示されます)。

以上で設定は完了です。共有ボタンがページ上に表示されます。

詳細な手順については、YouTube の動画をご覧ください。

検証

AMP 検証ツール仕様の amp-addthis ルールをご覧ください。

プライバシー

http://www.addthis.com/privacy/privacy-policy/

AddThis ツールおよび AddThis ツールバーは、エンドユーザーがサイト運営者のサイトとインタラクションする際や、ツールバー ユーザーが AddThis ツールバーとインタラクションする際に使用するデバイスから情報(AddThis データ)を収集します。

主な AddThis データは次のとおりです。

  • IP アドレス、モバイル広告 ID(MAID)(これにより、モバイルアプリ デベロッパーはモバイルアプリを使用しているユーザーを識別できます)、モバイルアプリ ID、ブラウザのタイプ、ブラウザの言語、オペレーティング システムのタイプ、エンドユーザーがサイト運営者サイトやツールバーにアクセスした日時。
  • ツールバーを使用したユーザー。
  • サイト運営者サイト上で行った操作(エンドユーザーがサイト運営者サイトに滞在した期間、エンドユーザーがサイト運営者サイト上で行ったコンテンツ共有操作、エンドユーザーがサイト運営者サイト上で行ったスクロール操作など」)。
  • エンドユーザーがサイト運営者サイトの検索や移動に使用した参照元 URL やウェブ検索。
  • ツールバー ユーザーが AddThis ツールバーの検索機能に入力したキーワード。ツールバー ユーザーが AddThis ツールバーをダウンロード、インストール、アンインストールした日時。
  • エンドユーザーが AddThis ツールを使用する頻度や、ツールバー ユーザーが AddThis ツールバーを使用する頻度に関する情報。
  • エンドユーザーやツールバー ユーザーの IP アドレスから取得した位置情報データ。

AddThis データは、該当する法律の求める範囲において、個人情報として扱われます。サイト運営者は、AddThis の利用規約に従い、エンドユーザーの同意と承認を取得し、エンドユーザーから Oracle に収集される AddThis データの規定に関して必要な通知を提供する必要があります。

サポート

AMP に AddThis を実装するうえで、ご質問がある場合やサポートが必要な場合は、こちらからサポートチームへチケットをお送りいただくか、help@addthis.com までメールでお問い合わせください。

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする