AMP

amp-social-share

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

必須のスクリプト
<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: (省略可)デフォルトは「」(空の文字列)。
Facebookfacebook
  • data-param-app_id: (必須)デフォルトはなし。このパラメータは Facebook の app_id です。Facebook シェア ダイアログに必須です。
  • data-param-href: (省略可)デフォルトは「rel=canonical URL」。
  • data-param-quote: (省略可)引用やテキストの共有に使用できます。
LinkedInlinkedin
  • data-param-url: (省略可)デフォルトは「rel=canonical URL」。
Pinterestpinterest
  • data-param-media: (省略可、ただし強く推奨)デフォルトはなし。Pinterest で共有するメディアの URL。設定しなかった場合、Pinterest からエンドユーザーに、メディアをアップロードするようにリクエストがあります。
  • data-param-url: (省略可)デフォルトは「rel=canonical URL」。
  • data-param-description: (省略可)デフォルトは現在のページタイトル。
Google+gplus
  • data-param-url: (省略可)デフォルトは「rel=canonical URL」。
Tumblrtumblr
  • data-param-url: (省略可)デフォルトは「rel=canonical URL」。
  • data-param-text: (省略可)デフォルトは現在のページタイトル。
Twittertwitter
  • data-param-url: (省略可)デフォルトは「rel=canonical URL」。
  • data-param-text: (省略可)デフォルトは現在のページタイトル。
WhatsAppwhatsapp
  • data-param-text: (省略可)デフォルトは「現在のページタイトル - 現在のページ URL」。
LINEline
  • data-param-url: (省略可)デフォルトは「rel=canonical URL」。
  • data-param-text: (省略可)デフォルトは現在のページタイトル。
SMSsms
  • 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 ルールをご覧ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub