Building a Social Media Image Generator

Joe Previte
Joe PreviteTuesday, January 14, 2020
A closeup of a gear in a dark space.

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 chakra-ui, 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 /api 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 Canvas 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
  • chakra-ui
  • 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!

Share this post


Related Posts:

Interested in working with us?

Give us some details about your project, and our team will be in touch with how we can help.

Get in Touch