目次
ブログでurlから埋め込みポスト(ツイート)を表示するのにoEmbed APIを使って実装したので、備忘録を残します。
TL;DR
- oEmbed APIを使うと、urlから埋め込みポスト(ツイート)を表示できる
https://publish.twitter.com/oembed?url={ツイートのURL}からJSONをパースして、表示用の埋め込みHTMLを取得する
X(Twitter)のoEmbed APIとは
oEmbed APIとは、urlから埋め込みコンテンツを表示するためのAPIです。
Twitterの場合は、urlからツイートを埋め込み表示するための情報を取得できます。
oEmbed APIの使い方
oEmbed APIの使い方は下記の通り。
- oEmbed APIからJSONを取得する
- JSONをパースしてHTMLを取得する
今回は一例として下記のようなツイートを表示してみます。
2、3ヶ月前なら確実に買ってたなぁ。
— 某 (@7254bou) October 29, 2023
もう分離式＋30%キーボードの虜になってしまったので戻れない。 https://t.co/FDQfasok1I
上記の埋め込みツイートをHTMLのコードとして表示すると下記のようになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2、3ヶ月前なら確実に買ってたなぁ。<br><br>もう分離式＋30%キーボードの虜になってしまったので戻れない。 <a href="https://t.co/FDQfasok1I">https://t.co/FDQfasok1I</a></p>— 某 (@7254bou) <a href="https://twitter.com/7254bou/status/1718705975287488560?ref_src=twsrc%5Etfw">October 29, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
上記のHTMLをurlから表示できるようにJavaScriptを書きます。
oEmbed APIからjsonを取得する
まずはoEmbed APIを叩いてjsonを取得します。
oEmbed APIのURLは下記です。
https:/oembed?url={ツイートのURL}
上記のURLにツイートのURLを指定すると、レスポンスが返ってきます(波括弧は入りません)。
実際に先ほどの私のツイートを使って書いたのが下記です。
https:/oembed?url=https://twitter.com/7254bou/status/1718705975287488560
JSONへの変換はfetchを使って下記のように書きます。
const url = 'https://publish.twitter.com/oembed?url=https://twitter.com/7254bou/status/1718705975287488560';
const response = await fetch(url);
const json = await response.json();
JSONをパースしてHTMLを取得する
先ほど得られたJSONの中身を見てみましょう。
{
url: 'https://twitter.com/7254bou/status/1724446464288719160',
author_name: '某',
author_url: 'https://twitter.com/7254bou',
html: '<blockquote class="twitter-tweet" align="center"><p lang="ja" dir="ltr">keyballのテンティングに磁気スタンド使ってたら、完全にくっついて外れない😭 <a href="https://t.co/umcldXTH6X">pic.twitter.com/umcldXTH6X</a></p>— 某 (@7254bou) <a href="https://twitter.com/7254bou/status/1724446464288719160?ref_src=twsrc%5Etfw">November 14, 2023</a></blockquote>\n' +
'<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\n',
width: 550,
height: null,
type: 'rich',
cache_age: '3153600000',
provider_name: 'Twitter',
provider_url: 'https://twitter.com',
version: '1.0'
}
htmlというキーに埋め込み用のHTMLが入っているので、これを取得します。
const html = json.html;
これをHTMLとして表示すると、先ほどのツイートが表示されます。
クエリパラメータで埋め込みをカスタマイズする
oEmbed APIでは、クエリパラメータで埋め込みツイートをカスタマイズできます。
ツイートの表示をカスタマイズする
ツイートの表示をカスタマイズする場合は、下記のクエリパラメータを指定します。
| クエリパラメータ | デフォルト | 説明 |
|---|---|---|
| url | ツイートのURLを指定する。 | |
| maxwidth | 325 | ツイートの最大幅を指定する。 |
| hide_media | false | ツイートに画像や動画を表示するかどうかを指定する。trueを指定すると表示しない。 |
| hide_thread | false | ツイートの下に会話を表示するかどうかを指定する。trueを指定すると表示しない。 |
| omit_script | false | ツイートを埋め込むためのスクリプトを読み込まない。trueを指定すると読み込まない。 |
| align | none | ツイートの表示位置を指定する。left, right, center, noneのいずれかを指定する。 |
| related | ツイートの下にコンテンツに関連するTwitterユーザー名のリストを追加する。 | |
| lang | en | ツイートの言語を指定する。 |
| theme | light | ツイートのテーマを指定する。light, darkのいずれかを指定する。 |
| link_color | ツイートのリンクの色を指定する。 | |
| widget_type | ツイートの種類を指定する。tweet, video, photoのいずれかを指定する。 | |
| dnt | false | ツイートの表示をカスタマイズする場合は、下記のクエリパラメータを指定します。 |
このブログでは、下記のようにしています。
- omit_script: true
- align: center
- hide_thread: true
const url = 'https://publish.twitter.com/oembed?url={ツイートのURL}&omit_script=true&align=center&hide_thread=true';
const response = await fetch(url);
const json = await response.json();
const html = json.html;
複数ツイートで一つのスクリプトを読み込む
埋め込みツイートのHTMLを確認すると分かるのですが、一番後ろに埋め込み用のスクリプトが読み込まれています。
従って複数のツイートを埋め込む場合、何もしないとスクリプトが複数読み込まれてしまいます。
少しの場合ならいいですが、大量に埋め込む場合はパフォーマンスの問題になる可能性があります。
対策として複数ツイートを埋め込む場合は、APIのクエリパラメータにomit_script=trueを指定し、その後別の場所に下記のスクリプトを追加します。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
これで埋め込み用のスクリプトが読み込まれるので、複数の場合でもツイートを埋め込むことができます。
React(Next.js)の場合
ReactやNext.jsの場合は、APIのクエリパラメータでomit_script=trueを指定し、初回起動時にも表示されるようにuseEffectで読み込みます。
useEffect(() => {
const s = document.createElement("script");
s.setAttribute("src", "https://platform.twitter.com/widgets.js");
s.setAttribute("async", "true");
document.head.appendChild(s);
}, []);
