サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳




埋め込み型ツイートの CMS ベストプラクティス



概要

埋め込み型ツイートは、Tiwtter上でやり取りされている世界中の会話の一部を、あなたのサイトやコンテンツやコメントに追加します。 CMS やカスタムソフトウェアで作成されたサイトでは、このページで説明するサイトレベルの表示設定,クロスプラットフォーム配信用のマクロ, oEmbed fallback content, JavaScript ローダーを通してより深いレベルでTwitter のコンテンツと組み合わせることができます。 Your extra effort will remove barriers between authors and cited content while integrating our third-party content with your site’s content flows and visual design.

  1. Define site-level theme options
  2. Define site-level widget options
  3. Define an Embedded Tweet macro
  4. Store a Twitter OAuth bearer token
  5. Request fallback markup using oEmbed
  6. Load widget JavaScript using your site’s resource manager


サイトレベルのテーマオプションを定義する

あなたのウェブページの<head>項目にHTML <meta>エレメントをインクルードすることで、 埋め込み型ツイートを含むTwitter ウィジットをあなたのサイトのカラースキームに統合します。 サイト全体に新しいマークアップを追加することで、ツイート文や背景に明るめや暗めの色テーマを選び、アンカーテキストの色をカスタマイズし、iframe の区切り線の色をカスタマイズします。

<meta name="twitter:widgets:theme" content="light">
<meta name="twitter:widgets:link-color" content="#55acee">
<meta name="twitter:widgets:border-color" content="#55acee">

Twitter JavaScript コードは、新しいウィジットを作成する前にページの meta 値を読み込みます; これらの値は適切なoEmbed パラメータを渡すことによって、個々のウィジットレベルで上書きできます。

あなたのCMS 管理インタフェースにTwitter ウィジットオプションの項目を追加することで、個々の配信者がテーマファイルを編集しなくてもコンテンツをカスタマイズできるようになります。

Twitter widget options administrative interface example


サイトレベルのウィジットオプションを定義する

埋め込み型ツイートには画像、動画、リンクプレビュー、会話スレッドの前ツイートの引用を含めることができます。 あなたのサイトでは、Twitterの既定の表示オプションを上書きして、全てのページにまたがって見た目を統一するためにサイトレベルの埋め込み設定を指定することができます。

ツイートと共に表示される画像や動画は、全ての訪問者にとって相応しいものとは限りません。 拡張コンテンツなしで表示するツイートは、表示範囲を明確に決めておきたい配信者にとってはコンテンツの高さをあらかじめ把握できるというメリットがあります。

あなたのCMS 管理インタフェースにTwitter ウィジットオプションの項目を追加することで、個々の配信者はサイト全体でツイートコンテンツを表示するための設定を設定することができます。

Embedded Tweet options administrative interface example


埋め込み型ツイートのマクロを定義する

あなたのサイトの編集用インタフェースにマクロ を追加することで、個々の機能の詳細な実装を行うことなく、作成者はコンテンツに集中することができます。 あなたのマクロでは、Eメール内ではプレーンテキストを表示、モバイル端末上では添付写真なしでツイートを表示、デスクトップのブラウザ上ではJavaScriptで補強したツイートを表示、 といったように、現在の描写環境で表示するのにべストなコンテンツを内部で決定しなければなりません。

[tweet id="20" align="right"]

A macro should also be aware of the current context of the page, passing related Twitter accounts or the language of the page content where appropriate.

Verify macro inputs against a set of known Embedded Tweet parameters before passing the option to the Twitter oEmbed endpoint to set author expectations and remove unneeded cruft.



Twitter のOAuth ベアラートークンを保存する

Twitter REST API サービスのリクエストでは、あなたのウェブサイトを既知のTwitterアプリケーションとして認識させるためにTwitter OAuth ベアラートークンを含める必要があります。 Twitter アプリケーションを作成し、アプリケーションの識別子と将来Twitter REST APIへのリクエストで使用するベアラートークンの秘密情報を交換してください。

You may wish to abstract calls to Twitter’s APIs into separate libraries within your application to handle adding required HTTP headers to the request, handling common errors, and preparing JSON or XML responses for use by other parts of your application.



Request fallback markup using oEmbed

An Embedded Tweet should provide appropriate context when viewed on its own, before additional enhancements provided by Twitter for the current viewer. Request and store HTML markup for the requested Tweet data by requesting content from Twitter’s oEmbed API endpoint. Add any custom options passed to your site’s macro, or extracted from the current context, as query parameters in the oEmbed request.

A Tweet ID is preferred over a Tweet’s web URL: components of the URL such as the associated account’s screen_name may change; the Tweet ID is unique to the cited content and will remain the same.

You may choose to omit theme-related options from oEmbed requests if you define these preferences inside your webpage’selements as described above.

The oEmbed response from Twitter’s servers adheres to the oEmbed specification. Twitter’s oEmbed response is a “rich” oEmbed type containing HTML markup suitable for use inside existing HTML code.

Sites should cache the HTML returned by the oEmbed API for the suggested cache lifetime specified by the cache_age response parameter. Your cache method should incorporate the customization parameters passed to the oEmbed API as these parameters will modify the HTML response.



サイトのリソースマネージャーを使用してウィジット JavaScript を読み込む

Many sites, frameworks, and CMS systems have specialized CSS and JavaScript resource managers or module loaders tracking dependencies, asynchronous loading, and versioning. あなたのウェブサイトコンテンツに埋め込み型ツイートやその他Twitter ウィジットコンテンツを含める場合は、サイトのリソースローダーにTwitter’s remote-hosted widget.jsをインクルードしてください。

https://platform.twitter.com/widgets.jsでホストされているTwitterウィジット JavaScript用のモジュール定義を定義してください。 Define a module ID of “twitter-wjs” to uniquely identify Twitter’s widget JavaScript using the common DOM ID used by Twitter asynchronous loading snippets just in case copy-and-pasted JavaScript makes its way onto the webpage.

Twitter の応答からJavaScript を取り除くには、oEmbed リクエスト内にomit_script=trueパラメータを含めてください。

埋め込み型ツイートを含む部分ページを読み込んだサイトでは、新しいコンテンツをページに挿入した後にtwttr.widgets.load 関数を実行して、 Embedded Tweet content のためにスキャンを実行する必要があります。 コンテンツのためのスキャンを部分ページのみに制限してサイトにパフォーマンスを向上させるには、load 関数に一つ以上のDOMエレメントを渡します。