All Articles

Embedding beautiful links to Gatsby site using Iframely

As I wrote last post, this blog is created using Gatsby.

Some blog services provide a feature embedding beautiful links with images.

I wanted to embed links like that in my Gatsby blog, therefore I started to use service called Iframely.

Thanks to below Japanese blog, I can embed links generated by Iframelty to my blog.

Getting Iframely links is easy, go to Iframely site and input urls which you want to embed.

Creating account of Iframely is needed.

Then code of that link will be generated, you can copy and paste to your site.

When using in Gatsby, you will need to insert such react component.

import React from 'react';
import Helmet from 'react-helmet';

export default class Iframely extends React.Component {

  componentDidMount () {
    if (window.iframely) {
      window.iframely.load();
    }
  }

  render() {
      return (
        <Helmet>
          <script type="text/javascript" src="https://cdn.iframe.ly/embed.js" charset="utf-8"/>
        </Helmet>
    );
  }
}