How to Add Rich Pinterest Pins to Adobe Muse Site

Examples of Pinterest Rich Pins

In this post, you will learn how to add rich Pinterest pins to your website pages created in Adobe Muse. Rich pins are engaging and useful. To enable rich pins you will need to add some code to the page(s) and to get approved. Do not worry, everything is easy and the process is very fast. You can copy sample code and with few simple modifications to paste that code.

Why and how to add rich pins to your pages

With rich pins, you can add more details to pins from your site. That will engage people and will make pins from your site more useful for Pinterest users. Here is an example of actual benefit with product pins where the name of my site, price, and name of the product appears in the top left corner.
Example of product rich pin
This is an example of top left corner of product rich pin posted on Pinterest

Types of rich pins
At the moment there are five different types of rich pins:

  1. Article Pins 
  2. Movie Pins 
  3. Place Pins 
  4. Product Pins 
  5. Recipe Pins 

You can read more and preview examples on Pinterest for Business > Tools. At the bottom of the page, you will see Getting started button which will open a page with the same title.

Basic instructions and code

On the Getting started page you can read instructions on how to setup rich pins. On the left side, you will see Rich Pins section with links below to open a page with a particular type of rich pins from where you can copy the code that you need.
Getting started page on Pinterest for developers

When you open a page with any type of pins like Product Pins there will be an example on the top and several sections with code. I will suggest you to scroll down to Open Graph and copy code. Open Graph code is smallest and simplest to modify.
Copy open graph code for rich pinterest pins


There is and code for schema.org format which is more detailed. We will keep it very simple and easy in this tutorial.

You will need to copy entire code except <head> and </head> lines. Change: content="everything inside" beside for the first and the last meta properties. Leave those lines as they are:
<meta property="og:type" content="product" />
<meta property="og:availability" content="instock" />


In case you are selling products in some other currency (it is set to US dollars) then you need to change content in this line:
<meta property="og:price:currency" content="USD" />

Sample code (copied and modified)

Below are samples with code which I have copied and sample code that I have pasted on my page created in Adobe Muse.

Here is sample code that I have copied:
 <meta property="og:type" content="product" />
    <meta property="og:title" content="Technology Will Save Us Gamer DIY Kit" />
    <meta property="og:description" content="One of the permanent installations in the collection of Humble Masterpieces at the Museum of Modern Art in New York, this DIY gamer kit from London-based company Technology Will Save Us is equal parts gadget and design classic. " />
    <meta property="og:url" content="http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=37075900"/>
    <meta property="og:site_name" content="Urban Outfitters" />
    <meta property="og:price:amount" content="98.00" />
    <meta property="og:price:currency" content="USD" />
    <meta property="og:availability" content="instock" />


Here is sample code after modifying it:
<meta property="og:type" content="product" />
    <meta property="og:title" content="Cool Photo Edges (PSD)" />
    <meta property="og:description" content="Package with 10 PSD templates and total of 200 very cool photo edges: Darkroom, Grunge, Digital, Vignette, Watercolor..." />
    <meta property="og:url" content="http://www.photoshopplus.com/cool-photo-edges-(psd).html" />
    <meta property="og:site_name" content="Photoshop Plus" />
    <meta property="og:price:amount" content="5.00" />
    <meta property="og:price:currency" content="USD" />
    <meta property="og:availability" content="instock" />


Where to paste code in Muse

After modifying the code paste it into each and every page where you want to add rich Pinterest pins. It does not have much sense to use the same title, description, price, and image/media for every page on your site.

With modified code copied to clipboard and web page in Design mode active in Adobe Muse go to Page > Page Properties.

Note: if your site is using alternate layouts and you have versions for Desktop, Tablet and Phone then you must repeat the process for each layout of your site. Here is tutorial: Migrate existing Adobe Muse websites to responsive layout which will help you. When working with responsive sites you will paste code only once as explained below.

Click on Metadata to activate that tab and paste code in HTML for <head>: section.
paste modified code in Adobe Muse
After modifying code you should paste it in Muse. Go to Page > Page Properties > Matadata > HTML for <head>. Repeat process (with different conten metadata) for each page where you want to add rich pinterest pins.


Publish changes
You should publish or to upload changes using FTP client to get things done. To publish site/changes from Adobe Muse go to File > Publish to Business Catalyst.


Validate rich pins

The last step is to validate rich pins and to get approved. Visit Rich Pins Validator page, scroll down and type page URL then click on Validate button.
Validate rich pins using pinterest validator


Similar tutorials:
How to Create Twitter Card for Adobe Muse Site

Product used in this tutorial:
Adobe Muse CC 2017

Comments

Popular posts from this blog

How to Change Artboard Size in Adobe Photoshop

Free Puzzle Pieces Actions For Photoshop and Elements

Old Weathered Vertical Wooden Planks Free Image