iframelyでブログに外部のコンテンツをいい感じに表示する

自分のブログにいい感じにカードUIを表示したかったので導入しました。

こんな感じです。

iframely

iframelyというサービスでURLを入力するとそれっぽいカードUIを表現できるHTMLを作ってくれます。

埋め込み

後は実際のブログのMarkdown部分にこのHTMLタグを埋め込みすればOKなのですが、このまま埋め込むとscriptタグも一緒に含まれるのでReactなどで使用するとあまりよろしくないです。ここでも書かれています。

対応としては、react-helmet内にiframelyのCDNを読み込みすれば良さそうです。

<Helmet
  htmlAttributes={{
    lang,
  }}
  title={title}
  titleTemplate={`%s | ${site.siteMetadata.title}`}
  meta={[
    {
      name: `description`,
      content: metaDescription,
    },
    {
      property: `og:title`,
      content: title,
    },
    {
      property: `og:description`,
      content: metaDescription,
    },
    {
      property: `og:type`,
      content: `website`,
    },
    {
      property: `og:image`,
      content: imageUrl,
    },
    {
      name: `twitter:card`,
      content: `summary_large_image`,
    },
    {
      name: `twitter:creator`,
      content: site.siteMetadata.social.twitter,
    },
    {
      name: `twitter:title`,
      content: titleDisp,
    },
    {
      name: `twitter:description`,
      content: metaDescription,
    },
  ].concat(meta)}
>
// ここに記述
  <script
    type="text/javascript"
    src="https://cdn.iframe.ly/embed.js"
  />
</Helmet>

後はMarkdownに埋め込みする際にscriptタグを削除してHTML部分だけにすれば完成です。

しかしこのiframely画像以外にも動画も作れたりするので結構良さげです。YouTubeとかもこれで今度埋め込みしようと思います。