flayyer.io

Og:Image as a Service

Crea plantillas con React.js y Vue.js. Sube tus increíbles diseños de plantillas a nuestra nube y úsalas para renderizar miles de imágenes.

Comienza
Esta imagen fue creada usando Flayyer.ioCambia la <meta property="og:image" /> de tu sitio por un link de Flayyer. Revisa nuestras guías de integración.flayyer.com
https://flayyer.com/es/io/demo
import React from "react"
import { TemplateProps } from "@flayyer/flayyer-types";
import clsx from "clsx";
import "../styles/tailwind.css";
import logo from "../static/logo.svg";
// https://flayyer.io/v2/flayyer/flayyer-landing-demo/main.jpeg?title=Create+more+engagement
type Variables = { title: string, img?: string };
export default function MainTemplate({ agent, variables }: TemplateProps<Variables>) {
const { title, img = "https://images.unsplash.com/photo-1601933552240-d6b9e8e01cdc?w=1200" } = variables;
if (agent.name === FlayyerAgentName.WHATSAPP) {
return (
<Layer className="bg-gray-800 p-20">
<img src={logo} className="w-full h-full" />
</Layer>
);
}
return (
<div>
<Layer>
<img className="w-full h-full object-cover object-bottom" src={img} />
</Layer>
<Layer className="bg-gradient-to-r from-gray-900 opacity-70 mr-96" />
<Layer className="flex flex-col justify-center items-start px-12 py-12 w-1/2">
<img src={logo} className="w-24 h-24" />
<h1 className="text-8xl text-white tracking-tight font-semibold">
{title}
</h1>
</Layer>
</div>
);
}
function Layer({ className, ...props }: React.ComponentProps<"div">) {
return <div {...props} className={clsx("absolute inset-0", className)} />;
}

JavaScript

Usa nuestro formateador universal de URL @flayyer/flayyer-js para integrarnos a cualquier framework.

Express.js

Podemos ser integrados a cualquier framework Connect.js o Fastify. Cada view engine es compatible.

Gatsby

Gatsby.js

Amamos JAMStack, y por supuesto soportamos Gatsby. Echa un vistazo a nuestra guía.

next-black

Next.js

Flayyer fue tremendamente inspirado por este framework, nuestro sitio está desarrollado con Next.js

Python

Creamos un paquete pip flayyer para que no tengas que lidiar con la codificación URL. Independiente del framework.

Django

Hemos utilizado este framework por muchos años. Armamos especialmente una guía y un ejemplo para amantes de Django.

Ruby

Nuestra gema oficial flayyer ya está disponible y lista para ser instalada. Independiente del framework.

Ruby on Rails

Potencia tu app de Rails con Flayyer. Estamos desarrollando una gema para hacer esto más automático.

Official PHP Logo

PHP

Muchos nos pidieron un plugin para Wordpress, por eso creamos esta librería independiente de PHP con Composer: flayyer/flayyer

Wordpress

Para tu blog, e-commerce, portafolio, o cualquier tipo de sitio web que desees. Revisa flayyer/flayyer-wp

Developer Experience y sin configuraciones

We strongly believe in providing the best developer tools to help you maximize productivity.

Deploy automático con GitHub Actions

Automatiza tu flujo de trabajo con GitHub Actions en menos de 5 minutos

Configura ahora

Un servicio distribuido globalmente mediante edge technology

Te garantizamos la mejor experiencia de usuario ofreciendo respuestas rápidas gracias a nuestro sistema global de caché.

PlanetPlanet avatar 01Planet avatar 02

Plantillas creadas

342+

Imágenes generadas

21.7K+

Datos descargados

18GB+

Disponibilidad

99.95%

El 90% de las compañías descuidan sus vistas previas

Empresas invierten miles de dólares en campañas publicitarias pero muchas personas las ignoran.
Cuando los usuarios comparten tus links hay una mayor probabilidad de que obtengas visitas. ¡No pierdas esa oportunidad!

gallery
gallery
gallery
gallery
gallery
gallery