WEBCRE8.jp > 調べる > [WordPress]ツイートがブログに埋め込めなくなった…。ついでにマークアップも確認してみた

[WordPress]ツイートがブログに埋め込めなくなった…。ついでにマークアップも確認してみた

この記事は約10分ぐらいで読めます

WordPressにはツイートを簡単に張り付ける機能があったんですがなんか埋め込めなくなりました。何か対策を見落としてるのかもしれませんけどせっかくなので埋め込み方から見直してみました。

WordPressのデフォルトの機能でのツイート埋め込み

WordPressのサイト上にツイートを埋め込みたい場合、以前はWordPress > Twitter Blackbird Pieというプラグインを使って埋め込んでいました。これはツイートの背景にそのツイートの本人のアカウントの背景をスタイルしてくれたりと見た目にもわかりやすい機能で結構好きだったんですが、確か3.4だったかその位でこの表示にデフォルトで対応するようになりました。

ツイートをいい感じに表示してくれる

ツイートのURLを貼り付けるだけで見た目もいい感じになるしすっごい便利だったので使っていたんですが、先日書いた[ネタ]Twitterライフを楽しくしてくれるお気に入りの意味不明なbot＆診断メーカーという記事でツイートを埋め込もうとしたとき、この機能がツイートを全然表示してくれなくなっている事に気付きました。

Sorry!…と表示され、ツイートが表示されない

以前も何故か表示されないことはあって、何度かアクセスし直すと表示されたりもしたんですが…今回は全く表示されないです。一回も上手く表示されるのを見ることなく二日経ったのでこれはダメだと判断しました。

ちなみに同様の方法でツイートを埋め込んでいる過去記事のハッシュタグ #基本無料のPhotoshop等では今も問題なく表示されています。新規の埋め込みが上手くいかないということですね。

原因がわからないけどちょっと見直してみる

で、対策としては改めて元々のBlackbird Pieをまた入れ直してみるとか他の方法を講じてみるという方法もあるんでしょうし、もしかしたらこの記事を見た人が「こうすれば今までと変わらず埋め込めるだろ調べろボケ」とか「設定がおかしくなってんだよ確かめろボケ」って教えてくれるかもしれないですけど(待ってますｗ)、前からこのBlackbird Pieが吐き出すコードが気になってはいたのでちょっと他の方法がないものか調べることにしました。

<div class="otweet" style="background-image:url(http://a0.twimg.com/images/themes/theme9/bg.gif)">
<div class="otweet_content">
<div class="otweet_header">
<div class="text">最初はCS2相当の機能から始まる #基本無料のPhotoshop</div>
<div class="created_at"><a href="http://twitter.com/#!/glatyou/status/331665194143072256">2013/05/07 16:01:58</a> via <a href="http://tapbots.com/tweetbot" rel="nofollow">Tweetbot for iOS</a></div>
</div><!--end .otweet_header-->
<div class="otweet_footer">
<div class="profile_image"><a href="http://twitter.com/#!/glatyou"><img src="http://a0.twimg.com/profile_images/1780444872/twitter-icon-glatyou_normal.png" alt="glatyou" /></a></div>
<div class="name"><a href="http://twitter.com/#!/glatyou">優</a></div>
<div class="screen_name">glatyou</div>
</div><!--end .otweet_footer-->
</div><!--end .otweet_content-->
</div><!--end .otweet-->

Blackbird Pieの吐き出すHTML

Blackbird Pieの機能でツイートURLから吐き出されたHTMLは、複雑な表示をしている為かなり分量も多いです。そしてそれはまあいいんですけど、私が前から気になっていたのはこれがblockquote要素で囲まれていない点です。通常ブログには自分のツイートを貼り付ける頻度が高いだろうとは思うんですけど、やはり一度他のWebサイトにポストされたものではあるので引用とする方が適切ではないかと思う訳です。

Twitterの公式ツイート埋め込み機能

そこでTwitter公式の出番です。…別にこのめんどくささを解消出来たわけじゃないんですけどｗすみません。

Twitter公式のツイート埋め込みの機能を使ってみる

これで埋め込めるコードは、しっかりとblockquoteタグで囲まれています。

<blockquote class="twitter-tweet"><p>【ブログ書きました】 [ネタ]Twitterライフを楽しくしてくれるお気に入りの意味不明なbot＆診断メーカー - WEBCRE8.jp <a href="http://t.co/WsPhhbytok">http://t.co/WsPhhbytok</a></p>&mdash; ウェブクリ8 (@webcre8) <a href="https://twitter.com/webcre8/statuses/345347396017979394">June 14, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter公式のツイート埋め込みタグ

ちょっと見た目は簡素になってしまいましたが、埋め込まれたツイートであることはちゃんとわかる表示になっています。

Twitter公式のツイート埋め込みの表示

ちなみに、最後のwidgets.jsは当然一回読み込めばいいので複数埋め込む場合はblockquoteタグで囲まれた部分だけ貼り付ければOKです。また、このJavaScriptはついこの間配布されたTwitter公式の埋め込みタイムライン設置時にも読み込まれているので、タイムライン設置済みのページにはこのスクリプトを設置する必要がありません。

欲を言えばこのblockquoteタグにはcite属性も付けて欲しかったところですけど…参照元リンクがあるので便利さにおいては問題なしですね。個人的にはのちのちブラウザーがcite属性のついた引用ブロックやテキストには勝手にリンクが張られるとかそういう機能を持つような仕様になればベストだと思ってるんですけどね。

実はURLだけでもちゃんと表示してくれる

で、どういう事かちょっとわからないんですけど公式が吐き出してくれるコードのリンク先となっているツイート自体のURL、例えばhttps://twitter.com/webcre8/statuses/345347396017979394と、通常ツイートをクリックして飛べるhttps://twitter.com/webcre8/status/345347396017979394とはURLが微妙に違います。statusにesがついていますね。

実はこのツイートを埋め込む公式のURLを記述するだけで、埋め込みコードと同じblockquote要素でのコードを吐き出してくれるようです。これは多分widgets.jsを設置しているおかげなんでしょうけど、他にも