jQuery Pin It Button For Images is a free plugin that allows your readers to easily pin images in your blog posts by simple hovering over them and clicking a button. It is highly customizable, so you can adjust it to your own needs. You can download it on the WordPress plugin repository.
As you can obviously see, this page is in work in progress state and it will probably be this way for quite some time.
- 1 Options
- 2 Translation
- 3 Downloading an older version of the plugin
- 4 Troubleshooting
- 5 ProPhoto theme users
- 6 Users about the plugin
- 7 Customization
Enabled and disabled classes
Enabled and disabled classes are an easy way to activate or deactive the “Pin it” button on certain images. The only tricky thing here might be adding a certain class to an image in a blog post. Here’s how to do this.
After adding an image to the blog post/page, switch to the Text tab in the text editor. Code for a typical image looks similarly to this:
<img class="alignright" src="http://www.mrsztuczkens.me/wp-content/image.png" width="500" height="250" />
To add a class to the image, you just need to add it to the class attribute of the img element. Multiple classes need to be separated by spaces. For example, if you wanted to add a nopin class to the image, the result you’re looking for looks like this:
<img class="alignright nopin" src="http://www.mrsztuczkens.me/wp-content/image.png" width="500" height="250" />
If an image doesn’t have a class attribute, you need to add it. Make sure there isn’t more than one class attribute in an image.
By default, the plugin links the image to the URL user is visiting. So, if he’s pinning an image while visiting the the home page, the pin will link to the home page. If he’s visiting a certain blog post, the image will link to that blog post, etc. If you will enable this option (Always link to individual post page), the pin will always link to the individual page with that image (if possible). That means if user pins an image from a blog post while visiting the home page, the pin will link to the blog post, not the home page.
If you selected Title as the description source for the pin and enabled this option, the title of that individual blog post will be used.
For lightbox to work with an image, the image has to link to its full-size version or to itself. The html code looks like this:
<img class="aligncenter size-medium wp-image-1715" src="http://mrsztuczken.me/wp-content/uploads/2016/05/download3-300x200.jpg" width="300" height="200" />
With this setup, if the user clicks the image (not the Pin it button on it), a modal window is opened with the full-size version of the image.
If you enable lightbox, it works only on posts and pages where JPIBFI is active. That means if you check Disable “Pin it” button for this post on a certain post, lightbox won’t work there either.
In the languages folder there is a jpibfi.pot file that allows you to translate the plugin. If you would like to translate the plugin to your language and then share it with the community, you can send it directly to me (use the Hire me form) and it will be added to the next version of the plugin.
- Spanish (es_ES) – Andrew Kurtis WebHostingHub
Downloading an older version of the plugin
Every released version of the plugin is available here, in the “Other versions” section.
If you have any issues with the plugin, report them in the plugin’s support forum. I do my best to help people who are experiencing issues with the plugin. Make sure you read sections “Before reporting a problem” and “Reporting a problem” before posting on the forum.
Before reporting a problem
Before reporting a bug please follow the steps listed below. They might actually fix the issue.
- If you’re using a caching plugin (like W3 Total Cache) on your website, clear its cache.
Reporting a problem
Few things I would like you to do when reporting a problem:
- Follow the directions in Before reporting a problem section and let me know what happened.
- In Advanced options enable debug mode (make sure to save changes after checking the checkbox). Debug mode doesn’t change the way the plugin works, but it gives information that helps with figuring out the issue.
- One thread = one person + one problem.
If you have a problem, start a new thread. Don’t post in a thread started by someone else saying “I have the same problem”. Any “me too” posts will be ignored. Start a new thread and answer only there. If another problem will occur somewhere in the future, start a new thread instead of reviving the old one.
- Include a URL address of the website and make sure the plugin is activated.
If you won’t give me the URL address of the website where the problem occurs, unless it’s a settings page issue, how can I check out what’s happening there? Threads like “I have this XXX problem, I deactivated the plugin and am waiting for the next version to fix it” will be ignored. If the plugin works but things aren’t rendering as they should, let me know which browser are you using.
- If your issue is resolved, be kind enough to let me know about that.
Two Pin It Buttons
The plugin adds exactly one “Pin it” button. If you have more than one “Pin it” button showing up on your website, it’s most likely either another plugin adding it or a browser extension/phone app adding it.
ProPhoto theme users
ProPhoto theme has a feature that prevents users from downloading images. This feature interferes with the jQuery Pin It Button For Images plugin. To make things work you need to add pp-overlay to disabled classes (selection settings) and make sure the plugin works in static mode (visual settings). That should make the plugin work correctly with the ProPhoto theme. Please note that the static mode is no longer available in the plugin due to the number of issues it caused. To have the ability to use this setting you need to install an older version of the plugin – 1.33.
Users about the plugin
Below you can find blog posts that feature jQuery Pin It Button For Images
- Best Pinterest Plugin for WordPress @ Snap Creativity
- How to add your own custom rollover ‘pin it’ buttons to images @ Mamma Saurus
- New WP Plugin: JQuery Pin-It Button @ Rebecca Coleman
If you like the plugin but you really need few new features to be perfectly happy with it, you can hire me (the author of the plugin) to customize it for you. Of course it’s a paid service (price depends on what are your needs). If you’re interested, go to the “Hire me” page.