このページには広告を掲載しています。

【AMP-Twitterタグ活用術】ツイート&タイムラインの埋め込みが超便利!!

　このページでは、上のようにかんたんにツイートをAMPページに埋め込みできる方法を解説しています。※上の埋め込みツイートは幅を調節してあります。レスポンシブデザインも可能です。

amp-twitterタグの使い方

ツイートをページに埋め込む際には、amp-twitterタグを使用します。また、ページの<HEAD>内にAMPのTwitter専用コンポーネントを読み込んでおく必要があります。

　順番を整理すると以下のとおり。

  1. HEADタグ内にコンポーネント読み込みの記述(コピペOK)
  2. 埋め込むツイートのIDをコピー
  3. amp-twitterのタグ記述
  4. 表示チェック

　この流れで、問題なく表示されます。

HEADタグ内にコンポーネント読み込みの記述(コピペOK)

　以下のタグをHEAD内にコピペ。公式サイトはこちら

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

埋め込むツイートのIDをコピー

埋め込みたいツイートのIDをURL欄でコピーします。

amp-twitterタグの記述

<amp-twitter width="300"
height="300"
layout="responsive"
data-tweetid="1154809863664537600">
</amp-twitter>

表示チェック

これで表示すると下のとおりになります。

widthとheightを変更しても、レスポンシブにしていれば、幅いっぱいになります。高さは自動でツイート側で設定されてしまいますのでやや縦長のデザインになります。

data-cards=hiddenの表示例

　ついでに属性値が設定可能です。data-cards=hiddenが設定可能です。

<amp-twitter width="300"
height="300"
layout="responsive"
data-tweetid="1154809863664537600"
data-cards="hidden">
</amp-twitter>

data-cards=hiddenに設定したものがこちら↓。画像が表示されなくなります。

タイムラインの埋め込み例

　最後に、タイムラインの埋め込みを。これは特定のユーザーのツイートをタイムラインで表示してくれるもの。ここでは、北海道の公式アカウントを例に使っています。

<amp-twitter width="300"
height="300"
data-timeline-source-type="profile"
data-timeline-screen-name="PrefHokkaido"
layout="responsive">
</amp-twitter>

　Twitterの@以下のアカウント名を↑の太字の部分にいれるだけです。これを表示したものが下になります。少々長くなります。heightで指定しても、相当な長さになりますので、特定のユーザのツイートをコンテンツに取り入れたいときには、役に立つと思います。

　以上、AMPページにツイートを埋め込む方法を調べてみました。

■更新履歴
2019/8/28　記事を公開しました。

<<無料のSEO対策テク
@seotech
↑ページの上へ戻る