Twitterのツイートをはてなダイアリーに埋め込むのだ

雑記

はてな記法にはTwitter記法もあるのだが...

  • 利用例：

使ってみると、あまり好きにはなれない...。
では、実際Twitterではどのように見えているのか？と言うと、こんな感じ。（「概要を表示」した状態）

なるほど、やっぱりスタイルがTwitter風に装飾されないと、ツイートらしくない。だから好きになれないのだ。

ツイートをサイトに埋め込む

ところで、Twitterの ・・・その他 をクリックすると、「ツイートをサイトに埋め込む」メニューが表示される。


表示された「ツイートをサイトに埋め込む」メニューをクリックすると、このようにダイアログが表示されて...
選択されたコードをコピーすることで、プレビューで見えているようなツイートを埋め込むことができるそうだ。


さっそく、やってみた。

<blockquote class="twitter-tweet"><p>「投稿するページ」がチェック有りだとブログ記事へのリンクが消えてしまうのが問題。チェックの有無に関わらず、ブログ記事へのリンクを残しておく仕様にすれば良いのに。 / “はてなブックマークの仕様改悪がそっと始まったので、みんなで設定…” <a href="http://t.co/3NenumM6cE">http://t.co/3NenumM6cE</a></p>&mdash; zariganitosh (@zariganitosh) <a href="https://twitter.com/zariganitosh/statuses/350028388347551744">June 26, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

その結果はこうなった。

あれあれ？Twitterのプレビューとは違った表示である。おまけに、末尾のscriptタグが評価されずに文字として表示されてしまっている。おそらくこのスクリプトが実行されないために、Twitter風のスタイルに変化しないのだ。実行を許可されるスクリプトが制限されていて、src="//platform.twitter.com/widgets.js"は許可されていないのかもしれない、と諦めかけていた時、このページに出会った！

追跡

タイトルはともかく、このページの中でツイートはちゃんとTwitter風のスタイルで装飾されている！でも一体どうやってツイートを埋め込んでいるのか？

  • HTMLソースを眺めてみると、特別な設定は何もしていないように見える。
  • Twitter風のスタイルは、twitter-で始まるクラスで行われているようだが、
  • このcss設定は、はてなデフォルトのhttp://d.st-hatena.com/statics/css/base.cssにあるようだ。
  • よって、自分の日記でもTwitter風のスタイルは設定されいるのだ。
  • blockquote直後のscriptタグは省略されているのだけど、本文末尾のscriptタグsrc="//platform.twitter.com/widgets.js"はちゃんと評価されて、実行されているようだ。
  • このちゃんと評価されるscriptタグは、どうやら本文末尾の「ツイート」ボタンを表示するために存在している。
  • よって自分の日記でも「ツイート」ボタンを表示しているので、scriptタグsrc="//platform.twitter.com/widgets.js"はちゃんと評価されて、実行されている環境のはず。


以上のことを考えると、日記のプレビューではTwitter風のスタイルにならないかもしれないが、日記を公開することによってTwitter風のスタイルで表示されるかもしれない、と予想。

  • 日記のプレビューでは「ツイート」ボタンが表示されないが、
  • 日記を公開すると「ツイート」ボタンが表示されるので。


評価されないscriptタグは削除して、公開してみる！

できた！

ツイートを埋め込むには（まとめ）

  • Twitter >> ・・・その他 >> ツイートをサイトに埋め込む で選択されたHTMLコードをコピーする。

  • はてなダイアリーの任意の位置にペーストして、ペーストしたコード末尾のscriptタグは削除する。


以上でTwitter風なツイートの埋め込み完了！

      • わかっている方には今更なのかもしれません。
      • 自分は、今更、ようやく、気付いたのでした。