Building a Social Media Image Generator

January 14, 2020

Joe Previte

Photo by Wilhelm Gunkel on Unsplash

The other day, a friend named Jason Lengstorf shared a blog post called “Automatically Generate Social Images for Blog Posts.” I saw it and thought the idea was super cool.

Then, a light bulb went on.

What if we could use this to help with our social media?

Rewind to a week ago. I was chatting with Anne about the blog. Our conversation went something like this:

“I love that we’re pushing out more blog posts but it’s taking up a ton of time. And it’s taking away from my other responsibilities.”

“What takes the most time outside of editing?”

“Creating images to be shared along with our blog posts on Twitter. I’m spending sometimes 20+ minutes in Canva, even with the template from the design team.”

I thought to myself, “Why not use Jason’s tutorial plus the template from the design team and build something to generate the image in seconds?”

So that’s what I did!

Building the Generator

Jason’s blog post laid the groundwork for how the image would be generated. All we needed to do was provide a title and tagline, and then we could generate the image and use it on social media. Perfect!

Using , Next.js and a Next API route — all hosted by ZEIT — we made it happen.

We built a simple form that asks for a title and a tagline. You then click “generate”, which sends a request to the route and responds with a URL to the template image with text overlaid on top (thanks to Cloudinary).

Taking the URL, we draw it on an HTML5 element and then provide a convenient “download” button. Here’s what it looks like in action:

Our blog image generator in action.

Team Work

We couldn’t have built a solution this quick without help from the following people and organizations:

  • Jason Lengstorf
  • ZEIT
  • Cloudinary

If you’re interested in setting something up yourself, you can view the source code and sign up for Cloudinary here!

Thanks for reading!

More about:

Joe Previte