How to Auto Generate Pinterest Pins Using Signed URLs

July 2020

automationpinteresttutorial

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://cdn.bannerbear.com/signedurl/29oZzmYy7Qe7jxDORa/image.jpg?m[][name]=cGhvdG8&m[][image_url]=aHR0cHM6Ly93d3cuYmFubmVyYmVhci5jb20vaW1hZ2VzL2Jsb2cvcGhvdG8tMTUxNzQ4Nzg4MTU5NC0yNzg3ZmVmNWViZjcuanBlZw&m[][name]=dGl0bGU&m[][text]=SG93IHRvIEF1dG8gR2VuZXJhdGUgUGludGVyZXN0IFBpbnMgVXNpbmcgU2lnbmVkIFVSTHM&m[][name]=cmVhZGluZw&m[][text]=NCBtaW51dGUgcmVhZA&m[][name]=YXZhdGFy&m[][image_url]=aHR0cHM6Ly93d3cuYmFubmVyYmVhci5jb20vaW1hZ2VzL2F1dGhvcl95b25nZm9vay5qcGc&m[][name]=bmFtZQ&m[][text]=Sm9uIFlvbmdmb29r&m[][name]=ZGF0ZQ&m[][text]=SnVseSAyMDIw&base64=true&s=d3626963315d7929b0c0503067190326

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.

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)
  #api_key: your project API key - keep this safe and non-public
  api_key = ENV['KEY']

  #base: this signed url base
  base = "https://cdn.bannerbear.com/signedurl/29oZzmYy7Qe7jxDORa/image.jpg"

  #variables / parameter values I want to send to Bannerbear
  image = "https://www.bannerbear.com#{page.data.image}"
  reading_time = page.body.reading_time(:format => :approx)
  avatar = page.data.author.avatar
  date = page.date.strftime('%B %Y')
  title = page.title
  author = page.data.author.name

  #query: the query string of modifications including the above values
  query = "?m[][name]=photo&m[][image_url]=#{image}&m[][name]=title&m[][text]=#{title}&m[][name]=reading&m[][text]=#{reading_time}&m[][name]=avatar&m[][image_url]=#{avatar}&m[][name]=name&m[][text]=#{author}&m[][name]=date&m[][text]=#{date}"

  #calculate the signature
  signature = OpenSSL::HMAC.hexdigest("SHA256", api_key, base + query)

  #append the signature
  return base + query + "&s=" + signature
end

This script is performing the following action:

  • Listing out the variables I intend to use
  • Constructing a query string of the variables
  • Calculating a signature using the secret API key
  • Appending the signature to the URL
  • Returning the signed URL

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.

Signed URL Documentation

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

Author
Jon 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 and design efficiency. Jon is a digital nomad and can be found riding a motorcycle around Asia, lives out of Airbnbs and works from coworking spaces.

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!