Adding a "Pin It" hover button to blog images
All EmPress themes include a Pin It hover button which you can apply to your theme. In order to enable these buttons, you will need to download a Pin It hover plugin, and activate it on your site.
We recommend jQuery Pin It Button for Images. It’s a free, easy to use, lightweight plugin, and can be customized to your exact specifications. Below are instructions for how to set up this plugin:
How to set up the jQuery Pin It Button for Images Plugin
1. Install and activate the jQuery Pin It Button for Images.
2. Once installed and activated, navigate to Settings > jQuery Pin It Button.
3. On the Selector tab, we recommend ensuring the text .jpibfi_container img is inserted into the Image Selector box. This will ensure the pin it button will only appear on images in your posts and pages. It won’t appear over things like your logo, sidebar items, or photos in your footer.
4. Below, in the fields titled “On which pages the “Pin it” button should be shown,” you can use the legend with locations in [brackets] to dictate where you do and don’t want the pin it hover effect to appear. Be sure to hit Save Changes once you are satisfied with the settings on this tab.
5. Next, we need to upload our pin it button artwork and optimize it. Click on the Visual tab. Here, you can:
Within the Show Button dropdown, select where the button appears. We recommend you use the On Hoversetting.
Set the Description Source. This refers to the Pinterest caption that is populated when a user pins your image. If you are naming your images something descriptive (e.g., “5 Over the Knee Boots Under $200”), you can select Image Title Attribute. Post Title is a good second option here; this will populate the name of your post in the user’s Pinterest caption.
Transparency changes how opaque your pin it button artwork is. Use 0 if you do not want it to be transparent at all.
In the Pin Image section, we’ll upload our artwork and optimize it. Under Mode, select Custom, then use the settings to upload your pin it button artwork. Set the height and width of the artwork. If you are using our pin it button artwork @1x, the size is 40x40px. For @2x, you should also input a height and width of 40px and 40px (this will force the larger artwork into a smaller space, ensuring it looks crisp and sharp on Retina displays).
The Pin It Button Position allows you to select where you want the button to appear over images — top right, center, etc.
The Pin It Button Margins allows you to create space around the button artwork. For example, if you have set the button to appear in the top right, you can also set a margin of top: 20px and right: 20px to ensure the button isn’t flush with the borders of your photography.
6. Once you’re happy with how the pin it button has been styled, hit Save Changes.
7. The above settings should adequately set up your Pin It hover artwork, but feel free to explore the other tabs and check out the available settings if you’re so inclined!