クイックノート

ちょっとした発見・アイデアから知識の発掘を

Twitterモーメントをサイトに埋め込む

f:id:u874072e:20210723141720p:plain 好きなツイートをピックアップしてまとめることができる
モーメント機能というものが公式のTwitterに用意されています。

様々な話題が混ざるツイートの中から、
特定の話題だけ整理することができるので、
「タイムラインをサイトにそのまま埋め込むのはちょっと」
という場合でも、モーメントを埋め込むことができると便利そうです。

そこで、モーメントを埋め込む方法を検索したところ、
少し前までは簡単に埋め込めたようなのですが、
今は少しややこしい方法をとる必要がありそうなので整理しておきます。

Twitterモーメントを埋め込む

モーメントを埋め込むには、大まかに以下の手順で行います。  

  1. モーメントのURLを取得
  2. 取得したURLをちょっと修正
  3. 埋め込みコードを取得する
  4. コードを貼り付ける

それぞれについて見ていきましょう。

モーメントのURLを取得

  1. 自分のモーメントを開く
    f:id:u874072e:20210723135508p:plainf:id:u874072e:20210723135522p:plain
    「もっと見る」→「モーメント」
  2. 埋め込みたいモーメントを表示
    f:id:u874072e:20210723135659p:plain
    「・・・」→「Twitterで表示」
  3. URLをコピー
    f:id:u874072e:20210723135855p:plainf:id:u874072e:20210723135911p:plain
    「共有」→「リンクをコピー」

これでしたのようなURLが取得できます。  
[数字]の部分はモーメント毎に割り振られた番号です。

https://twitter.com/i/events/[数字]

取得したURLを修正

次のステップで埋め込みコードを取得する時に、
上のURLだと対応していないため、
少し修正する必要があります。

修正は簡単で、"events"を"moments"に書き換えるだけです。

つまり、取得した下のURLを  

https://twitter.com/i/events/[数字]

下のように修正します。

https://twitter.com/i/moments/[数字]

埋め込みコードを取得する

修正したURLを使って埋め込み用のコードを取得します。

  1. 「Twitter Publish」を開く
  2. 修正したURLを入力する
    f:id:u874072e:20210723140833p:plain
    モーメントのURLを入力する
  3. 生成されたコードをコピーする
    f:id:u874072e:20210723140923p:plain
    コードをコピーする

コードを貼り付ける

ここまでの手順で、
下のようなコードを取得できます。

<a class="twitter-moment"
 href="https://twitter.com/i/moments/1415563985294815234?ref_src=twsrc%5Etfw">
 読書図解まとめ
</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

後はこのコードを埋め込みたい箇所に貼り付けて完了です。

まとめ

モーメント機能が埋め込めると便利だなと思い、
埋め込む方法を調べたところ、
情報が古かったり、少しトリッキーな方法が必要だったので、整理して見ました。

Twitterをサイトに埋め込みたいけど、
タイムラインそのままだと話題が散らばり過ぎてるという場合に、
便利なので使って見てください。

プライバシーポリシー