Twitterの埋め込みツイートをAMP対応させる方法

AMP

WebサイトのAMP（Accelerated Mobile Pages Project）対応を少しずつ行っています。今回は、Twitterの埋め込みツイートをAMP対応させる方法についてまとめました。興味がある方はご参考ください。

対応については、AMPのドキュメント「amp-twitter.md」を参考にしています。

スクリプトを読み込もう

まず、Twitterの埋め込みツイートをAMP対応させるためには「<head></head>」内に以下のスクリプトを読み込みます。

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

読み込み順はドキュメントを参考にして「<meta charset=”utf-8″>」以降に読み込み「<style amp-boilerplate>」の前に読み込みました。スクリプトを読み込んだら、次は埋め込みツイートをAMPに対応してみましょう。

埋め込みツイートをAMPに対応してみよう

ではさっそくやります。今回は以下の埋め込みツイートを例にします。

ツイートのURLは

https://twitter.com/s56bouya/status/698659903708135426

です。

埋め込みツイートをAMPに対応させるには「amp-twitter」というAMP専用の要素を使って下のように書きます。

<amp-twitter width=486 height=657
    layout="responsive"
    data-tweetid="698659903708135426" data-cards="hidden"></amp-twitter>

要素内にある属性と、その説明を概要程度ですが以下にまとめました。

data-tweetid ツイートID
layout レスポンシブ対応させる場合は「responsive」
width 幅
height 高さ
data-cards Twitterカードを表示しない場合は「hidden」

「data-tweetid」属性にはツイートIDを入れますが、URLからツイートIDを判別することができます。今回例にしたツイートのURLは

https://twitter.com/s56bouya/status/698659903708135426

なので、ツイートIDは

698659903708135426

です。

「layout」属性のレスポンシブ対応は、閲覧する端末によって幅と高さのサイズの比率を保持したまま拡大・縮小してくれますので、入れておいてもいいですね。

このページもAMP対応させています。「https://www.imamura.biz/blog/25197/amp」にアクセスすると、Twitterの埋め込みツイートがAMP対応されていることが確認できます。

著者:bouya Imamura