Blog, Pinterest, WordPress, WordPress Shortcode

Add a Pinterest Save Button over Every Image in WordPress

Pinterest is a free website that allows users to upload, save, sort, and manage images - known as pins - and other media content (such as videos and images) through collections known as pinboards. Users can save individual pins to one of their own boards using the "Pin It" button on a website, with Pinboards typically organised by a central topic or theme. Users can personalize their experience with Pinterest by pinning items, creating boards, and interacting with other members. By doing so, the users "pin feed" displays unique, personalized results that give followers a visual insight into an individuals creative thought discovery or, for the case of advertisers, user consumer habits.

Pinterest is a social network that I haven't gelled with personally... but after a quick experiment with one of our smaller websites, there's little doubt that the service converts at a higher rate per user than the transient networks like Facebook and Twitter. Sadly, Pinterest is another traffic-generating network that cannot be ignored.

This article will show you how to add a ~~PinIt~~ Save Button over every image on your post or page. A subsequent article deals with how to add the Pinterest Save Button at the top and/or every post and/or page. Another scheduled article will show show you how to include a Follow, Pin, Board and Profile Widget in WordPress with shortcode.

Taking Control of Your Images

How important are images to your website's SEO? Short answer: very. If this is the case, why do we almost hurriedly import images into WP's library with what is often a disregard for important parameters such as title, description, alt tags, or even a relevant and descriptive filename? Adding image tags is often considered a tedious task with what is a perceived lack of importance or relevance to search engines - the truth of course is the opposite. Bottom line: add tags to every image you import into your WP library.

The Result

If you hover over the image below, and assuming we haven't removed the feature from our own site, a Pinterest Save button should present itself.

Add a Pinterest Save Button over Every Image in WordPress

Pinterest Screenshot, 30th November 2015

For those of our clients using our plugin (discussed below in brief), the shortcode of [image caption="Pinterest Screenshot, 30th November 2015" pin="0"]3678[/image] (note the pin="0") prevents a Pinterest Save Button from showing on that particular image. To achieve the same result without our plugin, add data-pin-nopin="true" to your image HTML. Our image shortcode supports numerous other image-level options.

BeliefMedia Plugin

Our BeliefMedia plugin provides for a means to display every image by way of shortcode (it's a seriously powerful solution that is discussed in more detail in our client area). The strength of our approach is evidenced by the way you can alter the Pinterest parameters on an image-by-image basis. For example, we add the canonical image URL to ensure you don't lose Google Image and other traffic when the image in question isn't rendered on your actual website... and you can choose to exclude specific images from being pinned.

Indiscriminately making every image pinnable on your page as our code provides is not the most efficient means of controlling the sharing that takes place. While this is the approach taken by virtually all that use the Pinterest feature, it's far from best-practice. As stated, an upcoming article deals with a more efficient means of rendering post images and controlling image attributes.

WordPress Function

The following code will add the necessary Pinterest JavaScript to your page that will automatically overlay the Pinterest Pin button on your images. They're essentially set-and-forget options that will only need to use once. However, you can come back and update them again in the future. Our shortcode is rather basic and doesn't include all available options .

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Add a Pinterest Save Button over Every Image in WordPress

http://www.beliefmedia.com/pinterest-pins-wordpress

function beliefmedia_pinterest_js_footer($post) {

$atts = array(

'data-pin-save' => 0,

'data-pin-do' => 'buttonBookmark', /* buttonPin */

'data-pin-hover' => 1,

'data-pin-round' => 0,

'data-pin-tall' => 0,

'data-pin-url' => get_post_permalink($post->ID),

'data-pin-color' => 0 /* white or red defaults to grey */

);

$colorarray = array('red','white');

$return = '<script type="text/javascript" async defer';

if ($atts['data-pin-save']) $return .= ' data-pin-save="false"';

$return .= ' data-pin-do="' . $atts['data-pin-do'] . '"';

if ($atts['data-pin-hover']) $return .= ' data-pin-hover="true"';

if ($atts['data-pin-round']) $return .= ' data-pin-round="true"';

if ($atts['data-pin-tall']) $return .= ' data-pin-tall="true"';

if ( ($atts['data-pin-color']) && (in_array($color, $colorarray)) ) $return .= ' data-pin-color="' . $atts['data-pin-color'] . '"';

$return .= ' src="//assets.pinterest.com/js/pinit.js"></script>';

echo $return;

}

add_action('wp_footer', 'beliefmedia_pinterest_js_footer');

Function Attributes

You should hard-code your options into the $atts array before copying it to your custom functions file.

data-pin-save

If set to data-pin-save="1", Pinterest will return an old-style "Pin It" button (rather than the "Save" button).

data-pin-hover

Shows the Save button only when a user hovers over images (default). This applies to all images on the page. To show over all images all the time, use data-pin-hover="0".

data-pin-round

Changes the Save button to the round and red style. By default it is false. To enable, use data-pin-round="true".

data-pin-tall

Changes the height of the Save button. Rectangular buttons are twice as wide as they are tall. Rectangular buttons: true (28px for rectangular, 32px for round) or [not set] (20px for rectangular, 16px for round). The code defaults to a rectangle image overlay.

data-pin-color

No longer documented and not guaranteed to work, you can optionally try data-pin-color="white" or data-pin-color="red". It's best to leave it.

data-pin-url

The data-pin-url attribute to associate an image to a particular URL. This will guarantee that the Pin is linked to the source URL that you want. This is particularly useful for pages with multiple images that link to various places on your website. By default we'll use your page permalink. It's best to leave this option.

Considerations

Images need to be at least 100px by 200px to be saved to Pinterest by the Save button, and 200px by 200px to be saved using the hover button.
As stated, our image shortcode (that we hope to share soon) supports additional Pinterest attributes, most notably data-pin-media which permits you to curate (or automatically populate) a custom description, URL, and higher quality pinnable image.
Find the Pinterest documentation here .

Download

Title: Add a Pinterest Save Button over Every Image in WordPress
Description: Show a Pinterest Follow, Pin, Board, or Profile Widget in WordPress With Shortcode.
Download • Version 0.1, 1.1K, zip, Category: WordPress Shortcodes

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.