How to Install a Pinterest Pin It Button For Images Plugin

Pinterest users is growing so you might want to include some strategies for your business using this platform.

I’ve been visiting websites lately and one of the websites that caught my attention is Jon Loomer‘s site. I was looking at the pictures on his blog post and noticed the Pin it button when you hover your mouse on the images. It’s amazing! I want this too on my site.

I look for WordPress plugin that has this capability and gladly I’ve found the Pinterest Pin It Button For Images.

The Pinterest Pin It Button For Images plugin is only visible when you hover over your images, as you can see in the images below.

Configuring the Pin It Button for Images Plugin Settings

On your WordPress dashboard, just go to “Settings” then “Pinterest Pin It”. You’ll need to set the content width and decide where you would like the pin it button to display.

Now this you may need a trial and error. You have to make sure that the Pin It button is at the right place. Try reducing or adding the width if that is the case.

Make the Pin It Button Visible

If you want the button displayed at all times, we need to alter the plugin code.

On your WordPress dashboard, just go to “Plugins” then “Editor”. From the drop-down choose “Pinterest Pin It Button For Images”.

Select the pinterest-pin-it-button-for-images/ppibfi_pinterest.css. You’ll just need to find the piece of code and replace it with the new code.

Find this snippet of code

[css].pibfi_pinterest .xc_pin, .pibfi_pinterest img { -webkit-transition:opacity .2s ease-out; -moz-transition:opacity .2s ease-out; transition:opacity .2s ease-out; }[/css]

And replace with this…

[css].pibfi_pinterest .xc_pin, .pibfi_pinterest img .pibfi_pinterest_hover { -webkit-transition:opacity .2s ease-out; -moz-transition:opacity .2s ease-out; transition:opacity .2s ease-out; opacity: .7; }[/css]

This is what you’ll get. Pinterest ‘Pin It’ button will now be visible to readers.