Pinterest pins on CMS blog post images

Am trying to add a button to my images on my CMS blog feed. Have not found anything bar from the integrations page which just links to code from Pinterest with no instruction.

Wondering if I should just transfer to WordPress so have less restriction?

Thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello @Erin1, thanks for your post.

The Pinterest buttons etc are custom integrations that you can add to your Webflow page, there are no restrictions beyond the installation instructions from Pinterest.

The Pinterest Pin or button etc can be added quickly and only takes a few steps. Follow the steps below to add Pinterest widgets to Webflow.

Resources:

Learn how to place code in the Head and Before Body tag in Project or Page settings.
Learn how to copy and paste code into a custom code element
Pinterest Widget Builder

  1. Go to Pinterest Widget Builder
  2. Choose kind of widget to create:
    1. Save Button
    2. Follow
    3. Pin
    4. Board
    5. Profile

Save Button

Copy and paste this code into a custom code element placed in the location on the page where you want the Pinterest Widget to appear.

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>

Follow

Copy and paste this code into a custom code element placed in the location on the page where you want the Pinterest Widget to appear.

<a data-pin-do="buttonFollow" href="https://www.pinterest.com/pinterest/">Pinterest</a>

Pin

Copy and paste this code into a custom code element placed in the location on the page where you want the Pinterest Widget to appear.

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

Note that if you wish to include a Pin for every cms post, create a field in the collection to store the Pinterest Pin number, then use the Add Field feature in a custom code embed element to insert a different Pin for each Item in your collection.

Learn how to use Collection Fields in custom code embeds.

Board

Copy and paste this code into a custom code element placed in the location on the page where you want the Pinterest Widget to appear.

<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/official-news/"></a>

Profile

Copy and paste this code into a custom code element placed in the location on the page where you want the Pinterest Widget to appear.

<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/"></a>

Add Pinit.js

Add Pinit.js once per page to the Before Body section of custom code:

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Republish Site

After any custom code is added, publish the site. Custom code is only rendered on the published site.

I hope this helps!

Hey Dave,

Thanks for your reply! I’ve edited my comment because I’ve figured out how to get the little ‘P’ to appear using the custom code above my image in the CMS blog editor. Was wondering if it’s possible to have the ‘Pin’ icon appear over an image in the CMS?

1 Like