A Pin It button is an icon that appears when a visitor to a website site hovers over an image. Clicking on the icon will allow them to pin the content to Pinterest and link directly back to the original site.
If you have the Google Chrome extension installed on your browser, you may already be familiar with the default Pin It button that appears when you hover over images on a website, allowing you to pin content directly to Pinterest.
This is a tutorial to set your own custom Pin It Button on your WordPress website, so that when visitors to your site hover over your images, they will enjoy a custom client experience.
Encouraging visitors to your site to pin images to Pinterest is really valuable. Unlike other social media, where fresh content is hot first and then grows cold/passive, Pinterest pins mature over time. They become more valuable the longer they have been in the algorithm. So, Pinterest is a great investment of your time.
Anyway, let’s get started!
1. Choose your free Pin It button
First, choose which Pin It button you would like to appear on your site. Download the zip file below and choose your favourite.
2. Install the plugin
Once you’ve logged into your site dashboard, go to Plugins > Add New > and type ‘jQuery Pin It Button For Images‘ into the Search field. Once you see the one that matches the image below, click Install, wait for it to finish, and then click Activate.
3. Configure the settings
Next, on the left-hand sidebar of your WordPress dashboard go to Settings > jQuery Pin It Button For Images.
The Selection tab
On the first tab that appears by default (“Selection”), there’s a couple of tweaks I recommend you make here.
Firstly, you can limit where the Pin It button appears. For example, you may not want it to appear on the home page, or your contact page. Delete the pages you don’t want it to show on under ‘On which pages the “Pin it” button should be shown’.
The screenshot below shows all of the default pages showing. So for example, if you don’t want it to show on the home page, highlight [home], and delete it.
Next, still referring to the screenshot above, you will want to set a minimum image resolution for where the Pin It button will show up on hover. For example, you won’t want it appearing over small signature images, or icons. They’re not the type of images you want people pinning. Your aim is to have your featured images and larger images pinned.
So, I recommend a threshold of 200 to 0 pixels, and 200 by 200 pixels as shown in the fields above.
Scroll down to the bottom of the screen and click ‘Save’.
The Visual tab
Next, scroll back up and select the ‘Visual’ tab.
Under this tab, you can see where it will grab the information for the pin description from. This is really valuable, because if you have a habit of naming your files something obscure, you don’t want that to be your default pin description that people save on Pinterest. Instead, you can see it will now grab either the Image title attribute, the Image alt attribute or the Post title as the description.
Important side note: Remember to always add in a relevant description to the Image alt attribute every time you upload an image to your Media library, so the data is set.
In the ‘Pin image’ section, you will now upload and set your custom Pin It button.
Click on the ‘Upload an image using media library’ button, and upload the file via your Media uploader. Then, click on ‘Use this as Pin It Button’.
Next, you will set the Height and Width. If you don’t do this, the button will be too large. Now, this will vary between the square-shaped Pin It Buttons and the horizontally-shaped Pin It buttons, so make sure you review the below size recommendations to match the one you’ve uploaded.
These values are Height by Width, in that order. Enter in the values corresponding to your chosen button into the fields.
Ok, now that’s done.
If you want to change where the Pin It button will appear when a visitor to your site hovers over an image, you can change the “Pin It” Button Position to Top Right, Middle, etc. I prefer to leave it Top Left, so it will cover the default one that may appear on some people’s browsers if they have the Google Chrome extension installed. Otherwise, some visitors may see both. Which isn’t a terrible thing, but aesthetically I prefer to cover it with mine, and just have one.
Lastly, make sure you scroll down to the bottom and click Save Changes.
That’s it! Now you can navigate back to your site and view how your new custom Pin It button looks and behaves.
I’d love to see it in action, so if you comment your website URL below I’ll come and take a look!
If you found this tutorial useful, please share via the social buttons (or click on my custom Pin It button to pin it to your Pinterest board!)