Learn

 / 

Jon Yongfook

 / 

How to use Bannerbear with Zapier to automatically-generate Instagram stories

How to use Bannerbear with Zapier to automatically-generate Instagram stories

BannerbearJon Yongfook
Intermediates

Description:

Notes

Watching this Video will take Approximately: 

5m

Reading this lesson will take approximately: 

5m

The Original Source of this content may include additional useful information or context, and will likely contain links to any content, templates or resources mentioned by the narrator. You can find visit the source below:

View Original SourceView Original Source

Lessons Overview

1

How to use Bannerbear with Zapier to automatically-generate Instagram stories

Lesson Content:

What is Zapier?

Zapier is an amazing tool that acts as "glue" between 2000+ different apps. Think of it as an automated and highly configurable import/export tool. You can export data from one place, send it to another, and perform different actions on that data.

What is Bannerbear?

Bannerbear is an API for generating images. You design a template (or grab one from the library) and then feed in data using the API to generate images based off that template e.g. with different texts, colors and background images.

What can I do with Zapier + Bannerbear?

Zapier + Bannerbear is a powerful way of using the Bannerbear API without writing code. Using the Bannerbear Zapier integration you can send data from thousands of different apps into Bannerbear, and you can also instantly perform actions when Bannerbear generates new images.

Sample image

In this tutorial we will connect the New York Times + Zapier + Bannerbear to automatically generate an Instagram Story-size article preview image, every time the NYT publishes a new article. Here is a sample of the end result:

></div></figure><h2>Adding a Bannerbear template</h2><p>In Bannerbear, create a new project and add the sample New York Times IG Story template to it.</p><figure class=
></div></figure><p>This is a simple template with basically 3 layers we can manipulate via the API:</p><ul><li>Title</li><li>Abstract</li><li>Background image</li></ul><p>The next step is pushing data from Zapier into this template.</p><h2>Connecting Zapier to Bannerbear</h2><p>To authenticate with Zapier later you will need your Project API Key. This key is different for each project you create in Bannerbear, so bear that in mind (pun intended).</p><figure class=
></div></figure><figure class=
></div></figure><p>Copy the API key to your clipboard to use later.</p><h2>Creating a new Zap in Zapier</h2><p><strong>Now lets switch to the Zapier interface.</strong></p><p>In your Zapier.com account, create a new Zap.</p><p>As the New Article in New York Times.

></div></figure><p>After this, Zapier will ask which section of the newspaper to create the trigger for. You can choose anything here, such as

Trimming the New York Times data

Often you will need to massage data before sending to API services like Bannerbear. The New York Times service is a good example. It gives multiple images in the data for every article, in the form of an array, but we actually only want to pick one image (the first one) and send it to Bannerbear.

Zapier has a powerful tool called Formatter that can help us here. It can perform various transformations on data - in this case, taking an array and returning just the first result.

Add Formatter as the next step in your Zap and choose the Utilities action:

></div></figure><p>We want to configure this step to take the
  • Transform: Pick from List
  • Operation: Choose First
  • Input: Multimedia URL
></div></figure><p>Test the output. What you are looking for is that
></div></figure><h2>Connecting Zapier to Bannerbear</h2><p>Add a next step to your Zap.</p><p>In the next step Zapier will ask what you want to do with the data gathered thus far. We want to push it to Bannerbear, so search for and choose Bannerbear from the menu:</p><figure class=
></div></figure><p>Choose
></div></figure><p>Next Zapier will ask you to authenticate with Bannerbear. This is where you use the <strong>Project API Key</strong> that you copied to your clipboard earlier.</p><figure class=
></div></figure><h2>Selecting NYT data to push to Bannerbear</h2><p>Once you have successfully authenticated, after clicking

This dropdown list will show your project's current templates. Choose the NYT template that you added. If you just added the template in Bannerbear without editing it, the name will probably show up in Zapier as "Publishing 1".

></div></figure><p>Next, Zapier will load all of the template layers that you can manipulate.</p><p>Earlier I mentioned that this template is pretty simple and there's really only 3 things we want to manipulate:</p><ul><li>Background image</li><li>Abstract</li><li>Title</li></ul><p>Here's how to do that:</p><ol><li>Connect template <strong>Background Image URL</strong> to the Formatter <strong>Output</strong></li><li>Connect template <strong>Abstract Text</strong> to the NYT <strong>Abstract</strong></li><li>Connect template <strong>Title Text</strong> to the NYT <strong>Title</strong></li></ol><figure class=
></div></figure><figure class=
></div></figure><figure class=
></div></figure><p>When you hit continue, Zapier will show you a confirmation screen before sending a test.</p><h3>Data confirmation</h3><figure class=
></div></figure><p>Here you should verify 3 things:</p><ol><li>That the background image url is a single url</li><li>That the abstract text is populated with text</li><li>That the title text is populated with text</li></ol><p>If those 3 items look good, hit
></div></figure><p>If you do not see this there is likely a problem with the data you are sending. Confirm the <strong>data confirmation</strong> step above.</p><h2>Viewing the test image</h2><p>Back in Bannerbear, go to your Project and view the images list. You should see your test image in the list.</p><figure class=
></div></figure><p>Full size view of the generated image:</p><figure class=
></div></figure><h2>Turn on the Zap!</h2><p>You have completed all the steps! The only thing left to do now is to
></div></figure><p>Congratulations! :)</p><h2>Next Steps…</h2><p>Why not try extending this tutorial with these ideas for next steps using Zapier?</p><ul><li>Add an auto email notification</li><li>Import data from a different source</li><li>Automatically add the final, generated image url to a spreadsheet</li></ul><p>‍</p></div></div><div id=

Tools used in this Tutorial

Bannerbear
Zapier