Custom save button cannot pin image with description & url

[ShellyHsueh]

Url & description seems not being pinned by the ways documented in "Custom button conversion" of Save button

We tried both HTML & JavaScript ways, and they open the same pin-builder page:

1. Only image shown, no url & description
2. On the left of the image, there is a white circle which might be a delete icon

This is our JavaScript code:

<script>
  function pinOneByJavascript() {
    PinUtils.pinOne({
      url: 'https://www.flickr.com/photos/192240687@N07/50970872158/in/dateposted-public/',
      media: 'https://live.staticflickr.com/65535/50970872158_5682db17cb_w.jpg',
      description: 'OG-Description: This page is for testing'
    });
  }
</script>
<button onclick="pinOneByJavascript()">Pin By Javascript</button>

HTML:

<script>
  function pinterestErrorLog(error) {
    console.error('[pinterestErrorLog]')
    console.error(error)
  }
</script>
<a href="https://www.pinterest.com/pin/create/button/"
   data-pin-do="buttonPin"
   data-pin-custom="true"
   data-pin-description="OG-Description: This page is for testing"
   data-pin-media="https://live.staticflickr.com/65535/50970872158_5682db17cb_w.jpg"
   data-pin-url="https://www.flickr.com/photos/192240687@N07/50970872158/in/dateposted-public/"
   data-pin-error="pinterestErrorLog"
>
  <button>Pin By HTML</button>
</a>

The way we used to pin image doesn't work either (same pin-builder page as mentioned):

const url = 'https://www.flickr.com/photos/192240687@N07/50970872158/in/dateposted-public/'
const media = 'https://live.staticflickr.com/65535/50970872158_5682db17cb_w.jpg'
const description = 'OG-Description: This page is for testing'

const href = `https://pinterest.com/pin/create/link/?url=${encodeURIComponent(url)}&media=${encodeURIComponent(media)}&description=${encodeURIComponent(description)}`
window.open(href, '_blank');

codepen for above code

Any help would be much appreciated!

[timocouckuyt]

+1

Also, using PinUtils.pinOne, 'description' is never used and only scraped from the passed 'url'. Really annoying. Description should have been set instead of the meta data from the url.

[studiorubenz]

+1

I use the API's interface as described here: https://developers.pinterest.com/docs/add-ons/save-button/

PinUtils.pinOne({
'url': 'https://www.flickr.com/photos/kentbrew/6851/',
'media': 'https://farm8.staticflickr.com/7027/68517.jpg',
'description': 'Next stop: Pinterest!'
});

but as @timocouckuyt pointed out, the description field gets ignored and instead the description is pulled from the og:description meta tag.

Also, how am I supposed to add a custom title when I use the pinOne-function?

I find it frustrating to read/follow the official documentation only to find out after hours of debugging that it just doesn't work as described.

[thangphung1310]

+1 Having same issues here: the description parameter is completely ignored and interest used the description in the page's metadata instead

[klaraseitz]

Has anyone figured out which meta tags are used by pinterest to fill the title and description? I already tried the following with no luck. But maybe the hardcoding is also an issue here.

    <meta name="title" content="This is a meta title">
    <meta name="application-name" content="This is a meta application name">
    <meta property="og:title" content="This is a meta og-title">
    <meta property="og:description" content="This is a meta og-description">
    <meta property="og:type" content="article">

Update:
So it seems I have been able to get the og:title property into the pins title. One issue was that I had saved the same pin with the same url over and over. While I saw the og:title content in the preview it always changed back to the previous value. Upon deleting all pins my newly saved pin kept the og:title value. I have also used the Pinterest Rich Pins Validator. I am not sure if it was necessary so that Pinterest would actually look at the meta tags.

[kentbrew]

Hi, have you tried pin:media and pin:description in your META tags? (Pinterest does not listen for a title meta.)

Here's something that might help:

https://gist.github.com/kentbrew/2f5be2bdc8383f7489d923af0cc3ce9f