埋め込みツイート

Updated on Tue, 2013-10-29 16:50

English | 日本語

概要

埋め込みツイートを使うと、自分の記事やウェブサイトのコンテンツにツイートを埋め込むことができます。ツイートは写真、ビデオ、記事の概要などの追加メディアと一緒に埋め込まれ、リツイートやお気に入り登録の件数などもリアルタイムで表示されます。埋め込みツイートはインタラクティブに操作でき、埋め込みツイートを読んだユーザーは、ツイートしたユーザーのフォロー、返信、リツイート、お気に入り登録を、ページ上で直接行うことができます。

このドキュメントでは、自分のウェブサイトで埋め込みツイートを使う方法と、開発者がTwitterのAPIを使って埋め込みツイートを自分のアプリケーションに組み込む方法について説明します。

2020年東京オリンピック・パラリンピック開催決定!!　たくさんのご支援、ご協力、本当にありがとうございました。 http://t.co/9iMZmIgTac #Tokyo2020 （写真：AP/アフロ） pic.twitter.com/OuCN4uDxa6
— 日本オリンピック委員会（JOC） (@Japan_Olympic) September 7, 2013

ウェブサイトにツイートを埋め込むには

twitter.comとTweetdeckのすべてのツイートの下部から、返信、リツイート、お気に入り登録など、ツイートに対する一連の操作を実行できます。ここにある「その他」をクリックして「ツイートをサイトに埋め込む」を選択します。

埋め込み用のHTMLコードが記載されたダイアログが表示されます。ツイートを表示したい記事に、このコードをコピーペーストします。ツイートがどのように表示されるかはプレビューで確認できます。

ツイートが返信の場合は、会話全体を含めるかどうかを指定するチェックボックスが「このツイートをサイトに埋め込む」ダイアログに表示されます。

ツイートの表示の制御

埋め込みツイートは初期設定では、twitter.comの固定リンクページの表示と同様、ツイート全体が表示されます。ですが、いくつかの設定を変更することで、自分のコンテンツに最も適した形で埋め込みツイートを表示できるようになります。例えば会話中のツイートを複数集める際に、それぞれのツイートのスレッドを表示したくない場合は、以下のようにdata-conversation属性を使って会話を隠すことができます。

<blockquote class="twitter-tweet" data-conversation="none">...</blockquote>

これはtwitter.comの「このツイートをサイトに埋め込む」ダイアログの「元のツイートを含める」チェックボックスをオフにするのと同様です。

また、同じコンテンツにリンクしているツイートが多い場合、カード (英語) を表示すると見にくくなることがあります。埋め込みツイート内のカードは、以下のようにdata-cards属性を使って隠すことができます。

<blockquote class="twitter-tweet" data-cards="hidden">...</blockquote>

埋め込みツイートの幅と高さ

埋め込みツイートの高さは、ツイートの内容によって変化します。埋め込みツイートの幅は初期設定で500ピクセルですが、入っているページのセクションが幅狭い場合は、セクションに合わせて調整されます。

埋め込みコードにwidth属性を追加することで、埋め込みツイートの初期設定の幅を上書きできます。例：

<blockquote class="twitter-tweet" width="350">...</blockquote>

配置

初期設定の埋め込みツイートは、独立したブロックとして表示されます。ツイートの配置は、埋め込みコードのblockquote要素のalign属性を使って手動で設定できます。align="left"、align="right"、またはalign="center"を追加することで、埋め込みツイートの位置を決定できます。例えば、以下のように：

<blockquote class="twitter-tweet" align="left">…</blockquote>

テーマと色

埋め込みツイートのリンクは、初期設定ではtwitter.comで使われている標準の青色で表示されます。この色を上書きする方法は2種類あります。

1. 1つひとつの埋め込みツイートのコード内でdata-link-color属性を使ってリンクの色を上書きします (例: data-link-color="#cc0000")。data-theme属性を使えば、TweetDeck (英語) スタイルのデザインに変えることもできます。

<blockquote class="twitter-tweet" data-link-color="#cc0000" data-theme="dark">…</blockquote>

2. 同じページに埋め込みツイートが多い場合、1つひとつに属性を追加するのは大変です。<meta> タグを使うことで、埋め込みツイートと埋め込みタイムラインウィジェットのすべての色とテーマを一括で設定できます。

<meta name="twitter:widgets:link-color" content="#cc0000">
<meta name="twitter:widgets:theme" content="dark">

Twitterヘッドライン

Twitterヘッドラインはツイートに関連する記事をツイート自身と繋ぐ機能です。認可されたサイトにツイートが埋め込まれると、ツイートの詳細ページに記事のヘッドラインとサイトのTwitterアカウントが上がります。

詳しくはこちらのブログ記事（英語）をご覧ください。自分のウェブサイトをプログラムに応募したい場合、このフォーム（英語）を使って申請できます。

