Using Pinterest with ProPhoto

Pinterest is a popular way to share cool content on the web with others – in this tutorial, learn how to add Pinterest features to your ProPhoto site, making it easy for your visitors to pin images from your site, or to visit your Pinterest profile.

Your site wide pinterest options are found in “ProPhoto” > “Customize” > “Site Settings” > “Social Media“.

 
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



Pinterest Widgets

pinterest-widgets

ProPhoto offers a widget that actually contains several Pinterest widgets.  Each one has different options discussed below.  The different items will be displayed in the preview area of the widget after you’ve entered any required options.

Follow me button

Basically, this is a Pinterest branded button that links to your Pinterest profile.

follow-widget

You must enter a valid Pinterest username which ProPhoto uses to create a link to your profile.  You can also enter optional text for the button (if left empty, the default text is “follow me”).  The widget does the rest of the work to style the button.  Alternatively, you can select a custom image (uploaded to your “ProPhoto” > “Customize” > “Site Settings” > “Widget Images” area) linked to your Pinterest page.

follow-me-widget

Profile box

This widget will embed a box displaying a few of your most recent pins.

profile-box-widget

The only input required for this widget is a valid Pinterest username.  The profile box contains a link to your Pinterest profile and will automatically be sized to fit the widget area it is place in.

Pin any image button

The pin any image button offers a way for visitors to pin your site images to their Pinterest boards.

pin-any-widget

Clicking on a pin any image button pops open a grid of all available on the current page of your site.  Visitors simply click on one of thumbnails from the grid to be given option to pin that image to one of their boards.

pin-any-screenshot

There is a default Pinterest “Pin it” button included for this widget, but you can select a custom image from your uploaded widget images for this button as well.

Image Pinning Prevention

If you don’t want to allow visitors to pin ANY of your images to Pinterest, simply go to “ProPhoto” > “Customize” > “Site Settings” > “Social Media” > “Pinterest options” and select the “prevent pinning” option.  This disables ProPhoto’s Pin It button for ALL images you post.

What about no pinning for just one post or page?

You can enable or disable pinning on specific single pages by way of the article specific option area ProPhoto adds to each post/page editing screen. If pinning is globally prevented, you can override that setting to enable it on just one page and visa versa.

In this example pinning is globally disabled but turned on for a specific page.

In this example pinning is globally disabled but turned on for a specific page.

What about no pinning for just certain images?

There is also a per-image feature.  If you want visitors to pin your images, but would like to prevent specific images from being pinned, just select the “prevent pinning” option after uploading it, but before inserting it into your post or page.

exclude-from-pinning

Again, this option applies pinning prevention to a specific image, and should be set before inserting your photo into your post. If you already inserted an image you want to block pinning, remove it from your post, return to your Add Media > Media Library popup, select the image again, change your pinning option, and re-insert it into your post or page.

How can I verify my site with Pinterest?

To verify your site on Pinterest, you’ll want to upload the verification HTML file to the root of your WordPress site. You need to upload it via FTP or your hosting control area file manager. Find more instructions from Pinterest here.

Pinterest is a growing way to share cool content on the web with others – in this tutorial, learn how to add a button to your Pinterest page on your ProPhoto blog, or how to add a “Pin It” button.

When using a free WordPress Plugin doesn’t give you the functionality or appearance you want for your Pinterest links/buttons, these tutorials will help guide you through the process of adding these links/buttons to your site.

“Follow Me” Link or Button

The “Follow Me” button brings visitors to your Pinterest page where they can view your Pinterest Boards and see cool things you’ve pinned as a Pinterest user.
Click here to use "Follow Me"

“Pin It” Link or Button

The “Pin It” button allows visitors to pin something from your site on their Pinterest boards.
Click here to use "Pin It"

Prevent Pinterest from pinning photos on your site

Some users feel that Pinterest has become a bit of a ‘loophole’ which can provide visitors to your site with a way to copy images from your site. You can use ProPhoto to prevent Pinterest from ‘finding’ and pinning images on your site – found in your image protection area here:
“ProPhoto” > “Customize” > “Content Appearance” > “Text & Images” > “Post image theft protection”
To learn more, click here.

How can I verify my site with Pinterest?

To verify your site on Pinterest, you’ll want to upload the verification HTML file to the root of your WordPress site. You need to upload it via FTP or your hosting control area file manager. Find more instructions from Pinterest here.

Pinterest is a growing way to share cool content on the web with others – in this tutorial, learn how to add a button to your Pinterest page on your ProPhoto blog, or how to add a “Pin It” button.

When using a free WordPress Plugin doesn’t give you the functionality or appearance you want for your Pinterest links/buttons, these tutorials will help guide you through the process of manually adding these links/buttons to your site.

“Follow Me” Link or Button

The “Follow Me” button brings visitors to your Pinterest page where they can view your Pinterest Boards and see cool things you’ve pinned as a Pinterest user.
Click here to use "Follow Me"

“Pin It” Link or Button

The “Pin It” button allows visitors to pin something from your site on their Pinterest boards.
Click here to use "Pin It"

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