【AMP】TwitterなどのSNSやYoutubeを埋め込む方法

2019年 8月 15日  2019年 8月 15日

【AMP】TwitterなどのSNSやYoutubeを埋め込む方法

今どきのブログ運営はすべてのプラットフォームを駆使する必要があると思っています。

「カノニカルAMPサイトを作ろうかなって」思ったので、しらべて見ました。

解説していきますね。

AMPサイトにTwitterを埋め込む方法

amp-twitterのタグを使います。

head内には以下のスクリプトを書き込みます。

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

そして、肝心の記事内での書き方はこうです。

Hugoマークダウンの中に書くのが嫌なら、ショートコードを用意するのもありです。

<amp-twitter data-tweetid="1165601808808435712"    width="1"    height="1"layout="responsive"></amp-twitter>

width=“1” height=“1”と指定していますが、関係無いです。

data-tweetidの部分はツイートから持ってきます。

私の場合は「ツイートの埋め込み」から探してきていますかね。

(twitterアプリはurl表示されないので…)

他にも「data-theme=“dark”」の属性を入れれば黒いデザインに変える事もできます。

AMPサイトにinstagramを埋め込む方法

仕組みはtwitterと全く同じです。

Hugoのデフォルト機能でinstagramを読み込む方法もあるのですが、AMPサイトなのでね…

head部分

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

肝心の埋め込み部分はこんな感じ。

<amp-instagram data-shortcode="B0OLG1UASsr"    width="300"    height="300" layout="responsive"></amp-instagram>

個人的にはresiponsiveを指定して、親要素いっぱいに広げるのがいいんじゃないかなって。

data-shortcodeはtwitterのときと同じように取得。

今回は参考までにブラウザから開いて、リンクから取得しています。

AMPサイトにyoutubeを埋め込む方法

こちらも仕組みとしては同じです。

head部分にライブラリを読み込みます。

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

記事内に書くのはこう。

<amp-youtube
    data-videoid="TGlgRguKCNE"
    width="800"
    height="450"
    layout="responsive">
</amp-youtube>

twitterやインスタと同様に、urlから持ってくるのが良いかなと。

変なパラメータがたくさんついてめんどくさいときは、共有ボタンから拾ってくると良いです。

まとめ

AMPを各メディアと連携する方法でした。

基本的に、ライブラリが用意されているので、それを読み込んで、idを書き換えるだけです。

「AMP twitter」なんかで検索するとより詳しい記事が出てきます。

これからの個人ブログは各メディアを使った総合力で勝負です!