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 blogpost on Medium
by Juliet Edjere ·

Contents

    In this tutorial we will learn how to tweet an auto-generated image every time you publish a new blogpost 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 in 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 blogpost 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.

    Example Image

    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

    Zapier allows you to automatically send info between RSS by Zapier integration and Bannerbear.

    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 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:

    medium.com/feed/@username or username.medium.com/feed

    Example: https://medium.com/feed/@heated or https://heated.medium.com/feed

    Medium publications

    For publication feed, for example: medium.com/publication-name, type in “/feed/” before the publication name:

    medium.com/feed/publication-name

    Example: https://medium.com/feed/heated

    Custom domain Medium publication

    For custom domain publication feed, for example: https://entrepreneurshandbook.co/, then add “/feed” to the end of the URL.

    customdomain.com/feed

    Example: https://entrepreneurshandbook.co/feed

    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 trigger, paste your RSS Feed URL:

    Click continue.

    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:

    Hit continue.

    Click the Action step, or click the plus + icon to add a step to your Zap.

    Action 1: Extract 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 the Formatter's Extract Pattern transform.

    Choose Formatter by Zapier as the app. Click the Action Event dropdown menu and select Text :

    Click continue.

    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 (?<=img src=")([^"]*).

    Click continue.

    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 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:

    • Category
    • Title
    • Author
    • Date
    • Background

    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 Tweet

    Next, add a new action to Create Tweet in Twitter.

    Choose Twitter as the app. Click the Action Event dropdown menu and select Create Tweet :

    Click continue.

    Set up action by pulling the Title and post Link from the RSS feed and the Bannerbear auto-generated Image URL.

    Hit continue.

    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.

    About the authorJuliet Edjere@juliethiri
    Juliet is a writer and product designer. She is passionate about products, technology and people, particularly building scalable solutions on top of no-code tools.

    How to Instantly Generate Certificates Online with Bannerbear and Airtable

    One way to generate a large batch of certificates on-demand is with a direct Airtable integration. Here's how to connect your base to Bannerbear and generate dozens of graphics in seconds!

    How to Auto-produce Job Listing Graphics for LinkedIn Carousel (Using Make)

    LinkedIn's carousel format can be used to showcase all types of content, such as job listing graphics. Here's how to automatically create job listing content for advertising on this platform.

    Best Practices for Generating PDFs Automatically

    PDFs are a versatile file format ideal for maintaining precise formatting and layout. If you're looking to create customized PDFs at scale while maintaining quality, keep our best practices in mind.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Auto Generate Social Media Images for your Medium Stories
    How to Auto Generate Social Media Images for your Medium Stories