Express.js

Installation#

1. Install the @flayyer/flayyer module#

Yarn
NPM

Terminal.app

yarn add @flayyer/flayyer

2. Generate smart image URLs#

Use @flayyer/flayyer to generate the smart image link on your controllers, then the req.originalUrl to set the current pathname dynamically.

You can Find your project-slug in your dashboard. Don't have a project yet? Create one here.

In this example we do it for the root path (/) but should work for any path as is.

routes/index.js

const { FlayyerAI } = require("@flayyer/flayyer");

const express = require('express');
const router = express.Router();

router.get('/', function(req, res, next) {
  const flayyer = new FlayyerAI({
    project: "your-project-slug",
    path: req.originalUrl,
  })
  // Pass `flayyer` variables to views.
  res.render('index', { title: 'Express', flayyerHref: flayyer.href() });
});

3. Render meta-tags on views#

Use your favorite view engine, just make sure to render the following meta-tags in the <head /> of your pages.

<meta property="og:image" content={flayyerHref} />
<meta name="twitter:image" content={flayyerHref} />
<meta name="twitter:card" content="summary_large_image" />

If you're using Jade, set it on your layout views.

views/layout.jade

head
  meta(property='og:image', content='#{flayyerHref}')
  meta(name='twitter:image', content='#{flayyerHref}')
  meta(name='twitter:card', content='summary_large_image')

note

If you're having trouble, please make sure you always render those meta-tags in the <head /> of your pages, and that they are not overwritten elsewhere.

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 @flayyer/flayyer supports HMAC and JWT signatures.

To find your secret key, go to your dashboard > your project > Advanced settings > Signed URLS, and enable the signing strategy you desire.

routes/index.js

const { FlayyerAI } = require("@flayyer/flayyer");

const express = require('express');
const router = express.Router();

router.get('/', function(req, res, next) {
  const flayyer = new FlayyerAI({
    project: "your-project-slug",
    path: req.originalUrl,
    secret: "your-secret-key",
    strategy: "JWT", // or "HMAC"
  })
  // Pass `flayyer` variables to views.
  res.render('index', { title: 'Express', flayyerHref: flayyer.href() });
});

Render your meta-tags just as in the previous section.