How to Auto Generate Pinterest Pins Using Signed URLs

In this tutorial we will learn how to use Bannerbear to auto-generate Pinterest pins each time you publish new content on your website
by Jon Yongfook ·

Contents

    In this tutorial we will learn how to use Bannerbear to auto-generate Pinterest pins each time you publish new content on your website.

    This tutorial could be used to auto generate any kind of marketing asset for individual pages of your website. For example, auto generating Instagram Stories based on pages of your blog or product pages of your ecommerce store. In this scenario we will auto generate a Pinterest-size banner from blog content.

    Why create Pinterest pins anyway?

    Great question! You don't have to create Pinterest-specific banners for your content to be shareable on Pinterest. When a user decides to pin one of your pages, Pinterest gives them the option of choosing one of the images on your page to pin:

    However, a lot of marketers and content creators go the extra mile and create attractive, Pinterest-sized banners for their content to give themselves an edge and to drive more traffic to their websites. These banners often incorporate titles and other information to make them more informative to users who are scrolling past on their Pinterest feeds.

    Consider the difference between these two scenarios, for Ecommerce and Publishing:

    The added context of the righthand images makes them much more effective at informing the user what the pin is about, which will drive higher quality traffic.

    Therefore, creating eye-catching, clickable Pinterest pins for your content is a great, low-maintenance way of building your brand while you sleep. Add them to your page once, and reap the benefits thereafter.

    There's just one problem…

    The only problem with this is… now every time you create a new blog post or upload a new product to your website… you have to create a companion pinterest banner.

    For big companies this isn't a problem - they will have a design team dedicated to making these sorts of marketing assets. But for smaller companies this can be a big overhead in terms of effort.

    Automating the process

    Signed URLs are a way to use Bannerbear to generate images on demand using only URL parameters. For example by constructing one Bannerbear URL with the query string:

    ?text=Hello

    And another Bannerbear URL with the query string:

    ?text=World

    Bannerbear would generate two different images - one with the text "Hello" and the other with the text "World".

    This is a slight simplification since in practice the URLs are more secure than this, but the principle is the same.

    Signed URLs do not use the API key in the URL params as by nature these params will be publicly visible. Instead, the Signed URL uses an encrypted signature so that the API key is never publicly exposed.

    If you scroll to the bottom of this page you'll see a Pinterest banner that looks like this:

    The above image has been rendered by Bannerbear on-demand, using encoded URL parameters. If you take a look at the URL of the image itself, it looks like this:

    https://ondemand.bannerbear.com/signedurl/vYR1M6LyqpWVAnXbgZ/image.jpg?modifications=W3sibmFtZSI6InBob3RvIiwiaW1hZ2VfdXJsIjoiaHR0cHM6Ly93d3cuYmFubmVyYmVhci5jb20vaW1hZ2VzL2Jsb2cvcGhvdG8tMTUxNzQ4Nzg4MTU5NC0yNzg3ZmVmNWViZjcuanBlZyJ9LHsibmFtZSI6InRpdGxlIiwidGV4dCI6IkhvdyB0byBBdXRvIEdlbmVyYXRlIFBpbnRlcmVzdCBQaW5zIFVzaW5nIFNpZ25lZCBVUkxzIn0seyJuYW1lIjoicmVhZGluZyIsInRleHQiOiI2IG1pbnV0ZSByZWFkIn0seyJuYW1lIjoiYXZhdGFyIiwiaW1hZ2VfdXJsIjoiaHR0cHM6Ly93d3cuYmFubmVyYmVhci5jb20vaW1hZ2VzL2F1dGhvcl95b25nZm9vay5qcGcifSx7Im5hbWUiOiJuYW1lIiwidGV4dCI6IkpvbiBZb25nZm9vayJ9LHsibmFtZSI6ImRhdGUiLCJ0ZXh0IjoiSnVseSAyMDIwIn1d&s=b0af53bceb932d2388964416dde36ac53006b523e3c25b76087dea6149d6e640

    This URL contains information telling Bannerbear what text to use in the title of the image, the avatar of the image, the main photo of the image and so on.

    The URL is also signed using an encrypted signature that prevents anyone from tampering with your URLs to generate their own images.

    By using the data in your Content Management System or Ecommerce product database, you can automatically construct and embed these smart, signed URLs like this on your website, replacing the parameters with product names, article names, prices etc - in order to auto generate marketing assets with unlimited variety.

    Integrating with your CMS

    In practice the integration will be slightly different depending on what platform you are using and what data you want to include in your images.

    Update: Bannerbear now has official SDKs for Ruby, NodeJS and PHP to perform URL signing so we will use that in the example below

    As an example, here is a very basic script I'm using to output the signed URLs that result in the Pinterest banners below.

    def pinterest_banner_url(page)
      bb = Bannerbear::Client.new(ENV['KEY'])
    
      url = bb.generate_signed_url("A89wavQyY3Bebk3djP", 
        :modifications => [
          {
            :name => "image", 
            :image_url => "https://www.bannerbear.com#{page.data.image}"
          },
          {
            :name => "reading_time", 
            :text => page.body.reading_time(:format => :approx)
          },
          {
            :name => "avatar", 
            :image_url => page.data.author.avatar
          },
          {
            :name => "date", 
            :text => page.date.strftime('%B %Y')
          },
          {
            :name => "title", 
            :text => page.title
          },
          {
            :name => "author", 
            :text => page.data.author.name
          }
        ]
      )
      return url
    end

    This URL is now ready to be exposed publicly and will generate an image on-demand when accessed.

    Signed URLs are an extremely powerful way to use Bannerbear, offering simple on-demand image generation in a way that is safe and secure to be used in publicly-facing front end code.

    Note: the Pinterest pin you see below was generated using the workflow from above!

    About the authorJon 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.

    Bannerbear Beginner Guide: How to Start Generating Images Dynamically in JavaScript with Bannerbear

    If you want to integrate dynamic image generation into your JavaScript project, this article is for you! Learn how to do it effortlessly with Bannerbear—we’ll walk you through the entire process, from setup and implementation to achieving the final result.

    How to Automatically Create Eye-Catching Images for Your App's Link Sharing Using Bannerbear (Node.js)

    Want to make your app’s link sharing stand out? Learn how to use Bannerbear to automatically create eye-catching images that boost click-through rates! This tutorial walks you through building a backend service with Node.js to automatically generate custom images based on dynamic data.

    How to Auto-Generate Social Media Posts For a Business Conference Using Bannerbear (Node.js): Part 2

    In Part 2 of our series on auto-generating social media posts for a business conference using Bannerbear, we'll be creating posts for panel sessions. The image for each post will feature key details like the session topic, moderator, and panelists.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Auto Generate Pinterest Pins Using Signed URLs
    How to Auto Generate Pinterest Pins Using Signed URLs