All Articles

SNS埋め込みのプラグインを導入(`gatsby-transformer-remark`)

2019/07/27

gatsby-transformer-remark というプラグインを使って、Twitter投稿を埋め込めるようにする。

以下のようなことができる。

公式サンプルサイト

導入手順

1 プラグインを入れる(yarn add @raae/gatsby-remark-oembed)
2 gatsby-config.js で、プラグインの設定
3 Markdownに埋め込んでみる
1 プラグインを入れる(yarn add @raae/gatsby-remark-oembed)

yarn add @raae/gatsby-remark-oembed を実行

2 gatsby-config.js で、プラグインの設定
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `@raae/gatsby-remark-oembed`,
          options: {
            // usePrefix defaults to false
            // usePrefix: true is the same as ["oembed"]
            usePrefix: ["oembed", "video"],
            providers: {
              // Important to exclude providers
              // that adds js to the page.
              // If you do not need them.
              exclude: ["Reddit"]
            }
          }
        }
      ]
    }
  }
];

※、最初、以下のように書いて反映されずにハマった。。。 原因は、書く場所がダメだった。 resolve: gatsby-transformer-remark, の下に、optionsとして、書くのが正解。 以下は、大元の plugins: の直下に書いていたので、うまく設定されていなかった。

plugins: [
  {

    {
      resolve: `@raae/gatsby-remark-oembed`,
      options: {
        usePrefix: true,  // usePrefix: true is the same as ["oembed"]
        providers: {
          include: [
            'Twitter',
          ],
          settings: {
            // Ex. Show all Twitter embeds with the dark theme
            Twitter: { theme: 'dark' },
          },
        },
      },
    }

   }
]
3 Markdownに埋め込んでみる

以下のように書けばOK

`oembed: 埋め込めたいリンク`

Twitter投稿を埋め込み

Instagramを埋め込み

Youtubeを埋め込み

gitを埋め込み