WordPress

Twitter などの SNS 埋め込み用スクリプトを必要な時だけ読み込んでみる

Twitter などの SNS 埋め込み用スクリプトを必要な時だけ読み込んでみる

Twitter などの SNS 埋め込みに必要なスクリプトを、body 閉じタグ直前で、必要な時だけ読み込んでみたいと思います。

現在の投稿内容から埋め込み内容を検索、指定した文字列(クラスや URL など)が一致したら条件分岐でスクリプトを出力するという流れです。

なお、掲載しているコードは WordPress で作ったサイトを前提としています。ご了承ください。

必要な時だけスクリプトを読み込む理由

Twitter などの SNS に投稿された内容を WordPress に埋め込むには、専用のコードを発行して記事中に貼り付ける必要があります。

専用のコードにはスクリプトタグが含まれていて、それを記事中で読み込むことで埋め込み内容が表示される仕組みです。

しかし、単純にコピペするだけだと以下のような状態になってしまいます。

  • 埋め込みの数だけスクリプトが貼り付けられる
  • 記事のレンダリング途中でスクリプトが読み込まれる

読み込みスピードに多少影響しそうですし、AMP 対応したい場合は正規表現でスクリプトタグを置換しなければいけません。

特にぼくはこの置換設定が面倒なので、埋め込みコードがある記事でのみ body 閉じタグ直前でスクリプトを読み込むようにしています。

strpos() で文字列を見つけてスクリプトを読み込む

実際に書いているコードがこちら。以下を body 閉じタグ直前に書きました。

<?php
	$string = $post -> post_content;
	if(strpos($string, 'class="twitter-tweet"') !== false) {
		echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>';
	}
?>

グローバル変数の$postから記事本文を抜き出して、その中身に埋め込みコードに含まれるユニークな文字列(Twitterならclass="twitter-tweet"など)をstrpos()で検索。文字列を見つけたらscriptを読み込みます。

うまくいっていれば、この下にツイートが表示されているはずです。

この分岐は AMP 対応時に便利です。AMP ページでは、埋め込みコードが無い状態で専用のスクリプトを読み込んでしまうと、バリデーションチェックで警告が出てしまうからです。

エラーではないので今のところ大きな問題にはなりませんが、将来的に警告で済まなくなる可能性もあります。こわいですね🤤


この方法を思いつく前は Google タグマネージャを使って出し分けていたのですが、設定も面倒だし読み込みが遅いような気がしたので今回の方法に切り替えました。

さらにもうひとつ、JavaScript だけで読み込みをコントロールする方法も併用しているので、その方法についてはまた今度記事にしたいと思います。

というわけで、SNS 埋め込みのスクリプトを body タグの最後に読み込んでみる、でした。

もっと良い方法があったり、間違っていそうなところがあったらぜひ教えていただきたいです。よろしくお願いします🙇🏻