Pinterest ‘Pin it’ Button

 
This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Site Settings" > "Social Media"

ProPhoto offers options that allows visitors to effortlessly pin individual images to their Pinterest boards using a simple button that overlays your posted images.  You can turn that on/off here, as well as prevent the pinning of images overall.

Screen Shot 2014-01-06 at 10.07.14 PM

Set the “prevent pinning” option and Pinterest will be unable to load images on your site when visitors try to Pin images on your site. This will disable all Pinterest features ProPhoto provides.

To enable or disable pinning for a specific post/page, or to prevent pinning on individual photos, see here.

Pinterest Pin it Button

pinit-screenshot

See the ‘pin-it’ button in the bottom-right corner

Turning this option on will add a Pin it button overlay to every one of your posted images*. When viewed on a non-mobile device, the button is hidden by default, but will display when a visitor hovers over any of your posted images, like in the example above.

On mobile devices, each pin it button will be visible immediately below the posted image, like this example:

pinit-screenshot-mobile

Clicking on a pin it button will open another browser window or tab, allowing visitors to select one of their boards to pin the image to, and allowing them to enter an optional description for the image.  ProPhoto will attempt to pre-populate the description with by looking first for alt text, then the image title. If neither of those are to be found it will use the containing post/page title.

pin-create-screenshot

* The pin it button will only display on images within posts, not on images upload within your ProPhoto admin (logo, masthead images, etc.)

Pinterest Pin it Button Options

Customize the appearance of the Pin it button which visitors click to pin your image.

Pinterest Pinit Button Options

1. Pin it button image

pinit-custom-option

ProPhoto includes a default pin it button.  You can also upload a custom button image here that can be positioned and functions the same way as the default button.

pinit-custom-screenshot

2.  Color of overlay when mousing over image

You an set the color of the overlay that will appear on your images when an image is hovered over and the Pin it button appears. This area allows you to choose opacity of your color.  For example, these settings use an almost-transparent white color:

Screen Shot 2014-01-06 at 10.18.41 PM

This results in a ‘hovered’ image which appears lightened with a Pin it button appearing in the center:

Original on the left, and hovered on the right....

Original on the left, and hovered on the right….

3. Pin it button position

You can select where your pin it button will be positioned over your images.

pinit-position-admin

pinit-position-screenshot

Selecting any left/right or top/bottom positions will place the button flush with the edge of your images.  If you want to space your button away from the edge of your images a bit, you can use options #4 & #5.

4 & 5. Space between button and top/bottom of image and left/right of image

If you’ve selected any left/right or top/bottom positions for your pin it button, you can add some spacing to move your button in from the edge of the images here.

Touch device options

Because a “hover” pin it button is not always desirable when using a touch screen, ProPhoto provides additional options for touch screen devices.
wp39_pinterest_touch_options

1. Display options

Your options are to have the pin it image overlay the image (so that it’s always visible), sit below each image, or not display at all.

Touch pin it overlayTouch pin it below

Horizontal alignment

If you choose the “below each image” option, then you can decide on the alignment of the pin it button below the image.

Spacing options

Again, when the pin it button is below each image, you can choose how much space is between the pin it button and it’s accompanying image.

Pin it button image

Here you upload the image you want to use for touch devices. You’ll want to upload an image that is large enough for folks to target with a finger, even fat ones.

Pin It buttons in galleries (currently, Lightbox only)

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Galleries" > "Lightbox Overlay Galleries"

Lightbox galleries do not support the pin it hover image that can be enabled for directly inserted images because of the next/prev hover links. However, if image pinning is enabled in “ProPhoto” > “Customize” > “Site Settings” > “Social Media” ProPhoto provides an additional pin it image upload area specific to lightbox galleries in “ProPhoto” > “Customize” > “Galleries” > “Lightbox Overlay Galleries”.
wp41_lightbox gallery pinit

This pin it image will display in the info area below each image.wp41_lighbox pin it image ex



If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us