12 min read

How to Create an Auto-Updating Instagram Grid Mockup for Your Newsletter or Website

Instagram's iconic grid layout creates an immediate association and showcases your brand's visual identity. Here's how to use nocode to create auto-updating grid mockups that you can add to newsletters, websites, and more.

by Julianne Youngberg · August 2022
How to Create an Auto-Updating Instagram Grid Mockup for Your Newsletter or Website
How to Create an Auto-Updating Instagram Grid Mockup for Your Newsletter or Website

Contents

    With over a billion monthly active users, Instagram has become one of the top 4 social media sites in just 12 years of operation. Today, it is widely recognized as the leader in photo-centric social media.

    Personal and professional brands use Instagram as a way to drive leads and awareness. One great way to leverage its power is with the iconic grid layout. Designing a mockup of your profile grid and putting it on your website, newsletter, and other channels creates an immediate association with the photo-sharing platform while showcasing your brand's visual identity.

    But styles evolve, new products get released, and temporary offers end. How can you make sure these mockups stay true to your brand?

    Nocode tools can help you create auto-updating grid mockups and route them wherever you need them most.

    What You Will Create

    An Instagram grid mockup can add flavor to your website, newsletter, or marketing material. To create an auto-updating image, you will need to set up an automation that collects new media, adds it to a template, generates a new photo, and repeats the process as often as necessary.

    Here are the tools you’ll need:

    • Instagram : To publish media
    • Google Sheets : To store and sort recent media URLs from Instagram
    • Bannerbear : To design and generate your Instagram grid mockups
    • Zapier : To trigger actions in other programs based on pre-specified commands

    By the end of the tutorial, you should be able to produce a customized grid that looks something like this:

    Sample of generated Instagram grid mockup design

    As your brand evolves, your material will evolve along with it!

    Customize Your Bannerbear Template

    The first step to creating a custom grid mockup is creating a template that new Instagram media will automatically populate. Log into your Bannerbear account and click “Create another Project.” Give it a name, then create a blank template that you can edit.

    You can also save time by using our Instagram Grid template:

    Bannerbear Instagram Grid template

    Make any necessary changes, such as adding your own username.

    When you’re happy with your design, click “Save Template”.

    Bear Tip 🐻: Combine the Instagram Grid template with another template (such as the Pitch Deck Market template or E-commerce Website Banner template to create updatable brand assets.

    Prepare Your Google Sheets File

    A simple two-sheet Google Sheets file will receive the URLs of new media as they are uploaded to Instagram, then sort for the latest 15.

    Step 1. Create a Worksheet to Store All Media

    Create a Sheets file by logging into your Google account and clicking the “+” button under “Start a new spreadsheet”.

    Screenshot of Sheets start a new spreadsheet with red arrow pointing to blank template

    Name your first table “All Media” and populate cells A1 and B1 with two primary headers: Image URL and Timestamp. Make any visual modifications you would like.

    Screenshot of Google Sheets All Media worksheet with records populated

    For best results, put dummy data in cells A2 and B2. This will help Zapier populate the right fields with your media URLs later on. You can remove the test data after ensuring your automation works correctly.

    Step 2. Create a Worksheet to Sort Recent Media

    Duplicate your first sheet and name the second “Recent Media”. They should be identical, except for any visual modifications you might need to differentiate between them.

    We will apply a SORTN formula to filter only the 15 most recent media URLs.

    Screenshot of Sheets Recent Media worksheet and red box around SORTN formula

    In cell A2, insert the following in the formula field: =SORTN('All Media'!A2:B,15,0,'All Media'!B2:B,FALSE)

    This is according to the syntax: SORTN(range, [n], [display_ties_mode], [sort_column1], [is_ascending1],…). You will have to make modifications to the formula if your Sheet is laid out differently or your template contains less or more than 15 images.

    As you post to your Instagram profile, you should see the Recent Media sheet populating itself with 15 of the newest media URLs and timestamps.

    Connect Your Instagram, Google Sheets, and Bannerbear Accounts to Zapier

    You will need to add your Instagram, Google Sheets, and Bannerbear accounts as connections in Zapier to use them in zaps. Log into your Zapier account, click the “My Apps” button on the left sidebar, then “+ Add connection” for each new integration.

    Here is what you’ll need from each app:

    • Instagram : Zapier will request your username and ask you to login to authenticate your Instagram account.
    • Google Sheets : Zapier will request your email and ask you to login to authenticate your Google account.
    • Bannerbear : Zapier will request authentication with a Project API key, which is generated for every new project. You can find it by clicking the “Settings / API Key” button on the associated project page in the Bannerbear app.

    Once all accounts have been added, you should be able to smoothly set up your zaps.

    Set up Zap to Send New Instagram Media to Google Sheets

    For this tutorial, you have the option to combine all of the events into a single zap or separate them into two: one for sending new media to Sheets and another for generating and distributing the completed image.

    One zap is appropriate if you would like your grid mockups to be updated every time you publish new Instagram media. However, using Zapier’s Schedule feature and separating the image generation step allows for a greater margin of error while still keeping your media up-to-date.

    In this example, we will be setting the automation up to generate images at a weekly frequency. Let’s start by setting up the zap that sends new media to Sheets.

    Trigger: New Media Posted in My Account in Instagram

    Choose Instagram as the app and “New Media Posted in My Account” as the event. Make sure the correct account is connected.

    Screenshot of Zapier Instagram new media posted in my account trigger

    Test your action to ensure Zapier is able to find a post.

    Action: Create Spreadsheet Row in Google Sheets

    Choose Google Sheets as the app and “Create Spreadsheet Row” as the event. Select the right account, drive, spreadsheet, and worksheet. Then, set up your action by mapping the media URL and timestamp to the corresponding Sheets fields.

    Screenshot of Zapier Google Sheets create spreadsheet row action setup

    Test your action. You should see an image URL and timestamp show up in the All Media worksheet of your Google Sheets file.

    Note : The timestamp pulled from Instagram is in a computer-readable format, but it is not very reader-friendly. You can improve the look of your Sheet by highlighting the Timestamp column, then clicking Format > Number > Date time.

    Screenshot of Sheets number formatting action with red box on date time button

    That said, it is not necessary to format the timestamp differently for this tutorial. You will still get the same end result.

    Set up Zap to Generate Grid Mockups

    The second zap will trigger on a schedule, generating new mockups and distributing them wherever you choose to use them.

    Trigger: Every Week in Schedule by Zapier

    Choose Schedule by Zapier as the app and “Every Week” as the event. Set up the event by specifying the day and time you want the automation to run. Test the trigger to ensure Zapier is able to find a week.

    Screenshot of Zapier Schedule every week trigger with day and time setup

    You can adapt this event to any frequency and time that suits you best.

    Action: Get Many Spreadsheet Rows (Advanced, With Line Item Support)

    Choose Google Sheets as the app and “Get Many Spreadsheet Rows (Advanced, With Line Item Support) as the event. Make sure the correct account, drive, spreadsheet, and worksheet is selected.

    Set up your action by inserting “A:A” in the Columns field, “15” in the Row Count field, and “2” in the First Row field.

    Screenshot of Zapier Google Sheets get many spreadsheet rows action setup Screenshot of Zapier Google Sheets get many rows action setup (cont.)

    Click “Continue”, then test your action. Zapier should produce 15 rows of working image URLs, which we now have to separate into individual values.

    Action: Text in Formatter by Zapier

    Choose Formatter by Zapier as the app and “Text” as the event. Select “Split Text” as the transform type. The input will be the Rows extracted from the previous action, and the separator will be a comma (,). Specify the Segment Index to be All (as Separate Fields).

    Screenshot of Zapier Formatter split text action setup

    Testing the action should yield 15 separate items, each containing the image URL needed.

    Don’t worry if each item includes the other URLs as residue data. Zapier should still pull the primary URL of each row and use it correctly in the next step.

    Action: Create Image in Bannerbear

    Choose Bannerbear as the app and “Create Image” as the event. Select the correct project, then set up the action by mapping each image URL to its corresponding container.

    Screenshot of Zapier Bannerbear create image action setup

    Take care not to enter the same field twice as this will result in a duplicated image.

    In the Transparent field, select “True” to render the image as a transparent PNG. Skip this step if your template includes a custom background.

    Screenshot of Zapier Bannerbear create image action setup with red box around transparent option

    Test the action, and check your Logs to make sure your grid mockup looks something like this:

    Screenshot of generated Instagram grid mockup sample

    And that’s it! Finish off your zap by adding a distribution or storage action, then hit “Publish” to make it live.

    Bear Tip 🐻: Store the URLs of the generated mockups in Sheets if you would like to have easy access to it. Simply create another worksheet and add an additional action to your zap that creates a new row with every new image URL from Bannerbear.

    Ways to Use Your Grid Mockups

    There are no limitations to what you can do with auto-updating Instagram grid mockups. Here are a few ideas:

    📌 Add them to your newsletter. Give readers a glimpse of what you’ve been up to by including a look at your current Instagram grid.

    📌 Showcase recent posts on a section of your website. Since the grid updates as new media is published on your feed, it evolves along with your brand.

    📌 Keep your pitch deck updated. You’ll always have a freshly generated grid mockup on hand when convincing potential investors or customers you’re worth their time.

    📌 Update your Twitter banner. Putting your current grid on a beautifully designed banner creates continuity and piques interest, possibly earning you some new followers.

    📌 Store them for later use. Adding an additional action to upload the generated assets to Drive or store their URLs on Sheets allows you to have them on-hand for when you need them.

    You can use nocode tools to reduce the load and possibly even remove it entirely.

    Showcase Your Brand’s Visual Identity

    Instagram is a powerful platform for brands of all shapes and sizes. Having a mockup of your current grid on-hand is a great way to create an association with the platform and funnel viewers to your profile.

    A simple zap (or, in this case, two) is enough to remove the manual work of taking a screenshot and routing the image to its destination. With automatically updating assets, you always have a way to showcase your brand’s visual identity.

    Julianne Youngberg@paradoxicaljul
    Julianne is a technical content specialist fascinated with digital tools and how they can optimize our lives. She enjoys bridging product-user gaps using the power of words.

    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!