Custom Pin It or Pin This buttons are a great way to add a personal touch to your website or blog. Pinterest can be a great source of traffic for your website. But not only will you be getting traffic, but you’ll also be getting traffic that is more likely to buy. 90% of weekly pinners are using Pinterest to make purchase decisions.
So you want to be encourage people to Pin your images as much as possible! And what better way to do that then with a custom Pin It image that reflects your branding.
And let’s be honest, the red Pin It button just doesn’t match most brand’s color palettes.
In this post I’m going to walk you through step by step on how you can add your very own custom Pin It buttons to your WordPress website. I’ve also created 50+ free downloadable Pin This buttons for you to choose from, which you can find at the end of this post!
Benefits of Having A Custom Pin It Button
A custom Pin It button is a great way to strengthen your website’s brand. I am always looking for little ways I can interject my own personality into Dana Nicole Designs, and having a custom Pin It button is one way to do that.
Easily Add Custom Pin It Button
Adding your own custom Pin It button is incredibly easy if you are using WordPress.
Download the jQuery Pin It Button for Images plug in
This is a free plug in and works great with your website. If you already have a plug in that allow you to upload your own custom Pin It buttons, skip to the bottom of this blog post so you can download your custom button.
Go to Settings > jQuery Pin It Button
To get to the settings of the jQuery Pin It Button plug in page, go to your WordPress settings and select jQuery Pin It Button. From there, go into the “Visual” options tab.
Upload Custom Pin It Image
In the visual options tab you will need to find the section titled Pin Image and select custom. Upload your custom pin it image here.
Choose Where Your Custom Pin It Image Should Show
From there you can choose when you would like your pin it button to show – I’ve chosen to have mine show only on hover.
Adjust Custom Pin It Image Dimensions
You can also adjust the height and the width of your pin it button. The height and width I have used for mine is 140px by 147px.
Adjust Transparency of Pin It Image
The pin it image for my website has a transparency of 0.2. I had to play around with this until I found one that was suitable.
Choose Your Pin It Image Location
You have the choice to place your image in the top left, top right, bottom left, bottom right or middle of your image. I have chosen middle but this is up to you and your preference. The default for this section is the top left.
Disable Custom Pin It Button on Certain Pages
The “selection” tab allows you to select where you would like your pin it button to display on your website. I have disabled mine on a few pages where I found it to be intrusive to the user trying to scroll.
You can choose to enable or disable through page ID’s or the list of page names provided by the jQuery plug in.
Troubleshooting jQuery Custom Pin It Plug In
Last week I came upon a problem with my plug in where my settings page was empty and wouldn’t show. After some digging, I came across jQuery’s documentation which gave me a solution.
Custom Pin It Images For Your Website
Now that you have your plug in set up and are ready to go.
PLEASE NOTE: You will receive a zip folder containing all of the images – you must unzip/extract this folder in order to view the images. To do so, right click on the folder once you have downloaded it, and select “7-Zip > Extract Files…”.
By the way, the background is transparent on all of these files. When I preview them it shows up as black, and on other computers it shows up as white, but they are transparent which is exactly how you want them for uploading!
This article may include affiliate links. www.dananicoledesigns.com is a participant of Amazon.com Services LLC Associates Program. As an Amazon Associate, I earn a commission from qualifying purchase. www.dananicoledesigns.com participates in other affiliate programs, and recieves commissions when purchases are made through the links. This is at no extra cost to you.
Share this Article