はてなダイアリーにtwitterのウィジェットを埋め込む

Web お役立ち

ツイッターのウィジェットについて適当にまとめてみます

はてなって制約きびしいところありますよね（今更）

はてな公式でのサービス

はてなダイアリーには、ツイートを埋め込むサービスとして、以下が用意されています

簡単に説明すると、[ ]で該当ツイートのURLを囲って、最後に:twitterを付け加えればいいのです

[https://twitter.com/utate_/status/288046168674553857:twitter:detail]

上記のように、最後にさらに:detailを付けるとアイコンまで表示してくれます（↓はblockquoteで囲ってあります）

細かいデザインの調整はCSSで行うとよいでしょう

またツイートの引用方法には派生形もいくつかあるみたいなので、興味のあるひとは先ほどのリンク先を確認してみてください

ツイッター公式のウィジェットを使えばいいじゃん

しばらく前になりますが、いつからか各ツイートのページから埋め込み用のコードを取得できるようになっていました

まずはタイムラインから各ツイート右上にある日にちをクリックします

各ツイートの固有のページになるので、見て明らかですが「このツイートをサイトに埋め込む」をクリックします

そうすると以下の画面が表示されるので、コードをコピーして貼り付けます

そのままコピーしてきたのがコチラ↓

<blockquote class="twitter-tweet" lang="ja"><p>おはよう今年もがんばろう</p>&mdash; 内京うたてさん (@utate_) <a href="https://twitter.com/utate_/status/288046168674553857" data-datetime="2013-01-06T22:15:32+00:00">1月 6, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

しかし、これをそのまま貼りつけてみると（blockquoteで囲ってあります）

何か変なものがはみ出ています…

どうやらscriptの部分がおかしそうなので、とりあえずasyncを削除してみると（非同期に読み込むことでパフォーマンスアップを図るためのものらしい*1）、


無事消えました。自分だけなのかよくわかりませんが^^；、とりあえず見栄えのいいツイート引用がこれでできそうです

サイドバーにタイムラインを表示する

ツイッターには、ブログのサイドバーパーツによく使われているタイムラインウィジェットもあります（自分は現在旧デザインのものを使っていますが）

出来上がったコードはこんな感じ

<a class="twitter-timeline"  href="https://twitter.com/utate_" data-widget-id="244466660059267072">@utate_ からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これも、そのまま貼ると余計なものがはみ出るので、以下のようにばっさり切り捨てて貼りつけてみます

<a class="twitter-timeline"  href="https://twitter.com/utate_" data-widget-id="244466660059267072">@utate_ からのツイート</a>
<script src="//platform.twitter.com/widgets.js"></script>


どうやら無事に表示されました。ちなみにスマートフォンからも問題なく見られるみたいです

ちょっと待って

実は、これまではscript（だけではないみたいですが）を貼り付けると以下のような警告が出て使い物になりませんでした

<ご指定のscriptタグは許可されていません。詳しくははてなダイアリーで使えるブログパーツをご覧ください>

（参考）

年も変わり、はてなブログが正式サービスになったこともあって（？）、いろいろと変わり始めたのでしょうか^^；（もともとはてなブログの方では、ショートコードも対応していました：外部サイト埋め込み機能を強化し、Twitterのツイートなどを簡単に貼れるようにしました - はてなブログ開発ブログ）

そうであれば、上で述べた"余計なものがはみ出る"という症状もそのうち改善されるかもしれませんね（単に自分の知識不足の可能性が高いですが…）

*1:なので（かどうかわかりませんが^^；）、ひょっとするとコードを貼ってすぐは以下のように"むき出し状態"になっているかもしれませんが、時間が経ったあとで見てみるときれいに表示されています