もし認可されたら、サイトのアカウント名をページ内に指定できます。例えば：

<meta name="twitter:site" content="@twitterapi">

ページ内に記事のカノニカルURL(正規化されたURL)も指定できます。指定されたURLがTwitterからのリンクに使用されます。例えば：

<link rel="canonical" href="http://example.com/your-canonical-url">

WordPressその他のCMSによる埋め込み

WordPressを始めとするコンテンツ管理システム(CMS)では、ツイートの埋め込みに対応している場合があります。WordPressの場合、ツイートのURLをコピーして投稿に1行貼り付けるだけで埋め込まれます。埋め込みコードの挿入やツイートの表示といった必要な作業はWordPress側で処理されます。例：

https://twitter.com/Japan_Olympic/status/376466484735651841

同様の機能を自分のCMSに追加するには、後述の「埋め込みツイートの開発者向け情報」セクションをご覧ください。

トラブルシューティング

埋め込みツイートがページに表示されない場合は、以下の操作を試してみてください。

まず、埋め込みコードとしてツイート全体を表示するための <script> タグが常に必要となる点に注意してください。CMSによっては、公開された記事上の <script> が適切に扱われていない場合や、完全に省略されている場合があります。解決方法を以下に示します。

1. CMSにHTMLモードまたはコード編集モードがある場合は、それらのモードを使います。リッチテキストエディターやWYSIWYGエディターによっては、貼り付けられたコードが適切に解釈されず、データが削除されたりコードの内容がそのまま表示されることがあります。入力をHTMLモードに切り替え、そこにコードを直接貼り付けて、記事を再投稿してください。

2. 記事をHTMLで編集できない場合は、記事作成者またはウェブサイトチームが、メインで使用しているウェブサイトテンプレートに <script> を1つ追加する必要があります。テンプレートでページの末尾 (終了タグ </body>) を探し、その直前に以下のコードを追加してください。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

このコードがテンプレートに入っていたら、記事にblockquote要素だけを入れても埋め込みツイートが表示されます。

3. 上記の方法でも正しく表示されない場合は開発者フォーラム (英語) にお知らせください。問題を調査すると共に、埋め込みツイートサービスが常に正しく動作するよう対応を実施します。

言語設定

埋め込みツイートの言語は、HTML標準のlang属性を使って、埋め込み先のHTMLページから推測されます。例えば：

<html lang="ja">

このページのすべてのツイートは日本語で表示されます。HTMLの構造に従って、埋め込みツイートの上位かつ最も近いlangタグがウィジェットに適用されます。例えば：

<html lang="en">
  <head></head>
  <body>
    <article lang="fr">
      <blockquote class="twitter-tweet">...</blockquote><!-- この埋め込みツイートはフランス語で表示されます -->

埋め込みコードの要素自体にlang属性を明示的に追加することもできます。例えば：

<blockquote class="twitter-tweet" lang="ja">...</blockquote>

言語が宣言されていないページの場合は初期設定の英語になります。言語設定に応じて、日付、ツイートへの反応の数、ツイートに対する操作、「フォローする」ボタンが翻訳されます。ツイート本文は翻訳されません。

埋め込みツイートに関する開発者向け情報

TwitterがoEmbed (英語)エンドポイントをサポートしたことにより、プログラムによる埋め込みツイートのHTMLコードの生成が可能になりました。

oEmbedを使ってツイートを表示するには、埋め込み先サイトで以下を実行する必要があります。

表示するツイートのURLまたはID番号を取得する。
GET statuses/oembedエンドポイントへのリクエストを実行し、ツイートのURLまたはIDをクエリパラメーターとして渡す。

APIのURLをoEmbed自動検出機能を使って見つけることもできます。ツイートの固定リンクページを読み込んで、その<head>部分を解析することでAPIのURLを特定することもできます。詳細はoEmbedの検出機能に関するドキュメント (英語) を参照してください。

ツイートのURLの取得とTwitterのoEmbedエンドポイントのリクエストは簡単に実行できます。GET statuses/oembedに埋め込むツイートのIDまたはURLを渡し、必要なクエリパラメータを追加することで、適切なツイートを表示できます。レスポンスにはツイートの埋め込みに必要なデータが入っています。例えばhttps://api.twitter.com/1/statuses/oembed.json?id=133640144317198338&align;=centerに対するレスポンスは以下のようになります。

