How to Automatically Turn Your Twitter Likes Into Beautiful Visuals for Social Media

June 2020

automationnocodetutorial

Here's a neat little trick that I use to auto-generate original visual social media content with almost zero effort.

In this tutorial I will show you how to use Bannerbear, Zapier and Buffer to perform this fully automated workflow:

  1. Capture Liked Tweets
  2. Apply a Quality Filter
  3. Auto Generate a Visual
  4. Schedule For Posting

The result is auto-generated images that look like this:

If you follow BannerbearHQ on Twitter you may have seen some of this style of image pop up on the feed. Well, the curtain has now been drawn back… it's all fully automated!

A Note on Authenticity

One thing before we start: with great power comes great responsibility!

This technique can pretty much fully-automate a social media account with auto-generated content. Sometimes that may be appropriate, other times it may not be - it will depend on your brand and the goals you have for social media.

Personally, I use this technique to supplement other types of content that I post on social - it's not the only thing I post.

The Finished Zap

If you are already familiar with Zapier, Buffer and Bannerbear already and just want to view / copy the finished zap, here is the link.

For everyone else, lets get started!

1. Capture Liked Tweets

Zapier features a trigger that activates whenever you like a Tweet. This is how our automated workflow begins, so choose that trigger in Zapier:

Choose which account you want to track the likes from and that's all for step 1!

2. Apply a Quality Filter

Here's where things start to get a bit more interesting.

Not every piece of content that you Like on Twitter is quote-worthy. So we don't really want everything we like on Twitter to end up auto-generating an image.

But at the same time, we don't want to have to alter our Like behaviour to cherry-pick content specifically for this workflow. Ideally we should just use Twitter as normal, and let this workflow decide what content to actually push through this process.

So the next step is setting up a filter.

You can tweak this to suit your preferences of course since this step is subjective, but personally I have set this workflow to only continue if:

  • The tweet is not a reply to someone (it is a standalone tweet)
  • Has a certain amount of likes
  • Is under a certain character count - Bannerbear features auto font-resizing so text length is not really an issue, but I'm looking for short-punchy tweets as they work best as image quotes
  • Does not have any links or mentions - again, same reason as above I'm looking for standalone text-based tweets that don't reference anything external

3. Auto Generate a Visual

The next step involves Bannerbear so if you haven't already, sign up for an account.

I have added a quote style template for you to use with this tutorial - you are of course free to design your own template using the Bannerbear template editor!

Add the template to a new Project:

This template is already set up with the layers needed for a tweet image, those being:

  • Tweet text
  • Author name
  • Twitter handle
  • Avatar

Once you've added the template to a Bannerbear project, make a note of your Project API Key as you'll need that next:

Create an Image in Bannerbear via Zapier

Back in Zapier, add the next step in the automated workflow - choose the Bannerbear app and the "Create Image" action:

Zapier will then ask you what Bannerbear template to use and present a dropdown list to choose from. Choose the template you just added.

The final part of this step is simply populating the template with data from the Tweet:

Connect the "Tweet text" field to the text data from the tweet, the "Handle text" field to the screen name data etc.

One thing to note is that in my Zap I have an earlier step to transform avatar urls provided by the Twitter API into a higher resolution version. If you use the avatar urls from the original tweet data, you will find that they are small and the result will be pixelated.

Run a test to ensure everything is working correctly and you should get a fresh, auto-generated image as a result:

Next step - lets do something with this image!

4. Schedule For Posting

Now that the image has been rendered by Bannerbear, we need to do something with it :)

You could post to social media straight away via Zapier using this workflow but personally I prefer to add to my Buffer queue so that I don't overwhelm my feed. As the next step in the workflow I post the image to Buffer with a simple text message that includes the @name of the original author:

And that's it!

Now you have an automated image generation workflow that creates fresh visuals when you Like tweets on Twitter (as long as they pass your filter criteria) and then schedules them for posting to social!

Next Steps

How might we take this Zapier workflow a step further? How about trying…

  • Sending the image to 2 different Buffer queues
  • Sending the tweet data to 2 different Bannerbear templates
  • Using different Bannerbear templates based on certain critera…
Author
Jon Yongfook@yongfook

Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation and design efficiency. Jon is a digital nomad and can be found riding a motorcycle around Asia, lives out of Airbnbs and works from coworking spaces.

Get Notified

Be first to know about new features and tips on marketing and design automation