• お役立ち

twitterで任意のツイートをサイトに埋め込むコードについて

  • このエントリーをはてなブックマークに追加
  • LINEで送る

大したことじゃないんですが…。いつからか、twitterの任意のツイートをブログなどに埋め込むためのコードが取得できるようになりました。こんな感じで↓

ss-tweet

やり方は簡単。タイムライン上の任意のツイートをクリック(またはロールオーバーして出てくる右上のメニューから「開く」をクリック)します。

ss-list

すると、タイムラインの中でそのツイートが開いた状態になります。

ss-opened

その状態で、下部にある「詳細」をクリックして、ツイートの詳細画面に遷移します。

ss-detail

ここで、「このツイートをサイトに埋め込む」をクリックすると、コードの生成画面が表示されます。

ss-overlay

実際に生成されるコードはこんな感じ(一部整形済み)↓

<blockquote class="twitter-tweet" lang="ja">
<p>独自ドメインで短縮URLの仕組みを使う時ってlilURLみたいなプログラムを導入するのがいいのかな。
それとも、bit.lyのアカウントをProにアップグレードして設定するとかの方が一般的なのかな。
 <a href="http://t.co/W0xBBCUS" title="http://kngy.net/2011/05/25/short-url-bitly-domain/">kngy.net/2011/05/25/sho…</a></p>
 &mdash; Tonpoo.comさん (@tonpootwit) <a href="https://twitter.com/tonpootwit/status/169358909700702208" data-datetime="2012-02-14T09:54:45+00:00">2月 14, 2012</a>
</blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

あとはこのコードをコピーし、ブログなどに(HTMLの編集モードなどで)貼り付けるだけです。コードからも分かる通り、基本的にはblockquote要素なんですが、自動的にウィジェット用のJavaScriptを読み込んでiframe要素などを挿入、外観を変更してくれるようです。

ただこのコード(のスクリプト)、動作する場合としない場合があるんですよね…。例えば、私の個人ブログではちゃんと外観が変更されて表示されるんですが、会社のブログ(=このブログ)ではダメ。

開発ツールなどで検証してみると、会社のブログの方ではiframe要素が生成されてないので、何か他のJavaScriptとバッティングしちゃってるのかな。特にスクリプトエラーとかは出てないんですけどね…。

星虹思械BRICOLEUR

関連コンテンツ