昨日のブログを書いている最中、twitterのツイート埋め込みが正常に表示されないことに気づきました。
バレンタインスイーツ サタデープラス 王様のブランチ | 気ニナル身ニナルうぇぶのぉと
半日かけて調べた結果なんとか解決しましたので、
ツイートが埋め込みでなく引用の形に表示される
ワードプレスではツイートのURLか、埋め込みコードを記載すればツイッターのツイートが埋め込まれます。下のような感じですね。
【定番商品紹介】
＊クリーム白玉あんみつ＊
店内喫茶ではあんみつにアイスクリームと白玉をのせた『クリーム白玉あんみつ』が大人気！※こちらは亀戸天神前本店、亀戸支店、柴又帝釈天参道店、船橋屋こよみ 広尾本店にてお召し上がりいただけます。https://t.co/tRyit2pXcX pic.twitter.com/RXjJkisz7y
— 元祖くず餅 船橋屋 (@funabashiya_) February 3, 2020
埋め込みは今回が初めてではなく、過去にも何度か行っています。
昨日の記事を書いている途中で下書きをプレビューすると、ツイート埋め込み部分が
と、blockquoteタグで囲んだ時の表示になり、ツイートの中に含まれる画像もurlのみ表示されました。
ツイートが表示されない一般的な原因
ワードプレス、ツイッター 埋め込み 表示できない、4語で検索してわかったことは、原因として考えられることとして次の要因があること。
- プラグインが悪さをしている
- JavaScriptが有効になっていない
- 追加したCSSが悪さをしている
プラグインについてはAKISMETやCLASIC EDITORなど定番プラグインは除いてすべて停止し、キャッシュをクリアしてみましたが解決しません。追加CSSもすべてクリアしてみましたが変化はありません。JavaScriptも一応確認しましたがこれも問題ありません。
これら検索した原因について、初めて埋め込みしてうまくいかなかったのであれば一因になるのでしょうが、当サイトの場合、先述の通り過去に埋め込みをしており、それは普通に表示されます。
試しに今回うまく表示できなかったツイートの埋め込みコードを、過去記事に貼り付けてプレビューしてみるとしっかり表示されます。
かんたんリンクとSNS埋め込みは同居できない
上はツイートがうまく表示されないプレビュー画面の一部ですが、amazonや楽天で商品を見るリンクを試しに消してプレビューしました。すると、うそのようにしっかりと表示されるようになりました。
この商品リンクは、もしもアフィリエイトの「かんたんリンク」で作成したものですが、JavaScriptが使われています。これが悪さをしていたようです。ちなみにインスタグラムの埋め込みもやはり正常に表示されませんでした。
昨日公開した記事の最後の方に当該のかんたんリンクを貼り付けましたが、この場合は見てわかるように正常に表示されます。ちなみに下の画像は記事の一番最後にかんたんリンクを張ったときのプレビュー画面のキャプチャーです。
かんたんリンクを試しに中間くらいに貼ってみると、SNSの埋め込みすべての表示ができなくなりました。下の画像はかんたんリンクの上の埋め込みが正常に表示されないことを示しています。
ツイッター埋め込みが正常に表示できないときの対処法をもうひとつ
これはワードプレスにツイートのurlを記載したときに限ることですが、ツイッターの埋め込みが正常に表示されないときの対処方法として、次の方法があることを知りました。
ツイートのurlは下のようになっています。
https：//twitter.com/DandoyJapan/status/1194759990520643584
上の「status」のうしろに「es」をつけて
https：//twitter.com/DandoyJapan/statuses/1194759990520643584
としてやると、正常に表示される場合があるそうです。
ちなみに当サイトの場合は、埋め込みコードを使っていたのでこの方法は試しませんでした。
最後に
今回の記事とは関係ありませんが、昨日の記事で紹介できなかった船橋屋のスイーツをいくつかピックアップしました。
コメント