Tourismプロジェクトのブログ

活動の様子やメンバーの興味があることを書いていきます！

WebでTwitterの埋め込みをやってみよう！

はじめに

Webサイトに下のような形でTwitterが載っているのをやっているのをよく見ます。

いったいどうやっているのでしょうか？

それとも、GoogleMapのように埋め込みができるのでしょうか？

それともほかの方法があるのでしょうか？

少し気になって調べてみたので、記事にしてみます！

どうやっているのだろう。

実際に調べてみると、埋め込んでいるようです。 埋め込む方法は２種類ありました。

１．ツイート単体を埋め込む

特定のツイートを埋め込みたいときは、Twitter自体から取ってくることができます。 〇で囲っているところをクリックするとプルダウンメニューが表示されます。 そのメニューの中の「ツイートを埋め込む」をクリックします。

※スマホアプリでは”ツイートを埋め込む”ボタンは出てきません。

f:id:kit_tourism:20220206151126j:plain

２．ツイッター公式の埋め込み専用ページ

Twitter Publishというツイッターが出している公式のサイトがあります。 ここでは、まず３種類の埋め込みをすることができます。

左から順に

  1. ツイートの埋め込み
  2. タイムラインの埋め込み
  3. ボタンの埋め込み（ツイート、フォロー、メンション、ハッシュタグトピック、メッセージ）

があります。

f:id:kit_tourism:20220206152420j:plain

また、以下の図の囲っている部分を押すことで、いろいろな形にカスタムすることもできるようです。 f:id:kit_tourism:20220206154821j:plain

  • ツイートの埋め込みは以下のようにひとつの特定のツイートを埋め込んだものです。

  • タイムラインの埋め込みとは以下のように全ツイートを時間順に並べたものを埋め込んだものです。
  • ボタンの埋め込みは５つの要素が準備されています。（ツイート、フォロー、メンション、ハッシュタグトピック、メッセージ）

要素によって以下のようなボタンになります。

最後に

ツイッターをサイトに埋め込むだけなら、とても簡単にできることが分かりました。 できることはすごくシンプルなものであるものの、カスタム性もあり、とてもツイッター利用者に優しい作りにされていたのに驚きました。 さすがTwitter！

この記事から、少しでも参考になれば幸いです。