特定のツイートを記事に埋め込む方法とカスタマイズ

広告
eyecatch

自分や他のユーザーが投稿したツイートは、 Web サイトやブログに簡単に埋め込んで表示することができます。ここでは特定のツイートをブログなどに埋め込む方法およびカスタマイズ方法について解説します。

ツイートを埋め込むためのコードを取得する

ツイートを記事に埋め込むには、埋め込むためのコードを取得します。まずタイムラインなどに表示されている自分や他のユーザーのツイートの中で、埋め込みたいツイートに表示されている下矢印をクリックして下さい。

ツイートを埋め込むためのコードを取得する(1)

表示されたメニューの中から「ツイートを埋め込む」をクリックして下さい。

ツイートを埋め込むためのコードを取得する(2)

次のような画面が表示されます。「Copy Code」をクリックしてください。埋め込み用のコードがクリップボードにコピーされます。

ツイートを埋め込むためのコードを取得する(3)

ツイートを埋め込むためのコードを取得する(4)

取得したコードは次の通りです(見やすいように改行をしています)。

<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">先日久しぶりに地元の動物園へ行ってきました。動物園には昔ながらの遊園地もあり、一日楽しく過ごしました。 <a href="https://t.co/hYVxtxLrws">pic.twitter.com/hYVxtxLrws</a></p>
&mdash; バズライター (@buzzwriterjp) <a href="https://twitter.com/buzzwriterjp/status/1233497889512423424?ref_src=twsrc%5Etfw">February 28, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

取得したコードをサンプルページに記述してみると、コードを記述した位置にツイートが次のように表示されました。

ツイートを埋め込むためのコードを取得する(5)

ツイートを埋め込むためのコードを取得する(6)

このようにツイートに用意されている埋め込みコードを使うことで、簡単にツイートを記事の中に埋め込むことができます。

ツイートの埋め込みをカスタマイズする

基本となるコードの blockquote 要素に対して属性を追加することでツイートの埋め込みをカスタマイズすることができます。ツイートの埋め込みでカスタマイズ可能な項目の一覧は次の通りです。

属性内容
data-theme="dark"配色をダークモードで表示
data-lang="言語"ツイートの埋め込みで使用される言語
data-cards="hidden"画像や動画を展開せず表示
data-conversation="none"元のツイートを含めない

1 つずつ確認していきます。

配色をダークモードで表示

基本のコードでは、埋め込まれたツイートは明るい配色で表示されます。暗い配色で表示するように設定するには「data-theme="dark"」を使用します。

次のように記述します。

<blockquote class="twitter-tweet" data-theme="dark">
<p lang="ja" dir="ltr">先日久しぶりに地元の動物園へ行ってきました。動物園には昔ながらの遊園地もあり、一日楽しく過ごしました。 <a href="https://t.co/hYVxtxLrws">pic.twitter.com/hYVxtxLrws</a></p>
&mdash; バズライター (@buzzwriterjp) <a href="https://twitter.com/buzzwriterjp/status/1233497889512423424?ref_src=twsrc%5Etfw">February 28, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際にサンプルページに新しいコードを記述すると次のように暗い配色でツイートが埋め込まれます。

ツイートの埋め込みをカスタマイズする(1)

なお属性を指定しない場合は明るい配色で表示されますが、明示的に明るい配色を指定する場合は「data-theme="light"」を指定してください。

ツイートの埋め込みで使用される言語

基本のコードに「data-lang="言語"」を追加すると、埋め込まれるツイートの言語を設定することができます。ただし、ツイートの内容そのものは元のツイートの言語のままです。あくまで言語が変わるのは埋め込まれたツイートの中で説明の部分だけです(あとで具体例をもとに説明します)。この属性を指定しない場合はボタンが設置されたページの言語から自動で判定されます。

日本語も含めて言語を明示的に設定する場合の例をいくつか掲載しておきます。

Japanese  data-lang="ja"
English   data-lang="en"
German    data-lang="de"
French    data-lang="fr"
Russian   data-lang="ru"

