How to Auto-Generate Social Media Images for your Medium Stories
In this tutorial, we will learn how to tweet an auto-generated image every time you publish a new blog post on Medium.
Visuals increase engagement. You can get your Medium post noticed on social media by including a great, eye-catching visual that conveys what your post is about and entices more people to click. With this tutorial, you can add an attention-grabbing touch to your new blog content on Medium!
In order to use Medium with Zapier, it is necessary to have a Medium account.
What is Medium?
Medium is a publishing platform where people can read important, insightful stories on the topics that matter most to them and share ideas with the world.
What will you do
In this tutorial, we will learn how to tweet an auto-generated image every time you publish a new blog post on Medium. You will
- Integrate the feed of your publication on Medium with Zapier.
- Add Bannerbear images from new RSS feed items.
- Post the generated image on Twitter
With Zapier integration, you can tweet Bannerbear posters and promotional images with every new post found in your RSS feed.
Get Started with Bannerbear Template
We will use the Publishing Open Graph template specifically designed to accommodate your Medium article. Use this template HERE:
Create a new Medium Blog project. Add the Publishing Open Graph template to your Project.
Hit Edit Template to view the layers:
The template will be needed to map the layers with the RSS feed on Zapier. You can adjust the opacity of the background gradients:
Get Bannerbear API Key
At this point, you will also want to copy your Project API Key as you will need this later to authenticate with Zapier. Get API Key from Your Project → Settings / API Key:
Copy the Project API Key to your clipboard:
Integrate with Zapier
Next, connect Zapier with your Bannerbear account to automatically share new images on your social channels with every new blog post.
Get your RSS feed URL scheme
To connect your Medium account to Zapier, you need to obtain the RSS feed URL scheme for your Medium account. With your Medium RSS feed URL, you can view the latest stories on your Medium profile page feed.
Profile page RSS feed:
For users’ RSS feed, for example: medium.com/@username or username.medium.com, type in “/feed/” in the format:
For publication feed, for example: medium.com/publication-name, type in “/feed/” before the publication name:
Custom domain Medium publication
For custom domain publication feed, for example: https://entrepreneurshandbook.co/, then add “/feed” to the end of the URL.
Make a Zap
Log in to your Zapier account and Make a Zap:
Set up Trigger
RSS Triggers allow you to watch, list publications and create posts in your Medium account.
Choose RSS by Zapier as the app. Select New Item in Feed as the Trigger Event.
To set up the trigger, paste your RSS Feed URL:
Next, Test your trigger. Zapier will find a recent item in your RSS to confirm that the right account is connected and your trigger is set up correctly:
Click the Action step, or click the plus + icon to add a step to your Zap.
Action 1: Extract the Background Image
Next, configure a dynamic background by passing in a background image from the RSS feed.
To do that, you will extract the poster image from the
description tag and get the
img src attribute to use as the image background. This will be done using Formatter's Extract Pattern transform.
Choose Formatter by Zapier as the app. Click the Action Event dropdown menu and select Text :
In the Transform dropdown menu, select Extract pattern. This will separate part of the content from a field by using regular expressions (regex) to extract partial data from a field.
Select the field you want to search through in the input field as Raw Description.
Enter the Python regex you want to use in the Pattern field as
Test your step by clicking Test & Review.
The step will show the results of the regular expression. If the regular expression finds a match, it will return it in the field output.
Next, add another action where the result of the Formatter step will be used.
Action 2: Create an Image in Bannerbear
Choose Bannerbear as the app. Click the Action Event dropdown menu and select Create Image :
Allow Zapier to access your Bannerbear Account by pasting the Project API key.
Click Yes, Continue.
Choose the Bannerbear account from the dropdown.
Configure the template data
Select the Template ID as Publishing Open Graph. The fields we will map are:
To match the background to the Image URL, choose the image output from the Text action dropdown menu:
Map the Category, Title, Author and Date fields:
Click on continue. An image will be sent to Bannerbear.
Copy the image_url link to your browser to preview the generated image:
Action 3: Create a Tweet
Next, add a new action to Create Tweet on Twitter.
Choose Twitter as the app. Click the Action Event dropdown menu and select Create Tweet :
Set up action by pulling the Title and post Link from the RSS feed and the Bannerbear auto-generated Image URL.
Test & Review:
A tweet will be sent to Twitter with your custom message and the generated image:
Turn on Zap. Viola! Every time you make a new post, it will automatically be pushed to Twitter.
This article was originally published on Bannerbear.com on September 20, 2021. Written by: Juliet Edjere
I'm Juliet 'Hiri' Edjere, a no-code expert focused on design, business development, and building scalable solutions with minimal coding knowledge.
I document all things product stories, MVP validation, and how designs, data, and market trends connect to one another.
In our world where innovation knows no boundaries, and creativity reigns supreme, no-code is a game-changer in today's tech landscape. Whether you're a developer looking to expand your skill set or a beginner curious about creating without writing a single line of code, you will learn from practical examples, and explore the possibilities of no-code technology. Together, we'll navigate the tools, platforms, and strategies – one blog post at a time!