Gatsbyブログ内にリンクカードを導入する

2021年07月13日

はじめに

外部サイトへのリンクをカード型で表示しているのをよく見かけるが、自分も表示したいと思ったので導入してみました。リンクカード？、リッチメディア？という呼び方で合っているのだろうか？

以下のようなやつです。

これがiframelyを使うことで簡単にできましたので紹介します。

scriptを読み込む必要があるので以下が入っている必要があります。

npmの場合

npm install react-helmet gatsby-plugin-react-helmet

yarnの場合

yarn add react-helmet gatsby-plugin-react-helmet

gatsby-config.jsのプラグイン配列にプラグインを追記

gatsby-config.js

plugins: [
  ...,
  'gatsby-plugin-react-helmet'
]

以上で準備は完了です。

React-Helmetを用いて以下のようなscriptを追加し読み込まれるようにします。

<Helmet
  ...
>
  <script async src="//cdn.iframe.ly/embed.js" charSet="utf-8"></script>
</Helmet>

まずこのURL にアクセス。

URlを入力するフォームがあるので、任意のURLを入力し、CHECK ITをクリックする。今回はhttps://iframely.com/embedを入力してみます。

すると以下のように埋め込み用のタグが生成されます。左側に埋め込みようタグ、左はプレビューとなっています。

こちらのコードををお好きなところに設置すれば完了です。scriptタグはReactHelmetで設置しているので設置しなくても大丈夫です。またマークダウン内にも貼り付けると記事の途中に設置できました。

Gatsbyの開発モード中のSPAとなっていると表示されなかったりするので本番でしっかり表示されるのかは不安ですが、とても簡単に導入できました。そのうち自分でデザインを作成しようかと思います。