Gatsby.js
Installation
1. Install modules
Install @flyyer/flyyer, react-helmet and gatsby-plugin-react-helmet.
- Yarn
- NPM
yarn add @flyyer/flyyer react-helmet gatsby-plugin-react-helmet
npm install --save @flyyer/flyyer react-helmet gatsby-plugin-react-helmet
2. Add the plugin to the plugins array in your 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.
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.
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.
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.