Support for pinterest embed code conversion to amp-pinterest tag

[sidkshatriya]

Add support for pinterest embed code conversion to <amp-pinterest>

See
https://www.ampproject.org/docs/reference/extended/amp-pinterest.html
Also see
https://developers.pinterest.com/tools/widget-builder/

[sidkshatriya]

This is basically working.

Not closing the ticket right now -- there is display related issue for large pins. I don't think that this due to anything wrong with our code. Rather enough space may not be available. However, just keeping ticket open for now.

Please note that we're only implementing pins for pinterest. We're not implementing pinterest buttons (analogous to facebook like buttons).

[sidkshatriya]

I worked on this ticket today. Sadly I found another display issue with pinterest pins for which there is no known solution at the moment. The problem is that AMP layouts like responsive want both a height and a width. Depending on the text on the pinterest pin, some pins may be larger and some smaller. So if you set a fixed height value some pins may get chopped off at the bottom when being displayed.

Now the embed code looks like this:

<a data-pin-do="embedPin" data-pin-width="medium" 
href="https://www.pinterest.com/pin/99360735500167749/"></a>

So we can take a standard pin width (depending on data-pin-width) but what height should we take? A "typical" or "safe" height may work but obviously does not work for all scenarios.

With instagram this problem was resolved by querying the instagram (non-authenticated) oembed endpoint to get the height and width. pinterest has endpoints but you need to setup an Oauth2 application (etc. etc.)... maybe there is very simple fix lurking around. i'll keep working on this and trying to figure this out...

[sidkshatriya]

(Note that pinterest functionality is available since last few releases and on master but it has the above described problems)

[sidkshatriya]

There is a workaround available. If your pins are getting chopped off, then please provide the height and width explicitly in the embed code. These will get carried over into the <amp-pinterest> tag.

So don't simply paste something like:

<a data-pin-do="embedPin" href="https://in.pinterest.com/pin/553450241686727721/"></a>

But add the width and height attributes like so:

<a width="236" height="778" data-pin-do="embedPin" 
href="https://in.pinterest.com/pin/553450241686727721/"></a>

These width and height values are available from the pinterest widget builder e.g.
https://developers.pinterest.com/tools/widget-builder/?type=pin&url=https%3A%2F%2Fin.pinterest.com%2Fpin%2F553450241686727721%2F&size=small

[sidkshatriya]

The workaround should suffice. Closing ticket. Please re-open if necessary.