サイトのトップへ戻る

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

サイト内検索

埋め込み型ツイート

埋め込み型ツイート を使うことでTiwtter上で作成された最高のコンテンツをあなたの記事やウェブサイトに取り込めます。 An embedded Tweet may include unique photos or a video created for display on Twitter or interactive link previews to highlight additional content. Author attribution, hashtags, mentions, and other key components of the Twitter experience helps your site’s audience connect with the global conversation happening on Twitter.

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

An embedded Tweet combines HTML preview content with Twitter-hosted JavaScript to display a fully-rendered Tweet experience. Publishers may copy-and-paste embedded Tweet markup generated on a Tweet detail page, pass a URL to a supporting CMS, or add a Tweet to the page using a JavaScript factory function.



Single Tweet

Twitter.com 上および TweetDeck 内で表示される全てのツイートには、埋め込み型ツイートのマークアップジェネレータが含まれており、 埋め込み型ツイートのマークアップ と Twitter JavaScriptを簡単にあなたのウェブページにコピーアンドペーストできます。 ウェブサイトに組み込むためのHTMLマークアップを生成するには、ツイート文の下にある ツイートアクション“More”を選び、 “Embed Tweet”を選んでください。:

Twitter.com embedded Tweet menu item


oEmbedを使ってツイートURLを変換する

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

https://api.twitter.com/1/statuses/oembed.json?
url=https://twitter.com/Interior/status/463440424141459456

Our CMS best practices guide describes common patterns for sites adding software support for embedded Tweets.



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

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

写真、動画、 Twitter Cardsを非表示にする

既定の見た目 cards = hidden と設定

ツイートには、 Twitterがホストしている 写真、Vine 動画、その他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スキャンを行わず直接挿入できます。




エンジェル戦記