例えば次のように記述します。

<blockquote class="twitter-tweet" data-lang="en">
<p lang="ja" dir="ltr">先日久しぶりに地元の動物園へ行ってきました。動物園には昔ながらの遊園地もあり、一日楽しく過ごしました。 <a href="https://t.co/hYVxtxLrws">pic.twitter.com/hYVxtxLrws</a></p>
&mdash; バズライター (@buzzwriterjp) <a href="https://twitter.com/buzzwriterjp/status/1233497889512423424?ref_src=twsrc%5Etfw">February 28, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際にサンプルページに新しいコードを記述すると、埋め込まれたツイートの日付の表示の仕方が変わっているのと、「(Twitterアカウントの名前)さんの他のツイートを見る」の部分が「See (Twitterアカウントの名前)'s other Tweets」に変更されて表示されています。

ツイートの埋め込みをカスタマイズする(2)

画像や動画を展開せず表示

基本のコードでは、埋め込まれたツイートに画像や動画が含まれていた場合は画像を表示した状態で埋め込まれます。画像を表示する代わりに画像へのリンクだけを表示するように設定するには「data-cards="hidden"」を使用します。

次のように記述します。

<blockquote class="twitter-tweet" data-cards="hidden">
<p lang="ja" dir="ltr">先日久しぶりに地元の動物園へ行ってきました。動物園には昔ながらの遊園地もあり、一日楽しく過ごしました。 <a href="https://t.co/hYVxtxLrws">pic.twitter.com/hYVxtxLrws</a></p>
&mdash; バズライター (@buzzwriterjp) <a href="https://twitter.com/buzzwriterjp/status/1233497889512423424?ref_src=twsrc%5Etfw">February 28, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際にサンプルページに新しいコードを記述すると、次のように画像がそのまま表示されるかわりに画像への URL が表示されます。

ツイートの埋め込みをカスタマイズする(3)

元のツイートを含めない

単独のツイートを埋め込む場合には関係ないのですが、別のツイートに返信する形で投稿されたツイートを埋め込む場合に、元のツイートを埋め込まないようにいするには「data-conversation="none"」を使用します。

例えば次のような別のツイートに返信する形のツイートを埋め込む場合に使用します。

ツイートの埋め込みをカスタマイズする(4)

単独のツイートと同じ手順で表示されている下矢印をクリックし、表示されたメニューの中から「ツイートを埋め込む」をクリックしてください。

ツイートの埋め込みをカスタマイズする(5)

コードを取得する画面が表示されます。この画面ではプレビューを確認することができますが、返信する形で投稿されたツイートを埋め込むと、元のツイートもあわせて埋め込まれます。

ツイートの埋め込みをカスタマイズする(6)

実際に取得したコードをサンプルページに埋め込むと、次のように元のツイートも含めて埋め込まれていることが確認できます。

ツイートの埋め込みをカスタマイズする(7)

このように返信する形で投稿されたツイートを埋め込む場合、基本のコードでは元のツイートもあわせて埋め込まれますが、元のツイートを含めずに埋め込みたい場合には「data-conversation="none"」を使用します。

次のように記述します。

<blockquote class="twitter-tweet" data-conversation="none">
<p lang="ja" dir="ltr">先日久しぶりに地元の動物園へ行ってきました。動物園には昔ながらの遊園地もあり、一日楽しく過ごしました。 <a href="https://t.co/hYVxtxLrws">pic.twitter.com/hYVxtxLrws</a></p>
&mdash; バズライター (@buzzwriterjp) <a href="https://twitter.com/buzzwriterjp/status/1233497889512423424?ref_src=twsrc%5Etfw">February 28, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際にサンプルページに新しいコードを記述すると、元のツイートを含めずに対象のツイートだけが表示されます。

ツイートの埋め込みをカスタマイズする(8)

----

特定のツイートをブログなどに埋め込む方法およびカスタマイズ方法について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。