amp-social-share

1.0 0.1

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

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

概要

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 属性を指定する必要はありません。

属性

事前設定済みプロバイダ

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

未設定プロバイダ

事前設定済みプロバイダ以外でも、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-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 ルールをご覧ください。