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

2016/02/24 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対応のInstagramの投稿を埋め込む方法 https://t.co/elodMwkVOf #amp #Instagram
— bouya Imamura (@s56bouya) February 14, 2016

ツイートのURLは

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

です。

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

<amp-twitter width=486 height=657
    layout="responsive"
    data-tweetid="700186990524833793" 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/700186990524833793

なので、ツイートIDは

700186990524833793

です。

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

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

Twitterの埋め込みツイートをAMP対応させる方法 https://t.co/IGXfRFTCIb #amp @s56bouyaさんから
— bouya Imamura (@s56bouya) February 24, 2016

Author:bouya Imamura