log > TumblrにTwitterをEmbed形式で貼り付けて表示する

2016-01-22

TumblrにTwitterをEmbed形式で貼り付けて表示する

Twitterの「このツイートをサイトに埋め込む」で表示されたツイートがこちら。

<blockquote class="twitter-tweet" lang="ja">
	<p lang="en" dir="ltr">Who needs a hug today? 
		<a href="https://twitter.com/hashtag/NationalHugDay?src=hash">#NationalHugDay</a>&#10;&#10;
		<a href="https://t.co/3cFgsuUQKg">https://t.co/3cFgsuUQKg</a>&#10;
		<a href="https://t.co/Hw1sEKdb6B">https://t.co/Hw1sEKdb6B</a>
	</p>&mdash; Twitter (@twitter) 
	<a href="https://twitter.com/twitter/status/690247513194954752">2016, 1月 21</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これが、Tumblr(t.umblr.com)のリダイレクト機能によって、リンクがすべて書き換えられる。

 <blockquote class="twitter-tweet" lang="ja">
 	<p lang="en" dir="ltr">Who needs a hug today? 
 		<a href="http://t.umblr.com/redirect?z=https%3A%2F%2Ftwitter.com%2Fhashtag%2FNationalHugDay%3Fsrc%3Dhash&amp;t=NjRlNTYzNWIxNzNjMzI5ZDBjYzc2ZmI0MDBkMzZmZjk3MTlkZDgzYiwzTmxnZWJ5Qg%3D%3D">#NationalHugDay</a>
 		<a href="http://t.umblr.com/redirect?z=https%3A%2F%2Ft.co%2F3cFgsuUQKg&amp;t=NDg0OWZjYTk3YjYwNjc5NGFhZmIzYzhiZjVmMGMxNzZmOGFiZmFhNSwzTmxnZWJ5Qg%3D%3D">https://t.co/3cFgsuUQKg</a>
 		<a href="http://t.umblr.com/redirect?z=https%3A%2F%2Ft.co%2FHw1sEKdb6B&amp;t=MDExOTViOGYyMDFmYWNlOTQ0NmRkZDc5M2M5YmJlMTNkMzA2NmMzMSwzTmxnZWJ5Qg%3D%3D">https://t.co/Hw1sEKdb6B</a>
 	</p>&mdash; Twitter (@twitter) 
 	<a href="http://t.umblr.com/redirect?z=https%3A%2F%2Ftwitter.com%2Ftwitter%2Fstatus%2F690247513194954752&amp;t=MjNjYzEyZDc2MmQxYmYxMWI3MWFmZGFjNjQxZDgyNWJiNGI1ZDI0ZSwzTmxnZWJ5Qg%3D%3D">2016, 1&#26376; 21</a>
 </blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

twitterのwidgets.jsは、blockquoteの最後のaタグのIDを見て、embedを展開しているらしく、t.umblr.comに書き換えられると展開に失敗する。

サーバサイドでリンクが書き換わっているため、フロントサイドでリダイレクト先のURLを書き換えて表示するようにすればいいはず。なので、試しに作った。

See the Pen gPoNLJ by deprode (@deprode) on CodePen.

ツイートの埋め込みと動画の埋め込みはCSSのクラスが別なので、.twitter-tweetと.twitter-videoを別々に処理してる。

というわけで、attribute(href)を書き換えるだけで表示できたため、これをTumblrのテーマに貼り付けて、無事に表示できた。動画の貼り付けは一部(Momentsなど)表示されないけど、おおむね表示できるのでまあいいかということに。

それにしても、classもidも埋め込みコードに入れずにURLからID取得して表示するTwitterも、何でもかんでもリダイレクトURLにしちゃうTumblrもヤバい。