埋め込みシングルツイート

埋め込みツイートを使うと、自分の記事やウェブサイトにTwitterで作成された最高のコンテンツを取り込むことができます。埋め込みツイートには、Twitter上に表示するために作成された珍しい写真やビデオ、あるいは追加のコンテンツを際立たせる会話型リンクのプレビューが含まれます。作者情報、ハッシュタグ、メンション、その他のTwitter体験の主要な要素は、ユーザーのサイトの読者が、Twitter上で発生する世界中のメッセージのやり取りに参加する手助けとなります。

このガイドでは、ウェブブラウザ内に表示される埋め込みツイートについて説明します。またTwitterではiOSAndroidでネイティブなツイートを表示することができます。

埋め込みツイートでは、HTMLプレビューのコンテンツをTwitter JavaScriptと組み合わせて、ツイート体験の全体を表示します。パブリッシャーは、ツイートの詳細ページに生成された埋め込みツイートのマークアップをコピーアンドペーストしたり、サポートしているCMSにURLを渡したり、JavaScriptのファクトリ関数を使ってツイートをページに追加することができます。

Twitter.comからの埋め込み

Twitter.com上およびTweetDeck内に表示されるすべてのツイートには、埋め込みツイートのマークアップジェネレータが含まれており、埋め込みツイートマークアップとTwitter JavaScriptを簡単にユーザーのウェブページにコピーアンドペーストできます。ウェブページに組み込むためのHTMLマークアップを生成するには、ツイートテキストの下にあるツイートアクション「More」を選び、「Embed Tweet」を選びます。

Twitter.comの埋め込みツイートのメニュー項目

oEembedを使ってツイートURLを変換

TwitterのoEmbed APIを使用して、プログラムでツイートURLを埋め込みツイートのマークアップに変換します。CMSやアプリにツイートを埋め込むのは、ツイートURLをコピーアンドペーストするのと同じくらい簡単です。

https://publish.twitter.com/oembed?
url=https://twitter.com/Interior/status/463440424141459456

CMSベストプラクティスガイドでは、サイトに埋め込みツイートのソフトウェアサポートを追加する一般的な方法を説明しています。

ツイート表示のカスタマイズ

埋め込みツイートのHTMLに追加のパラメータを含めることで、埋め込みツイートをユーザーのサイトのビジュアルデザインや表示設定に合わせてカスタマイズします。

写真、ビデオ、Twitterカードを非表示に

デフォルトの表示

cards = hiddenと設定

ツイートには、Twitterの写真、ビデオ、その他のTwitter Cardプレビューをサポートしているコンテンツを含めることができます。Twitterでは、内蔵した写真の表示、内蔵したビデオの再生、ツイートの横に表示されたリンクプレビュー、といったより視覚的なものでリンクを置き換えることができます。

<blockquote>エレメントでコンテンツ表示を拡張させないようにするためには、 hide_media=trueのoEmbedクエリーパラメータを設定するか、data-cards="hidden"属性を追加します。

会話スレッドの前のツイートを非表示に

デフォルトの表示

conversation = noneと設定

引用したツイートは、別のツイートのリプライで作成された可能性があります。Twitterでは会話スレッドに前のツイートの簡単な要約を入れて、前後関係を付加します。

<blockquote>エレメントで親ツイートを表示させないようにするためには、 hide_thread=trueのoEmbedクエリーパラメータを設定するか、data-conversation="none"属性を追加します。

ユーザーサイトの配色に合わせる

埋め込みツイートは、明るいカラーテーマ、暗いカラーテーマ、カスタムリンクカラーをサポートしています。 ページレベルの<meta>エレメントでTwitterウィジットをカスタマイズするか、個別に作成した<blockquote>エレメントにdata-*属性を追加します。

埋め込みツイートの全オプション一覧については、埋め込みツイートのリファレンスドキュメントを参照します。

JavaScriptを使ってツイートを描画

TwitterのウィジェットJavaScriptは、実行時にページのDOMをスキャンし、その内容に基づいてblockquote.twitter-tweetエレメントをフル描写の埋め込みツイートに変換します。

新しいコンテンツ(埋め込みツイートのマークアップを含む可能性がある)を動的にページに挿入する開発者は、埋め込みツイートのコンテンツのスキャンを新たに開始するために、新しく挿入するページ部分をtwttr.widgets.load()に渡す必要があります。

ツイート、オプション、HTMLエレメントをtwttr.widgets.createTweet()に渡すことで、開発者は描画する埋め込みツイートを、blockquote.twitter-tweetスキャンを行わず、直接挿入できます。