Skip to main content

Gatsby.js

Installation

1. Install modules

Install @flyyer/flyyer, react-helmet and gatsby-plugin-react-helmet.

Terminal.app
yarn add @flyyer/flyyer react-helmet gatsby-plugin-react-helmet

2. Add the plugin to the plugins array in your gatsby-config.js

gatsby-config.js
plugins: [`gatsby-plugin-react-helmet`]

3. Format Flyyer CDN URLs for your meta-tags

Use react-helmet to append the meta-tags to the <head />. The plugin will make sure it works with static generation ("server-side") which is required for link previews. Then @flyyer/flyyer to generate the smart image link along with props.location from the page component to set the pathname dynamically.

Find your project identifier here. If you don't have a project yet, create one here.

This example is on the index page, but it should work on any of your pages as is.

pages/index.js
import React from "react"
import { Helmet } from "react-helmet"
import { Flyyer } from "@flyyer/flyyer"

export default function IndexPage(props) {
  const flyyer = new Flyyer({
    project: "your-project-identifier",
    path: props.location.pathname,
  });
  return (
    <div>
      <Helmet>
        <meta property="og:image" content={flyyer.href()} />
        <meta name="twitter:image" content={flyyer.href()} />
        <meta name="twitter:card" content="summary_large_image" />
        {/* [Recommended] Keep your original og:image handy for your project */
        /* <meta name="flyyer:default" content={your-original-og-image} /> */
        /* ... */}
      </Helmet>
      {/* ... */}
    </div>
  )
}
note

If query params from your URL enrich your image preview, you can get them from props.location.search

4. Voilà 🎉

Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.

Go to your dashboard 🚀

Advanced usage

Signed URLs

The module @flyyer/flyyer supports HMAC and JWT signatures.

Find your secret key here under Signed URLS, and enable the signing strategy you desire.

pages/index.js
import React from "react"
import { Helmet } from "react-helmet"
import { Flyyer } from "@flyyer/flyyer"

export default function IndexPage(props) {
  const flyyer = new Flyyer({
    project: "your-project-identifier",
    path: props.location.pathname,
    secret: "your-secret-key",
    strategy: "JWT", // or "HMAC"
  });
  return (
    <div>
      <Helmet>
        <meta property="og:image" content={flyyer.href()} />
        <meta name="twitter:image" content={flyyer.href()} />
        <meta name="twitter:card" content="summary_large_image" />
        {/* [Recommended] Keep your original og:image handy for your project */
        /* <meta name="flyyer:default" content={your-original-og-image} /> */
        /* ... */}
      </Helmet>
      {/* ... */}
    </div>
  )
}
caution

Make sure Flyyer is instanciated at build time or server-side, so your secret is not exposed on the client. You're invited to contribute to this guide with your preferred method.