Automate a Tweet Image Every time you Publish a Blog Post

Stack: Zapier, Bannerbear, Swish.ink, Twitter

Automate time: 1 hour

Connect Swish + Zapier + Bannerbear to automatically generate a twitter image, every time a new blog post is published. A zap will take a new post off your blog RSS Feed, create a custom image through Bannerbear and post it onto twitter.

Create a Custom Image with Bannerbear

What is Bannerbear? An image generation API that automatically generates custom share images for social media and eCommerce banners via API & nocode integrations. With Bannerbear design templates, it’s easy to customise social cards to generate images in line with the site's brand by changing content and theme.

Create an account or sign in on Bannerbear

Bannerbear free trial plan accomodates 30 images and 1 minute of video. No credit card is required to start a free trial. If you’d rather purchase a plan, here’s an overview of the pricing structure:

Automate $49/ mo - Automate your marketing	Scale $99 / mo - Scale your marketing	Enterprise $399 / mo - High volume access

To get started, create and name a new project
Create a template using a predefined preset on Bannerbear.
Make edits to default text, colors and manipulate the layers. The static layers that I prefer to remain unchanged - link, rectangle_8, blog logo, rectangle_7, overlay and background image. Thus the blog title will be the only dynamic layer for now. Zapier will load the template layers that need to be manipulated.

Automate with Zapier

What is Zapier? A tool that helps you automate repetitive tasks between two or more web apps without code. When an event happens in one app, Zapier can tell another app to do a particular action. Zapier’s free plan features 5 Zaps with a 15 minute update time.

Create a Zap. Name your Zap so you can easily identify it on your dashboard.
Add a Trigger

Choose trigger app by selecting ‘RSS by Zapier’. The Zap will be triggered by an update in the RSS feed.

What is RSS? RSS stands for Really Simple Syndication. An RSS feed is an online file that contains details about every piece of content a site has published. Each time a site publishes a new piece of content, details about that content including the full-text of the content or a summary, publication date, author, link, etc.

Select trigger event as ‘New Item in Feed’ so that every new post will trigger an auto-generated image. This will be the event that occurs in the RSS feed that triggers the Zap.
Set up your trigger options. Paste your publicly accessible RSS URL in the Feed URL field. To find the feed URL for your blog post, simply add `/feed` to the end of your URL; e.g., https://juliethiri.swish.ink/feed.xml. Here’s some help - How to Find the RSS Feed URL for Almost Any Site.

Side note: Safari cannot display RSS feeds. Try Google Chrome.
Test your trigger to see if it pulls in the right data. Check that the title, link, description align with your existing blog posts. When your trigger is set up successfully, a green checkmark icon will appear in the top left of the step.

Add Bannerbear action - An action is an event a Zap performs after it starts

Choose app & event - Search for Bannerbear app and set the action event as ‘Create Image’. This is performed when the Zap runs.

Choose Account - Connect your Bannerbear account to authorize Zapier access your Bannerbear Account. Your Project API Key is required for this step. Switch back to Bannerbear for a second - You can get an API key by creating a project in Bannerbear. The API key is in your Project → Settings page. This key is different for each project you create in Bannerbear.

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes.

Set up Action - Customise the image by selecting a template ID. The dropdown list will show your project's current templates. Choose the template recently created on Bannerbear.
Populate template layers - Following that the 'Title' is the only dynamic layer. The image file field will be the thumbnail Connect template Title text to Title which came via RSS
Test and Preview created image - Verify that the title text is populated with text

Add twitter action - To add more actions, click the + icon after a step.

Choose the action app as Twitter. The Zap will perform an action in this app when it is triggered.
Set the action event as ‘Create Tweet’ on your twitter account. This will be the event that the Zap performs in the selected app when it is triggered.
Select or connect your twitter account to use in the Zap action.
Write the content of your new tweet in the 'message' field. Take note of Twitter's 280 character limit.
Select 'Image URL jpg' as the image you want to send over to twitter
Test and preview action to see if it's working as expected.

After you set up your action and you're ready to turn your zap on, toggle the switch ON. Once your Zap is turned on, Zapier will run your action steps each time your trigger event occurs. So when new articles are posted on the blog, your Zapier workflow gets activated and new images will show up in your Bannerbear account.

Here is a sample of the end result: