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