Turn Your Instagram into NFTs with Bannerbear and Zapier

— Juliet Edjere

Manually creating thousands of images will take forever. We’ll use Bannerbear to generate NFT-style cards automatically

Recent years have seen the popularity of NFTs (Non-Fungible Tokens) mushroom among art collectors and investors.

Creating and selling NFTs provides an alternative way to generate income. The sale of digital artwork has resulted in millions of dollars causing speculators to take advantage of the rise in digital artwork sales.

In January 2022, Singapore-based crypto influencer Irene Zhaolaunched her NFT collection IreneDAO. This recorded S$7.5 million in trading volume within the first week. Similarly, Indonesian influencer Ghozali Ghozalu made US$1 million from the almost 1,000 selfies he minted as NFTs on Opensea.

You are probably wondering how to break into this space.

In terms of time and effort, it would be incredibly difficult to generate thousands of images manually. This is why NFT artists nearly always rely on custom code. If you’re a programmer, this seems pretty easy, but if you're not, this can seem like an overwhelming task.

What we will do

The bulk of the heavy lifting can be automated using no-code tools because not all artists are programmers who can generate thousands of dynamic NFTs.

In this tutorial, we will

  1. take an Instagram image
  2. generate a random number and random text
  3. overlay a serial number and a randomly placed caption to create unique images with Bannerbear

Example Images

Create a Bannerbear project

Create and name a new project in your Bannerbear account:

Tutorial for NFT and Bannerbear

Select a template

Manually creating thousands of images will take forever. We’ll use Bannerbear to assemble our NFT images.

Browse Template Library to choose a template that fits the use case. Alternatively, you can choose to Create a Template from scratch.

With Bannerbear, you can customise an existing template, adjust the layout, add layers, objects, colours, fonts, etc.

Tutorial for NFT and Bannerbear

For this tutorial, we have a standard NFT template that fits this use case. You can duplicate this template here.

Or, Simply click on the image below to add it to your project automatically:

Bannerbear NFT template

Edit template in your project and review the layers:

template editor screenshot of bannerbear for tutorial

Save template.

Get your Bannerbear Project API Key

You will need your Bannerbear API key at a later stage to authenticate with Zapier. The API key is unique for each project. The Project API key is found on the Settings / API Key page of your Project:

Screenshot of Bannerbear settings

Copy the Project API Key to your clipboard:

step by step tutorial for bannerbear API key

Now we can integrate Zapier with your Bannerbear account to automatically generate new images.

Log in to your Zapier account and Make A Zap:

Step by step tutorial of Zapier screenshot

Now let's get into your database and find the best unique images you have.

Zap #1: Trigger when a photo is posted to your Instagram account

Almost any of your photos can be used as an NFT. When selecting photos to use, you can consider creating collections based on a particular theme, not just a random set of images.

Choose a trigger event for your zap so that when a photo or video is posted to your selected account, a new image is created.

🐻 Bear Tip: To generate more images, replace Instagram with Google Drive so that a trigger is set off when any new file is added (inside of any folder).

Choose _ Instagram _ as the app to be connected to and select _ New Media Posted in my Account _ as the trigger event:

Tutorial screenshot for Zapier and Bannerbear

Hit Continue.

The next step allows you to connect your Instagram account. Choose your account to set up trigger:

Tutorial screenshot for Zapier and Bannerbear chose account

Next, test trigger. This should pull up media from your account:

screenshot tutorial on Zapier for bannerbear

Zapier will find recent media in your Instagram account to confirm that the right account is connected and your trigger is set up correctly.

Zap #2: Run Javascript

Next, add another action to generate a random number and caption.

Choose Code by Zapier as the app and select Run Javascript as the action event:

App event screenshot for Zapier tutorial

Next, we need to set up action by inputting the code:

code for zapier tutorial action

Let's get into how we arrived at that. To generate a random number:

function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

To generate a random hex colour code:

function randomColor() {
  return '#' + Math.floor(Math.random()*16777215).toString(16);
}

There are a lot of different terms used within the NFT community. For this tutorial, we will randomize these words:

var quotes = [
  'GM',
  'GN',
  'Ser',
  'Fren',
  'WAGMI',
  'GMI',
  'AB',
  'Generative Art',
  'PFP',
  'Looks Rare',
  'FOMO',
  'COPE',
  '1:1 Art',
  'Szn',
  'IRL',
  'Up Only',
  'Probably Nothing',
  'Liquidity',
  'Mint',
  'HEN',
  '1/1 of X',
  'Right Click Save As',
  'This is the way',
  'Alpha',
  'Wen Moon',
  'HODL',
  'Airdrop'
]

function randomQuote() {
  var index = Math.floor (Math.random() * (quotes.length)) ;
  return quotes[index];
}

To get your output of all functions:

output = [{
  color: randomColor(),
  number: randomNumber(1000,10000),
  quote: randomQuote()
}];

When that’s done, paste this into the Code field and it should look like this:

// this is wrapped in an `async` function
// you can use await throughout the function
function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function randomColor() {
  return '#' + Math.floor(Math.random()*16777215).toString(16);
}

var quotes = [
  'GM',
  'GN',
  'Ser',
  'Fren',
  'WAGMI',
  'GMI',
  'AB',
  'Generative Art',
  'PFP',
  'Looks Rare',
  'FOMO',
  'COPE',
  '1:1 Art',
  'Szn',
  'IRL',
  'Up Only',
  'Probably Nothing',
  'Liquidity',
  'Mint',
  'HEN',
  '1/1 of X',
  'Right Click Save As',
  'This is the way',
  'Alpha',
  'Wen Moon',
  'HODL',
  'Airdrop'
]

function randomQuote() {
  var index = Math.floor (Math.random() * (quotes.length)) ;
  return quotes[index];
}

output = [{
  color: randomColor(),
  number: randomNumber(1000,10000),
  quote: randomQuote()
}];

Zapier provides a link to their code documentation for more information. Click Continue to text the action:

Test action tutorial for zapier screenshot

Zap #3: Create a new Image

Choose Bannerbear as the app to be connected to and select Create Imageas the action event:

bannerbear action screenshot for tutorial

Hit Continue. You need the Project API key retrieved earlier to allow Zapier to access your Bannerbear account.

Connect your Bannerbear account by pasting your Project API key:

bannerbear access tutorial for zapier

Input the Project API key and click Yes, Continue.

Select your NFT project from the dropdown menu. Zapier will load the template settings. Select the template ID and populate the fields:

  • Title text - (from the Run Javascript action)
  • Serial Number (from the Run Javascript action)
  • Image URL (from the Instagram trigger)

You can also add your Instagram caption as the NFT image description as we've done here:

Bannerbear tutorial screenshot triggers

Continue to test the action:

screenshot for bannerbear tutorial test action

After you set up and name your Zap, you're ready to turn it on. In the upper right, click to toggle the switch ON. Once your Zap is turned on, Zapier will run your action steps each time your trigger event occurs.

Bear tip 🐻 If your Instagram is mostly pictures of yourself where the background can be removed to set the subject in focus, take a cue from Irene Zhao and use the random colour function to randomize the background colors.

Each IreneDAO NFT features an image of the influencer pasted onto a minty green background and flanked by popular crypto slogans.

What's Next?

Instead of creating just one image, you can autogenerate multiple images at once using Bannerbear. Image Collections enable you to generate multiple images from one set of data.

Learn how to automatically get different sizes of images generated from a single set of variables.

This article was originally published on Bannerbear.com on April 26, 2022. Written by: Juliet Edjere


ABOUT ME

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!

Visit my website →

Powered By Swish