Drupal 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.


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; }