---
title: "Nuxt ContentブログにTwitterを埋め込む"
description: "Nuxt ContentブログにTwitterを埋め込む手順の解説"
canonical_url: "https://nuxtation.vercel.app/blog/nuxt3-with-twitter"
---
# Nuxt ContentブログにTwitterを埋め込む

> Nuxt ContentブログにTwitterを埋め込む手順の解説

> [https://twitter.com/nuxt_js/status/1623640145235779584?ref_src=twsrc%5Etfw](https://twitter.com/nuxt_js/status/1623640145235779584?ref_src=twsrc%5Etfw)

## Twitterを埋め込む

### 手順

1. Twitterのページを開き、埋め込みたいツイートを探します。
![twitter page](blog/10/twitter-page.webp)
2. ツイートの右下にある「共有」ボタンをクリックし、「リンクをコピー」を選択します。

### mdファイルに埋め込む

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

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

```vue [/content/埋め込むファイル名.md]
<blockquote class="twitter-tweet">
    <a href="https://twitter.com/nuxt_js/status/1623640145235779584?ref_src=twsrc%5Etfw"></a>
  </blockquote>
```

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

```ts [types.ts]
export interface TwitterWindow extends Window {
  twttr: any
  widgets: any
}
declare const window: TwitterWindow
```

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

```vue [/components/content/ProseBlockquote.vue]
<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を埋め込むことで、ユーザーが直接ツイートを閲覧できるようになります。この方法を利用することで、ブログの内容をよりリッチにし、ソーシャルメディアの活用を促進できます。


## Sitemap

See the full [sitemap](https://nuxtation.vercel.app/sitemap.md) for all pages.