Sharing Customization

Pinterest Save Button

Use the following code as a template for displaying a Pinterest Save button or Pin It button.

Default Pinterest Save button

<div class="a2a_kit a2a_default_style">
    <a class="a2a_button_pinterest_pin"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

Add the following HTML code, for example, to the "Service Buttons HTML code" box in Drupal Configuration > Web services > AddToAny > Buttons > Service Buttons.

<a class="a2a_button_pinterest_pin"></a>

In WordPress, the Pinterest Save button is available by clicking the "Add/Remove Services" button in Settings > AddToAny > Share Buttons.

Note: When the Do Not Track option is enabled in a browser, AddToAny prevents the Pinterest Save button from loading to prevent Pinterest tracking across sites.


Custom Pinterest Save button

Each Pinterest Save button is independently customizable by specifying any Save button attribute as a data attribute. For example, you can change the Pin Count (data-pin-config) to display above the button (data-pin-config="above"), beside the button (data-pin-config="beside"), or to not display at all (data-pin-config="none"). You can also change the Save button to a Pin It button using data-pin-save="false" (not recommended for non-English sites).

To display or hide the Save button's count, go to WordPress Settings > AddToAny > Share Buttons, click the down arrow alongside the activated Save button and toggle "Show count".

<div class="a2a_kit">
    <a class="a2a_button_pinterest_pin" data-pin-config="above"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
<a class="a2a_button_pinterest_pin" data-pin-config="above"></a>

This is Pinterest's Save button with the Pin Count displayed above the button.


<div class="a2a_kit">
    <a class="a2a_button_pinterest_pin" data-url="https://www.flickr.com/photos/kentbrew/6851755809/" data-media="https://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg" data-description="Kent Brewster's next stop: Pinterest!"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
<a class="a2a_button_pinterest_pin" data-url="https://www.flickr.com/photos/kentbrew/6851755809/" data-media="https://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg" data-description="Kent Brewster's next stop: Pinterest!"></a>

This is Pinterest's Save button configured for a single image, specifying a page URL (data-url), image URL (data-media), and description (data-description).

Note: The Pin Count's default relative positioning causes it to overlap elements to the right of the Save button, so AddToAny specifies a width on the container element (.a2a_button_pinterest_pin) to prevent the overlap. You can adjust the container's width using CSS code, for example: .a2a_button_pinterest_pin { width: 90px !important; }