{
  "type":"rich",
  "author_name": "Twitter API",
  "cache_age": "31536000000",
  "height":null,
  "html":"<blockquote class=\"twitter-tweet tw-align-center\"><p>Search API will now always return \"real\" Twitter user IDs.The with_twitter_user_id parameter is no longer necessary.An era has ended.^TS</p>&mdash; Twitter API (@twitterapi) <a href=\"https://twitter.com/twitterapi/status/133640144317198338\" data-datetime=\"2011-11-07T20:21:07+00:00\">November7, 2011</a></blockquote>\n<script src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>",
  "author_url": "https://twitter.com/twitterapi",
  "provider_name": "Twitter",
  "version":"1.0",
  "provider_url": "http://twitter.com",
  "url":"https://twitter.com/twitterapi/status/133640144317198338",
  "width":550
}

ページ読み込みごとにリクエストを実行するのではなく、レスポンスをキャッシュして、キャッシュされたデータを使用してください。

レスポンスに含まれているHTMLを//platform.twitter.com/widgets.jsスクリプトが読み込まれているページに入れることで、埋め込みツイートウィジェットが表示されます。テンプレートライブラリを使っている場合は、この出力部分に対するHTMLエンティティのエンコードとサニタイズを無効化してください。無効化しないとHTMLが正しく表示されません。

詳細はGET statuses/oembedを参照してください。

widgets.js

「このツイートをサイトに埋め込む」ダイアログでのコピーペーストまたはoEmbedエンドポイントで得られたHTMLコードには、widgets.jsを参照する <script> タグが含まれています。たとえばhttps://api.twitter.com/1/statuses/oembed.json?id=133640144317198338の場合、以下のようになります。

<blockquote class="twitter-tweet"><p>Search API will now always return "real" Twitter user IDs. The with_twitter_user_id parameter is no longer necessary. An era has ended. ^TS</p>&mdash; Twitter API (@twitterapi) <a href="https://twitter.com/twitterapi/status/133640144317198338" data-datetime="2011-11-07T20:21:07+00:00">November 7, 2011</a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

widgets.jsはページごとに1回だけ参照される必要があります。ツイートボタンなど別のウィジェットのために既に参照される場合、または複数のツイートを表示する場合、クエリパラメーターにomit_script=trueを追加してoEmbedのレスポンスからスクリプト参照を削除できます。上記の例の場合、URLはhttps://api.twitter.com/1/statuses/oembed.json?id=133640144317198338&omit;_script=trueとなり、以下のようなレスポンスとなります。

<blockquote class="twitter-tweet"><p>Search API will now always return "real" Twitter user IDs. The with_twitter_user_id parameter is no longer necessary. An era has ended. ^TS</p>&mdash; Twitter API (@twitterapi) <a href="https://twitter.com/twitterapi/status/133640144317198338" data-datetime="2011-11-07T20:21:07+00:00">November 7, 2011</a></blockquote>

コピーペーストによるコードからスクリプト参照を削除するには、<script> タグを手動で削除します。

モバイルウェブサイトに関する考慮事項

多くのウェブサイトがコンテンツのモバイルバージョンを提供しています。ここでは、埋め込みツイートを使ったモバイル向け開発の考慮事項をいくつか紹介します。

widgets.jsがウェブサイトの標準のテンプレートで読み込まれているとしたら、モバイルテンプレートでも読み込まれるようにする必要があります。
埋め込みツイートはインタラクティブに操作でき、サイズはコンテナに合わせて調整されます。デスクトップでも狭いモバイルサイトでも何もせずに適切な表示となります。

ツイートの表示

ツイートのコンテンツを格納できるプレースホルダHTMLには、JavaScriptを利用できない場合でもメリットがあります。つまり、RSSフィード、ウェブクローラー、アクセシビリティツールでも、ツイートのコンテンツがページの一部として扱われます。この場合、ウェブサイトの通常の引用スタイルが適用されます。例えば：

ただし、大部分のユーザーがJavaScriptを有効にしています。こうしたユーザーは、埋め込みツイートを完全な状態で表示して、ツイートに含まれるWeb Intentsによって、返信、リツイート、フォローなどの操作を埋め込みツイートから直接行うことができます。

ベストプラクティス

oEmbedレスポンスはサーバーにキャッシュすること。 oEmbedエンドポイントにはリクエストの回数制限が適用されるため、ページの表示ごとにリクエストしないようにしてください。

埋め込みHTMLの形式が変化することを想定すること。 埋め込み用のHTMLマークアップは今後変更される可能性があるため、クラス名やDOMレイアウトが変わるかもしれないと考えてください。埋め込み用のHTMLにスタイルを適用する場合は、親要素でラップして、親要素にスタイルを適用します。

Twitterのカスタマイズのオプトアウト

サイト上のTwitterウィジェットのデータをもとに、コンテンツやおすすめのTwitterユーザーがカスタマイズされる場合があります。この機能をオプトアウトするには、オプションのdata-dntパラメータをtrueにします。Twitterのカスタマイズの詳細については、こちらをご覧ください。

<blockquote class="twitter-tweet" data-dnt="true">