ソーシャルメディア統合のための8つのAMPコンポーネント
グーグルのモバイルウェブ標準が抱える最大の矛盾, 高速モバイルページ 解決する必要があります モバイルサイトを早くする, しながら 機能的で豊富なコンテンツを維持する. つぶやき、ビデオ、オーディオ、投稿、写真など、人気のソーシャルメディアサイトからの埋め込みなしには、リッチで魅力的なコンテンツを想像することはできません。.
拡張AMPコンポーネント - 他の優れた機能の中で - 統合するための優れた方法を提供します AMP ソーシャルコンテンツの種類が異なる文書.
拡張AMPコンポーネントのしくみ
AMPの理念の中心には、Googleの理念があります。 ベストパフォーマンスプラクティス. ページの読み込み時間を短縮するために、AMP標準では フロントエンドテクノロジの使い方. たとえば、カスタムJavaScript、外部スタイルシート、および外部リソースをロードするHTML要素などは使用できません。
その代わりに、たくさんの AMPコンポーネント あなたがすることができます 外部リソースを表示する, サイト上の画像、ビデオ、オーディオ、広告など.
AMPコンポーネントは 特定のHTMLタグ これは通常のHTMLタグと同様に使用できます。そのうちのいくつかは 作り付け AMPランタイムに 拡張機能として働く. AMPページでソーシャルメディアの統合を可能にするコンポーネント すべての拡張コンポーネント.
Extended AMP Componentsを使用するには 所属するスクリプトをインポートする の中に AMP HTML文書のセクションAMPはオープンソースプロジェクトなので、将来的には拡張コンポーネントの数が増えるかもしれません。.
この記事では、私たちはあなたを助けることができるAMPコンポーネントの一握りを集めました ソーシャルメディアとの連携. スクリプトのバージョンは 時間とともに変化する可能性があります, あなたのサイトにそれらを含める前に常にドキュメントをチェックしてください.
1. アンプフェイスブック
あなたはいつもする必要があります 埋め込みポストの寸法を指定する, これはあなたが追加する必要があることを意味します 幅 そして 高さ 整数ピクセルの値を持つ属性。 Facebookの投稿上部にある[埋め込み]メニューをクリックして、適切なサイズを見つけることができます。.
あなたもする必要があります 与えられた記事のURLを追加します の中に データhref 属性。あなたは、Facebookの投稿のタイムスタンプをクリックすることによってURLを見つけることができます、そしてブラウザはアドレスバーにユニークなURLを挿入するでしょう。.
あなたがしたい場合は 所属するFacebookの投稿なしでビデオを埋め込む, オプションを追加 data-embed-as = "video" 属性
あなたがしたい場合は 埋め込みをレスポンシブにする 使用 レイアウト の属性 「レスポンシブ」 値。あなたはまた、オプションを使用することができます レイアウト 他のAMPコンポーネントのレイアウトを制御するための属性.
コード例：
コードプレビュー：
含めるスクリプト：
2. アンプツイッター
あなたはできる ツイートを埋め込む を使用してAMPページに
そうするために、あなたはする必要があります ツイートのIDを指定してください の中に データツイート 属性。 Twitter APiの表示オプションを追加することで、ツイートの表示方法を変更できます。 データ-* HTML5属性.
たとえば、以下の例ではTwitter APIを使用しました。 linkColor 表示オプション データリンクカラー （その データ-* デフォルトのリンクの色を、Hongkiat.comがTwitterアカウントで使用している色に変更する.
コード例：
コードプレビュー：
の Twitterは現在、固定アスペクト比をもたらすAPIを提供していません
.
これはあなたがする必要があることを意味します 手動で設定する 幅 そして 高さ 属性, AMPランタイムはツイートの一部（通常は下）を表示しないことがあるので.
AMPページを公開する前に、埋め込みツイートがどのように見えるかを確認することを常にお勧めします。.
プレースホルダーを追加する
必須ではありませんが、資料では推奨されています プレースホルダーを追加する ツイートがすぐに読み込まれない場合.
の プレースホルダー 属性は各AMPコンポーネントで使用できます。プレースホルダーは すぐに表示 最終的なリソースが利用できない場合AMP要素がロードされると、 プレースホルダーを非表示にします.
上記のサンプルコードがどのように見えるかを見てください。 プレースホルダー付き. Twitterでは、「ツイートを埋め込む」ボタンをクリックし、埋め込むことができるブロック引用符を（最後にスクリプトを付けずに）コピーして貼り付け、 プレースホルダー の属性 タグ.
プレースホルダーを含むコード例：
高速モバイルページを検証する方法（#AMP） #google #seo https://t.co/eVOSAtr5Ax
- ホンキート（@hongkiat） 2016年8月15日
含めるスクリプト：
3. アンプ・インスタグラム
あり
あなたがする必要があります 寸法を指定する との埋め込みの 幅 そして 高さ 属性、そしてまたあなたがしなければならない 識別子を追加する Instagramの写真やビデオの データショートコード 属性.
URLの下の写真の例では、URLの最後に識別子があります。 https://www.instagram.com/p/-PFt7tF8Km/, だから私は使用する必要があります -PFt7tF8Km の値として データショートコード 属性.
コード例：
コードプレビュー：
レスポンシブレイアウト用, AMPは自動的に必要なスペースも計算します を含む “Instagramのクロム” （アカウント名、日付、お気に入り数など）.
これはつまり、 幅 そして 高さ, まで 2つの値が等しい （Instagramの写真は通常正方形です）、AMPランタイムは利用可能なスペースに従って画像のサイズを変更します.
写真が正方形にならない場合は、実際の写真を指定する必要があります。 幅 そして 高さ 値.
にとって 固定レイアウト, 必要がある 余分なスペースを含める 画像の寸法を計算するときにInstagramのクロムに必要な（上下：+ 48ピクセル、左右：+ 8ピクセル）.
含めるスクリプト：
4. アンプ - 面白い
ピンウィジェットを埋め込む
Pinウィジェットを埋め込むには、寸法、ピンのURLを指定する必要があります。 データURL 属性を追加する必要があります。 data-do = "embedPin" 属性.
コード例（デフォルトサイズ）：
デフォルトのPinウィジェットは非常に小さいので、次のようにしてより大きなバージョンを選ぶこともできます。 データ幅= "中" 属性.
コード例（中サイズ）：
コードプレビュー（中サイズ）：
Pin Itボタンを表示する
あなたもすることができます Pin Itボタンを追加する の助けを借りてあなたのAMPページに 幅 そして 高さ 寸法、あなたは 4つの属性を指定するために必要 Pin Itボタンを埋め込むには：
data-do = "buttonPin"これがPin ItボタンになることをAMPランタイムに知らせるためデータURLあなたが共有したいURLでデータメディアユーザーに固定させたい画像の絶対URLデータ記述Pin createフォームに表示する説明付き
がある さまざまなボタンサイズ, から選択するには、利用可能なすべてのサイズのドキュメントを確認してください.
コード例：
この例では、以前のHongkiat.comの投稿からユーザーが画像を固定できるようにするための[Pin It]ボタンを作成しました。私は小さい長方形のボタンサイズを使いました.
コードプレビュー：
画像の上に[Pin It]ボタンを表示するには、追加のCSSを使用する必要があります。.
を使用してPinterest Followボタンを作成することもできます。 data-do = "buttonFollow" 属性を設定し、[フォロー]ボタン内に表示する名前を指定します。 データラベル のアカウントのURL データhref 属性.
コード例（フォローボタン）：
含めるスクリプト：
5. アンプサウンドクラウド
SoundCloudは、ユーザーが自分の音楽を共有できる人気のあるオーディオ配信プラットフォームです。の助けを借りて
このコンポーネントは とだけ使用される 固定高 レイアウト これはあなたが 高さ, 幅はAMPランタイムによって計算されます。その結果、内蔵SoundCloudオーディオプレーヤーは 利用可能なすべての水平方向のスペースを埋める.
の データビジュアル どちらかの属性 本当の または 偽 （デフォルトは 偽）.
両方のモードでは、あなたが使用する必要があります データトラックID の属性 識別子を指定してください オーディオSoundCloud.comのオーディオプレーヤーの下にある[共有]ボタンをクリックし、埋め込みコード内の長い形式のURLを調べると、オーディオIDを見つけることができます。.
クラシックモード
の クラシックモード 左側に小さなサムネイル画像、右側にオーディオプレーヤーが表示されます。あなたは適切な値を得ることができます 高さ SoundCloud.comの埋め込みコードからの属性.
クラシックモードでは、オーディオプレーヤーの色を指定できます。 データ色 属性（ビジュアルモードではこれはできません）.
コード例（クラシックモード）：
コードプレビュー（クラシックモード）：
ビジュアルモード
に ビジュアルモード, 注目の画像は、オーディオプレーヤーの背後にあります。ここでは、あなたはまた、適切なを見つけることができます 高さ SoundCloud.comの埋め込みコード内のVisual Modeに属する.
コード例（ビジュアルモード）：
コード例（ビジュアルモード）：
あなたがしたい場合は プライベートオーディオを埋め込む, オプションを使用 データシークレットトークン 属性.
含めるスクリプト：
6. つる
Vineは短い形式のビデオ共有サイトで、6秒間の長いビデオを友達と共有できます。の
このAMPコンポーネントは非常に単純です。サイズとVineビデオのIDを追加するだけで済みます。 データブドウ 属性。各VineのURLからIDを取得できます.
Vinesは正方形なので、レスポンシブレイアウトを使用する場合は、Instagram埋め込みと同じ規則が適用されます。あなたはに任意の値を追加することができます 幅 そして 高さ 属性, 等しくなるまで 彼らはきちんと動くでしょう.
コード例：
コードプレビュー：
含めるスクリプト：
7. アンプ - ユーチューブ
あなたはできる YouTubeの動画を埋め込む の助けを借りてAMPのページに
そのためには、寸法とビデオのIDを追加する必要があります。 data-videoid 属性。指定する場合 幅 そして 高さ, それは重要です アスペクト比に注意を払う.
あなたもすることができます YouTube埋め込みのパラメータを使用する AMPドキュメントでは、単にパラメータの名前を挿入してください 後に データパラメータ- 接頭辞.
コード例：
この例では、私は 開始 のYouTubeパラメータ data-param-start ビデオを43秒から開始するための属性.
コードプレビュー：
含めるスクリプト：
その他のビデオ共有サービス
AMPには、他のビデオ共有サービスに関連するコンポーネントもあります。 と同じように動作します
8. 社会的シェア
ソーシャルメディアの埋め込み以外にも、 ソーシャルシェアボタンを表示する AMPページで
ソーシャルシェア機能は 一部のプロバイダ用に事前設定済み, 正しい設定であなたは使用することができます
事前設定済みの共有ボタン
事前設定済みの共有ボタン あまり多くの設定を必要としないでください。あなたが定義する必要があります 幅 （デフォルトは60ピクセル） 高さ （デフォルトは44px）属性、およびソーシャルメディアプロバイダの名前 タイプ 属性.
Facebookの場合は、FacebookアプリのIDをに指定する必要があります。 data-param-app_id 属性.
コード例：
コードプレビュー：
事前設定 仮定をする 共有したいURLは現在のページの正規のURLであり、共有に含めたいテキストはページのタイトルです。.
他の設定を使いたい場合は、次のようにしてください。 3つのオプション属性：
データテキスト共有に含めたいテキストのデータURL共有したいURLのデータ帰属あなたのシェアを帰属させたい人またはプロバイダの名前
未設定の共有ボタン
のソーシャルシェアボタンを表示する 未設定のプロバイダ, WhatsAppなど、あなたがする必要があります プロバイダのカスタムプロトコルを指定します の中に データ共有エンドポイント 属性。あなたがこれを行うことができる方法をドキュメントでチェックしてください.
含めるスクリプト：
