AMP

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>

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

必須のスクリプト
<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 にアクセスする