WordPressではTwitterやInstagramの埋め込みが簡単にできるよね。

普通なら埋め込みコードを取得して、それを貼り付けなければならいところを、URLを貼るだけで自動的に埋め込んでくれる。

SNSの埋め込みは便利だし記事に彩りもできるので有効に活用していきたいところです☆

でもちょっと待って！

TwitterやInstagramの埋め込みは俗に言う第三者コードに該当するので、PageSpeed Insightsはガクッと落ちてしまいます(ノД`)・゜・。

今回は、そうならないようにするための方法として、遅延読み込みがあるということを紹介します☆

TwitterやInstagramの遅延読み込みは可能なの？

目次へ戻る

YouTubeやWordPressのブログカードはiframeだから、iframeの遅延読み込みを実装できれば実現できるよね。

でもTwitterやInstagramの埋め込みはiframeじゃなくてblockquote。

iframeならsrcをdata-srcにしてゴニョゴニョって感じでできたけど、blockquoteはsrcがない。

一体どうしたらいいの(;´Д｀)

って感じで、まずこれが気になるかも知れないけど、できます（ｷﾘｯ

いや、むしろできました。

TwitterやInstagram埋め込みの遅延読み込みのやり方

目次へ戻る

できることはできるんだけど・・・。

最初に言っておくと簡単ではないですorz

難しい内容になるので、分からない場合は誰かにやってもらった方がいいかな。

さて、まず参考にするのはこのブログで紹介するのは3度目となった以下の記事。

https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html

これはアドセンスを遅延読み込みする時のものだけど、TwitterやInstagramでも代用できました。

Twitterの埋め込みコードは以下のような感じ。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">たこ焼きを作ってみた。<br><br>いや、正確にはたこ高かったから代わりに餅とチーズ入れたんだった。<br><br>たこ焼きではない? <a href="https://t.co/C46Nz99fWs">pic.twitter.com/C46Nz99fWs</a></p>— Yossy's Bunny (@yossy_s_ws) <a href="https://twitter.com/yossy_s_ws/status/1215184148064681984?ref_src=twsrc%5Etfw">January 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ここから、前述した記事の考え方に基づき、以下を削除します。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Instagramでも同様です。

埋め込みコードは以下のような感じだけど、

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B6wtB48hq6B/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">

～　中略　～

<a href="https://www.instagram.com/p/B6wtB48hq6B/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">ARASHI(@arashi_5_official)がシェアした投稿</a> - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-01-01T02:54:07+00:00">2019年12月月31日午後6時54分PST</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>

最後の方にある以下の部分を削除します。

<script async src="//www.instagram.com/embed.js"></script>

あとは、紹介した記事でいう、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

の部分をTwitterやInstagramのJavascript部分と置き換えればOK！

WordPressでやる場合はフィルターが楽

目次へ戻る

すでに埋め込んでいる記事がたくさんある場合、1記事1記事手作業でJavascriptの記述を削除するのは大変だよね。

人力でやると予期せぬミスだってありうるし。

WordPressでは記事にフィルターがかけられるので、それを使った方がいいです。

function themename_twitter_instagram_async( $content ) {
	$content = str_replace('<script async src="//www.instagram.com/embed.js"></script>','',$content);
	$content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','',$content);
	return $content;
}
add_filter('the_content','themename_twitter_instagram_async', 11);

こんな感じ。

以上です(*´ω｀*)

追記

目次へ戻る

Javascriptを削除した後は、

https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html

の記事で紹介されているように削除したJavascriptを読み込んでね☆

あとがき

目次へ戻る

どっかで見かけたけど、Twitterのツイート埋め込みってツイートをした人の許可を得る必要ないんだってね。

たまにツイートを引用しないでっていう人がいるらしいけど、規約でそういうのの権限はTwitter側にあるから、気にせず埋め込んでOKとか。

それを証明するために「埋め込まないで！」って言ってるツイートを堂々と埋め込みしててちょっと怖かった(;´Д｀)

ツイッターは文字を打つだけで気軽にできるからやってるけど、インスタはやってないな～。

あんまり出かけないし、出かけたとしても写真撮るの面倒で（笑

たまに撮る程度ならツイッターでもいいしね♪

インスタの良さがよく分からないけど、流行っているモノだし手を付けておかないと、後々苦労しそうな気はしてるけど・・・。