WP Twitterフィードを表示させるには〜埋め込みカスタム時の落とし穴

WordPressの投稿・固定ページでTwitterフィード(タイムライン)を表示させるのは超簡単、表示させたいTwitterアカウントのURLを書くだけでレスポンシブ対応のTwitterフィードを表示してくれます。

我が家のだったら「https://twitter.com/inmycab」(下記参照)

 

ただウィジェットのカスタムHTMLへの記載では表示しないので、サイトに埋め込み設置したいときは....

 

1. https://publish.twitter.com/#にアクセスする
2.埋め込むツイッターアカウントのURLを入力して「→」をクリック
3.左側の「Embedded Timeline」(埋め込みタイムライン相当)をクリックして下に表示されるコードをコピー取得して使います。

我が家の場合...
<a class="twitter-timeline" href="https://twitter.com/inmycab?ref_src=twsrc%5Etfw">Tweets by inmycab</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

縦・横サイズを指定するオプションもあります。

ちなみに最新Tweetだけを取得するには、a classに「data-tweet-limit="1」を加筆すると旨く表示されます。

 

埋め込みカスタム時の落とし穴

知人と電話でそんなやりとりをしていたら...「表示されないぞ!」とLINEが来ました。

ウィジェットにさっき取得したコードを貼り付けてみたところ何にも表示されないと言う。ちゃんと操作したか疑わしい知人ではあったので微に入り細に入り確認していってもいっこうに旨く表示されない。

コードを貼り付けたウィジェットの下側を確認してもらうと...

「保存」ボタンを押しても変わらないとのこと。ちなみに正常だと...

コードに誤りがあったりすると赤いX印が横に付いたりしてすぐ分かるのですが、コードが旨く動作してない場合は保存ボタンを押しても「完了」しないことがあります。

今回の場合で言うと<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>ですが、原因はWAF設定である場合が多いです。

サーバーのWAF設定をOFFにしてもらったところ、ウィジェットで保存ボタンを押してちゃんと「完了」してくれてTweetも表示してくれるようになりました。

プラグインによっては拡張機能のWAF設定が影響している場合もあります。

ちなみにウィジェットの設定・保存が完了したら、WAF設定は元に戻しても大丈夫です。”widgets.js”の最初の認証動作時のみWAF設定OFFであれば、その後はちゃんとウィジェット動作(Tweet表示)します。