Important: this documentation is not applicable to your currently selected format stories!

amp-social-share

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

共有トラッキング機能を開発中です。

Required Scripts

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

Supported Layouts

container fill fixed fixed-height flex-item nodisplay responsive

ソーシャル共有ボタンを表示します。

必須のスクリプト	`<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>`
サポートされるレイアウト	container、fill、fixed、fixed-height、flex-item、nodisplay、responsive
例	AMP By Example の amp-social-share サンプルをご覧ください。

概要

amp-social-share コンポーネントは、さまざまなソーシャルプラットフォームプロバイダに対応するソーシャル共有ボタンを表示します。

例

例: 基本的なソーシャル共有ボタン

事前設定済みのプロバイダの場合、共有ボタンは、推測に基づいて一部のデフォルト値を設定します。その際、現在のドキュメントの正規 URL が、共有する URL として想定され、そのページタイトルが、共有するテキストとして想定されます。

<amp-social-share type="twitter"></amp-social-share>

例: パラメータを渡す

パラメータを共有エンドポイントに渡す場合、その共有エンドポイントに付加する data-param-<attribute> を指定できます。

<amp-social-share type="linkedin" width="60" height="44"
    data-param-text="Hello world"
    data-param-url="https://example.com/">
</amp-social-share>

LinkedIn は事前設定済みプロバイダの 1 つであるため、data-share-endpoint 属性を指定する必要はありません。

属性

type（必須）	プロバイダのタイプを選択します。この属性は、事前設定済みプロバイダの場合でも、未設定プロバイダの場合でも必須です。
data-target	ターゲットをどこに開くのかを指定します。デフォルトは `_blank` ですが、iOS 上のメールと SMS の場合に限り、例外的に `_top` がデフォルトになります。メールの場合に限り、この属性を使用してオーバーライドすることをおすすめします。
data-share-endpoint	未設定プロバイダの場合、この属性は必須です。広く利用されている一部のプロバイダの場合は、共有エンドポイントが事前に設定済みになっています。詳細については、事前設定済みプロバイダをご覧ください。未設定プロバイダの場合は、共有エンドポイントを指定する必要があります。
data-param-*	`data-param-*` というサフィックスの付いた属性はすべて URL パラメータに変換され、共有エンドポイントに渡されます。

事前設定済みプロバイダ

amp-social-share コンポーネントには、さまざまな事前設定済みプロバイダが用意されており、共有エンドポイントや一部のデフォルトパラメータがあらかじめ設定されています。

プロバイダ	タイプ	パラメータ
Web Share API（OS 共有ダイアログをトリガー）	`system`	`data-param-text`: （省略可）デフォルトは現在のページタイトル。 `data-mode`: （省略可）`replace` に設定すると、他の共有オプションはすべて削除されます。
メール	`email`	`data-param-subject`: （省略可）デフォルトは現在のページタイトル。 `data-param-body`: （省略可）デフォルトは「`rel=canonical` URL」。 `data-param-recipient`: （省略可）デフォルトは「」（空の文字列）。
Facebook	`facebook`	`data-param-app_id`: （必須）デフォルトはなし。このパラメータは Facebook の `app_id` です。Facebook シェアダイアログに必須です。 `data-param-href`: （省略可）デフォルトは「`rel=canonical` URL」。 `data-param-quote`: （省略可）引用やテキストの共有に使用できます。
LinkedIn	`linkedin`	`data-param-url`: （省略可）デフォルトは「`rel=canonical` URL」。
Pinterest	`pinterest`	`data-param-media`: （省略可、ただし強く推奨）デフォルトはなし。Pinterest で共有するメディアの URL。設定しなかった場合、Pinterest からエンドユーザーに、メディアをアップロードするようにリクエストがあります。 `data-param-url`: （省略可）デフォルトは「`rel=canonical` URL」。 `data-param-description`: （省略可）デフォルトは現在のページタイトル。
Google+	`gplus`	`data-param-url`: （省略可）デフォルトは「`rel=canonical` URL」。
Tumblr	`tumblr`	`data-param-url`: （省略可）デフォルトは「`rel=canonical` URL」。 `data-param-text`: （省略可）デフォルトは現在のページタイトル。
Twitter	`twitter`	`data-param-url`: （省略可）デフォルトは「`rel=canonical` URL」。 `data-param-text`: （省略可）デフォルトは現在のページタイトル。
WhatsApp	`whatsapp`	`data-param-text`: （省略可）デフォルトは「現在のページタイトル - 現在のページ URL」。
LINE	`line`	`data-param-url`: （省略可）デフォルトは「`rel=canonical` URL」。 `data-param-text`: （省略可）デフォルトは現在のページタイトル。
SMS	`sms`	`data-param-body`: （省略可）デフォルトは「`rel=title - rel=canonical` URL」。

未設定プロバイダ

事前設定済みプロバイダ以外でも、amp-social-share コンポーネント内に追加の属性を指定することで、未設定プロバイダを使用することができます。

例: 未設定プロバイダ用の共有ボタンを作成する

以下の例では、Facebook Messenger 用の共有ボタンを作成するため、data-share-endpoint 属性に対して Facebook Messenger カスタムプロトコル用の適切なエンドポイントを設定しています。

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

未設定プロバイダは事前に設定されていないため、各プロバイダに適したボタンの画像とスタイルを作成する必要があります。

スタイル

デフォルトスタイル

amp-social-share には、広く利用されているプロバイダ用の設定が、デフォルト値としてあらかじめ用意されています。事前設定済みプロバイダ用のボタンは、そのプロバイダの正式な色とロゴでスタイルが設定されています。デフォルトの幅は 60 ピクセル、デフォルトの高さは 44 ピクセルです。

AMP ページ内で使用できるスタイル設定済みのレスポンシブ共有リンクについては、AMP Start をご覧ください。

カスタムスタイル

独自のスタイルを指定したい場合、次のように指定するだけで、事前定義済みのスタイル設定をオーバーライドできます。

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

変数の置換

<amp-social-share> 要素内で AMP 変数グローバル置換を使用することができます。以下の例の場合、TITLE がページタイトルに置換され、CANONICAL_URL がドキュメントの正規 URL に置換されます。

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

検証

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

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

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

Stack Overflow にアクセスする

バグや不足している機能がありますか？

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

GitHub にアクセスする

amp-social-share 1.0 0.1