GatsbyJSブログの記事にiframelyで良い感じに外部リンクを埋め込んだ

2020-07-08

Content

はじめに

おはようございます！こんにちは！こんばんは！
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です！！

今回はGatsbyJSブログの記事にiframeryで良い感じに外部リンクを埋め込めるようにしたので解説します。

外部リンクが良い感じになるだけで良い感じのブログになりますね！！

前提
iframelyとは
iframelyのサイトから埋め込みコードを取得する
iframelyコンポーネントを作成する
iframelyコンポーネントをblog-post.jsに設置する
記事に埋め込みコードを貼り付ける
確認
まとめ

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

iframelyとは

埋め込みコードをまとめて生成してくれるサービスです。

前回までの記事でYouTubeやTwitterは独自の埋め込みコードがあるのでそちらの利用方法を解説しましたが、その他の多くのサイトでは埋め込み用のコードが用意されていないので、独自で設定する必要があります。

そこでIframelyを使うことで、外部リンクの埋め込みができるようになります。

iframelyのサイトから埋め込みコードを取得する

iframelyのサイトにアクセスして、埋め込みたいサイトのURLを入力してCHECK ITボタンを押してください。

すると埋め込み用のコードが表示されるのでCOPY CODEボタンでコピーしてください。
大きいサイズと小さいサイズを選べる場合があるので、チェックボックスで選択してください。

iframelyコンポーネントを作成する

iframelyコンポーネントを作成します。

src/components/iframely.js

import React, { useEffect } from "react";
import Helmet from "react-helmet";

function Iframely() {
  useEffect(() => {
    if (window.iframely) {
      window.iframely.load();
    }
  }, []);
  return (
    <Helmet>
      <script async src="https://cdn.iframe.ly/embed.js" />
    </Helmet>
  );
}
export default Iframely;

iframelyコンポーネントをblog-post.jsに設置する

iframelyコンポーネントをblog-post.jsに設置します。

src/templates/blog-post.js

const BlogPostTemplate = ({ data, pageContext, location }) => {
  ・・・・
  return (
    <div>
      <Iframely />
      ・・・・
    </div>

記事に埋め込みコードを貼り付ける

記事のマークダウンファイルの好きな位置に取得したコードを貼り付けます。

↓のようにscriptタグが最後についている場合は、削除してください。

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

確認

取得したコードを貼り付けると、以下のように表示されれば完成です！！

まとめ

今回はGatsbyJSブログの記事にiframeryで良い感じに外部リンクを埋め込めるようにしたので解説しました。

外部リンクが良い感じになるだけで良い感じのブログになりますね！！

小さいサイズにする場合に、画像が中央によってしまうので、ヘッダーの画像とかも修正したほうが良さそうですね・・・

そのうちやろう！！

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。

最後まで見ていただきありがとうございます！！

Content[Close]