Sharing Customization

Pinterest Save Button

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

Default Pin It 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 Pin It button is available by clicking the "Add/Remove Services" button in Settings > AddToAny > Share Buttons.


Custom Pin It button

Each Pin It button is independently customizable by specifying any Pin It 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 Pin It button to a Save button (data-pin-save="true") so the button's function is more obvious internationally.

To display or hide the Pin It button's count, go to WordPress Settings > AddToAny > Share Buttons, click the down arrow alongside the activated Pin It 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 Pin It 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 Pin It 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 Pin It 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; }