Nuxt ContentブログにTwitterを埋め込む

https://twitter.com/nuxt_js/status/1623640145235779584?ref_src=twsrc%5Etfw

Twitterを埋め込む

手順

Twitterのページを開き、埋め込みたいツイートを探します。
ツイートの右下にある「共有」ボタンをクリックし、「リンクをコピー」を選択します。

mdファイルに埋め込む

Nuxt ContentのMarkdownファイルにTwitterの埋め込みコードを挿入するには、以下の手順を行います。

埋め込みたいMarkdownファイルに、先ほどコピーしたコードを追加します。

/content/埋め込むファイル名.mdvue

  <blockquote class="twitter-tweet">
    <a href="https://twitter.com/nuxt_js/status/1623640145235779584?ref_src=twsrc%5Etfw"></a>
  </blockquote>

TwitterのJavaScriptライブラリを読み込むための型定義を types.ts に追加します。

types.tsts

export interface TwitterWindow extends Window {
  twttr: any
  widgets: any
}
declare const window: TwitterWindow

TwitterのJavaScriptライブラリを読み込み、ツイートを表示するためのコンポーネントProseBlockquote.vueを作成します。

/components/content/ProseBlockquote.vuevue

<script lang="ts">
import { TwitterWindow } from "~/types";
declare const window: TwitterWindow;
</script>
<script setup lang="ts">
useHead({
  script: [
    {
      type: "text/javascript",
      async: true,
      src: "https://platform.twitter.com/widgets.js",
    },
  ],
});

onMounted(() => {
  window.twttr.widgets.load();
});
</script>

<template>
  <blockquote>
    <slot />
  </blockquote>
</template>

補足とまとめ

Nuxt ContentブログにTwitterを埋め込むことで、ユーザーが直接ツイートを閲覧できるようになります。この方法を利用することで、ブログの内容をよりリッチにし、ソーシャルメディアの活用を促進できます。