10 min read

Turn Your Instagram into NFTs with Bannerbear and Zapier

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

by Juliet Edjere · April 2022
Turn Your Instagram into NFTs with Bannerbear and Zapier
Turn Your Instagram into NFTs with Bannerbear and Zapier

Contents

    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 millionfrom 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 uniques 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 a 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 random number:

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

    To generate random hex color 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 Image as 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 image generated from a single set of variables.

    Juliet Edjere@juliethiri
    Juliet is a no-code expert and product strategist. Her expertise spans across products, technology and people, particularly solving user problems with no-code tools.

    Follow the Journey

    Hello I'm Jon, the founder of Bannerbear — every 2 weeks I send a newsletter with updates from the Product, Marketing and Business sides of my startup, subscribe below to receive it!