はじめに
GatsbyJSで開発したこのブログにIframelyを導入しました。
Iframelyとは外部サイトへのリンクをリッチコンテンツとして生成してくれるサービスです。
こんな感じで外部サイトへのリンクを貼るときに、そのサイトのサムネイルとディスクリプションがあるカード型リンクが自動で生成されます。見栄えがいい感じになります。
Free “Developer” tier gives 1000 hits/mo for dev purposes
とのことで1000リクエスト/月までなら無料となります。
1000リクエスト以上だとプランによって値段が変わります。
Iframelyの使い方
Iframelyにアクセスして埋め込みリンク化したいURLを入力します。
すると埋め込み用のコードが生成されるので、記事中に貼り付けます。
埋め込みコードがどのように表示されるかプレビューも見られます。
これだけでIframely側が良しなにブログカードでリンク展開をしてくれます。
GatsbyJSで使用する
このブログはGatabyJSで構築されています。
GatsbyJSでIframelyを使う手順を説明します。
Iframelyコンポーネント
はじめにIframelyのコードをheadタグで読み込むためにコンポーネントを作成します。
import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
const Iframely = () => {
useEffect(() => {
if (window && window.iframely) {
window.iframely.load();
}
}, []);
return (
<Helmet>
<script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script>
</Helmet>
);
};
export default Iframely;
やっていることは、吐き出された埋め込みコードの末尾に付いているscriptタグをreact-helmet
を使ってCDNで読み込んでいます。これでサイトのheadタグ内でIframely用のscriptタグが読み込まれます。
テンプレートで読み込み
上記で作成したIframelyコンポーネントを記事テンプレートでインポートします。
import React from "react"
import { Link, graphql } from "gatsby"
import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"
import Iframely from "../components/iframely"
const BlogPostTemplate = ({ data, pageContext, location }) => {
const post = data.markdownRemark
const siteTitle = data.site.siteMetadata.title
const { previous, next } = pageContext
return (
<Layout location={location} title={siteTitle}>
<SEO
title={post.frontmatter.title}
description={post.frontmatter.description || post.excerpt}
/>
<Iframely /> <article>
<header>
<h1
style={{
marginTop: rhythm(1),
marginBottom: 0,
}}
>
{post.frontmatter.title}
</h1>
<p
style={{
...scale(-1 / 5),
display: `block`,
marginBottom: rhythm(1),
}}
>
{post.frontmatter.date}
</p>
</header>
<section dangerouslySetInnerHTML={{ __html: post.html }} />
<hr
style={{
marginBottom: rhythm(1),
}}
/>
<footer>
<Bio />
</footer>
</article>
<nav>
<ul
style={{
display: `flex`,
flexWrap: `wrap`,
justifyContent: `space-between`,
listStyle: `none`,
padding: 0,
}}
>
<li>
{previous && (
<Link to={previous.fields.slug} rel="prev">
← {previous.frontmatter.title}
</Link>
)}
</li>
<li>
{next && (
<Link to={next.fields.slug} rel="next">
{next.frontmatter.title} →
</Link>
)}
</li>
</ul>
</nav>
</Layout>
)
}
export default BlogPostTemplate
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
}
}
}
`
記事に埋め込みコードを貼る
あとはマークダウンなどに吐き出されたコードを埋め込みます。
URLの末尾についているscriptタグはコンポーネントで既に読み込んであるので削除します。
<div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://blog.otsukasatoshi.com/" data-iframely-url="//cdn.iframe.ly/x3oLq2P?iframe=card-small"></a></div></div>
表示サンプル
いい感じにGatsbyJSのサイトでもブログカードを表示することができました