Add a Pinterest Button over Every Image (and the Top of Every Page) 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, it’s another traffic-generating network that can’t be ignored.

This article will show you how to add a PinIt button over every image on your WordPress website. Additionally, we’ll provide some quick code that’ll add a Pin button to the top of every post. Because of the nature of the service Pinterest offers we’ve drafted about half a dozen additional posts that deal with various aspects of the platform.

Taking Control of Your Images

We manage image use by rendering them all with a shortcode that ensures that we can customise them as we wish – when we wish. The strength of our approach is evidenced by the way in which Pinterest provides options to handle individual images on a page; we added the relevant Pinterest URL parameters to every single image on our website by altering just one shortcode function (and we’ll provide this method of image control in an upcoming article). The code on this page will indiscriminately add the Pin button to every image unless you hard-code in a URL attribute to exclude it.

How important are images to your website’s SEO? Short answer: very. Then, why do we almost hurriedly add them via WP’s post image editor with what is often a disregard for important parameters such as title, description, alt tags, or even a relevant and descriptive filename? We quickly surveyed 100 personal WordPress websites and found that barely 12% of them applied relevant considerations to the image that was uploaded. It’s a demanding task for many because the image HTML is hard-coded and often difficult to control. There’s also a general perceived lack of importance of image tags despite their relevance to image based search engines .

Not unlike our approach to manufacturing links, an example of our image usage (that displays the screenshot below) is as follows: [img link="0" caption="Pinterest Screenshot, 30th November 2015"]3678[/img]. In this case the Pinterest tags were automatically added to our resulting HTML, but we could have excluded it from being indexed with the tag of pin="0". It’s just easier.

Pinterest Screenshot, 30th November 2015

Indiscriminately making every image pinnable on your page as our code provides – this includes logos, advertisements, sidebar images etc. – is not an efficient means of controlling the sharing that takes place. While this is the approach taken by virtually everybody that uses the service on their website, it’s far from best-practice.

Our resulting image was scaled and relevant tags were applied automatically. You’ll notice the URL is slightly different to the norm: http://www.internoetics.com/r/2015/11/570/pinterest-screenshot-30-nov-15.jpg, hinting at the fact it was remanufactured with shortcode wizardry. The reason behind our means of displaying images becomes more clear when you look at the large number of URL parameters that can be applied to an image to handle how it’s managed by Pinterest’s JavaScript.

If you’re comfortable using shortcode for every image, we’ve got the code scheduled a short time from now. There’s an argument that can be made that no HTML element should exist in your post container… but that’s beyond the scope of this quick post.

The Code

The following code will add the necessary Pinterest JavaScript to your page that will automatically overlay the Pinterest Pin button on your image. 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.

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

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

To add a “Pin It” button to the top and/or bottom or every post and/or page, use the following function in addition to the above.

Shortcode Attributes

The shortcode attributes for internoetics_pinterest_pinit_button (the function to add the Pin It button either above or below your post container) are as follows:

width

The width is the width of the div that contains the Pin It button.

posttype

Where to include the Pin It button: posts only, 2 – pages only, and 3 – posts and pages.

topbottom

The location of the Pin It button: 1 – top only, 2 – bottom only, 3 – top and bottom.

round

Use the round button rather than the square Pin It button.

large

Use the large button rather than the small default version.

color

The color of the button defaults to grey. You may optionally use white or red (color="red").

eng

Use eng=”0″ to use Japanese text in the button (defaults to English).

float

Flot the div container right or left

style

Additional style applied to the div container.

internoetics_pinterest_js_footer

Attributes for internoetics_pinterest_js_footer (JavaScript footer function) are as follows:

hover

This option is important. If hover is set to true (1), then all images will have the Pin It overlap button over them. If false, you will have to specifically define the images you would like shared (this is the focus of our next function)

round

Use the round button rather than the square Pin It button.

large

Use the large button rather than the small default version.

color

The color of the button defaults to grey. You may optionally use white or red.

Considerations

If you’re using the option to add the Pin It button above/below your content, the JavaScript options will generally take precedence over anything you specifically define… so you can remove them entirely if you wish. The round, large, and color options exist with the JavaScript wp_footer function so those that want to format the button that overlays images (without displaying anything above or below post content) will have some control over how it’s displayed.

As previously discussed, the hover parameter forces all images to display the Pin It image overlay – a behaviour we wanted to avoid. You can omit images from being pinnable by using data-pin-nopin="true" in the image link (next to the anchor text). Rather than having to opt out of having images pinned, our scheduled shortcode function is based on opting in. Given the relatively low usage of the service it’s simply unacceptable to indiscriminately stamp their branding over everything.

Shortt URL for this post:

Leave a Reply

Your email address will not be published. Required fields are marked *