ツイート埋め込み機能の罠

本ブログで自分のツイートを引用しようとして、トラブルにはまってしまった。

Twitterには、任意のツイートをブログなどに埋め込むための出力方法が用意されている。

Web版Twitterから、ツイートをサイトやブログに貼り付ける方法。 | 和洋風◎

この機能、本来ならば

割と綺麗に並んでいる。よーく見ると、右の金星がわずかに木星を逆転してるかも。 twitter.com/kippis_sg/stat…

— 廣瀬 匠（Sho Hirose）さん (@kippis_sg) 3月 13, 2012

と出力されるはずなのだが、私が試すとなぜか

割と綺麗に並んでいる。よーく見ると、右の金星がわずかに木星を逆転してるかも。 twitter.com/kippis_sg/stat…
— 廣瀬 匠（Sho Hirose）さん (@kippis_sg) 3月 13, 2012

のように文字しか表示されなかった。

散々試行錯誤して調べた結果、以下のページを読んで問題が解決した。

Cannot embed tweet in a normal blog post - Blogger Help

ツイートから最初にコピーされるタグは、こんな感じだ。

<blockquote class="twitter-tweet" lang="ja"><p>割と綺麗に並んでいる。よーく見ると、右の金星がわずかに木星を逆転してるかも。 <a href="http://t.co/s7LNIZIp" title="http://twitter.com/kippis_sg/status/179499587059462144/photo/1">twitter.com/kippis_sg/stat…</a></p>&mdash; 廣瀬 匠（Sho Hirose）さん (@kippis_sg) <a href="https://twitter.com/kippis_sg/status/179499587059462144" data-datetime="2012-03-13T09:30:11+00:00">3月 13, 2012</a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これを、Bloggerの編集画面でHTMLとして貼り付ける。ところが、この後すぐに公開せずに他の画面（プレビューなど）に遷移すると、

<blockquote class="twitter-tweet" lang="ja"><p>割と綺麗に並んでいる。よーく見ると、右の金星がわずかに木星を逆転してるかも。 <a href="http://t.co/s7LNIZIp" title="http://twitter.com/kippis_sg/status/179499587059462144/photo/1">twitter.com/kippis_sg/stat…</a></p>&mdash; 廣瀬 匠（Sho Hirose）さん (@kippis_sg) <a href="https://twitter.com/kippis_sg/status/179499587059462144" data-datetime="2012-03-13T09:30:11+00:00">3月 13, 2012</a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

この<p>タグが勝手に外されてしまうらしい！
このおかげでスクリプトがうまく働かず、表示がおかしくなっていたらしい。

この問題のために2時間も無駄にしてしまった。悔しいので記事にした。