How to add a custom Pinterest pin-it button to Squarespace or Wordpress + free download 12 Pinterest buttons
NB: This post contains a free download. You can jump to the download here.
Ā
Get more shares with a custom Pinterest pin-it button
Pinterest is a major traffic booster for a lot of bloggers, and, as you may know, one of the greatest ways to increase social media shares is to make sharing as easy and convenient as possible.
If you want to increase Pinterest traffic, you need to learn how to add a custom pin it hover button to your blog images!
what is a custom pin-it button?
A Pin-it button (or Pinterest button) is an icon that appears over your images on hover. This means that your readers will see a button that allows them to easily pin the image they are hovering over, straight to Pinterest. When the button is clicked, your reader is taken directly to Pinterest in a new window, where the image they've chosen is already selected and displaying the image title you have chosen. From there, all your readers have to do is chose a board to pin the image to.
Having a custom Pinterest button on your website or blog will make pinning attractive as well as convenient for your readers. Sure, you can enable the standard Pinterest sharing button for both Squarespace and Wordpress, but a beautifully designed pin-it button that suits your blog is just so much nicer!
In this post, I'm gonna show you how to install a custom Pinterest button both on Wordpress and on Squarespace.
Wanna jump through the content?
Navigate quickly to the information you're looking for by clicking on the following links:
free pin-it button download
option of personalised pin-it button design
How to Add a Custom Pin It Button in WordPress
What you'll need to install a custom pin-it button in Wordpress:
- A Wordpress.org account
- A custom Pinterest pin-it button in .png format (download your pin-it button above)
TIP: You can click on any image in this tutorial to blow it up to a larger size!
Step-by-step installation of Wordpress custom Pinterest pin-it button:
1.
Log in to your Wordpress.org account and open your dashboard
2.
Use a Pin-it button plugin for Wordpress
In the left-hand navigation menu, click on "Plugins". It should look like this:
3.
Install the jQuery Pin it button plugin
Search for the plugin "jQuery Pin It Button For Images" in the search bar.
Click on "Install now". The download and installation will start.
4.
Change settings for the jquery pin-it button plugin
Once installed, you'll need to configure the settings. Click on "Settings" in the left-hand sidebar, and scroll down to "jQuery pin it button for images lite". Click on this option.
There are a lot of settings within this plugin, however, you won't have to touch many of them. In fact, if you aren't 100% sure how to modify the settings, then you're better off sticking to what I will cover in this post.
5.
Decide which pages you want your pin-it button to appear
Click on the tab called "Selection", and scroll down until you see a setting called "On which pages the "Pin it" button should be shown". It looks like this:
As you can see, I have only left the tags "single" and "page" within the box. This is because I only want my pin-pit button to appear on single posts and pages. It's not practical to have people pin images from your home page, because those who open the pin and visit your site won't find what they are looking for without navigating several clicks into your blog. This can turn people off and have them leave your site.
Make sure you save your changes!
6.
Prevent pinning of small images
Next, find the box titled "Minimum image resolution". You can set these standards to prevent people from pinning very small images, such as share buttons or icons. Below, you can see my settings, which are above 200 pixels.
Make sure you save your changes!
7.
Set pin-it button image transparency
Next, click on the tab called "Visual" and scroll down to "Transparency". This option sets the fade on hover function which helps your Pinterest button stand out more, however, too much face can be a bit annoying. I set mine to 0.3, but you can try out a few gradients to see what suits your blog.
Remember to save your changes!
8.
Download your free custom pin-it buttons
Before we go ahead and insert your actual custom pin-it button, there are a few things you need to do.
First you have to download the free custom pin-it button package. You can do that here:
Once you've followed the steps to receive the free pin-it buttons, you have to head to "Downloads" on your computer and unzip the file as it is delivered compressed. For most computers, all you have to do is right click and choose "unzip", "unarchive" or "open".
Once the folder is unzipped, you will be able to open it and look at the different pin-it buttons. If you're not sure which one to choose, you can always try several by repeating this process.
9.
Create an ulr image address for your pin-it button
As you'll often find with images online, you need to use an image url or "image address" to complete this install. You can upload your image to any website, public or private, but what I like to do is create a private (hidden) post within my own blog where I can post any images I need an url for. Simply create an new post and publish it as "private" or hidden".
Once you've done this, simply hover over your button image, right-click and choose "copy image address". You're gonna paste this image address into the next box.
10.
How to upload your pin-it button image
Under the tab "Visual", you'll see the section called "Pin image". Choose "custom" and paste your image address into the box.
The image will upload in its full size, but you have to change this to suit the size you want your button to be. I chose 120x120 for mine, but your can be smaller or bigger, depending on the image and your preferences. I recommend saving and having look until you find a size that looks good.
11.
position your pin-it button
The next thing you need to do, is decide where on your image your pin-it button should be positioned.
Look for the sections called "Pin it button position" and Pin it button margins".
As you can see, I've chosen to place my button at the top left of the image, 20 pixels from the top and left edges.
Again, you can try your way to a perfect fit for your button.
Remember to save your changes!
Ā
10.
Congrats! You now have an awesome new Pinterest button on your site.
Now, why don't you take a look at these stats from my blog:
Yup, that's 84 095 hits from Pinterest alone. Pinterest helps me out a LOT! (Pinterest I luv u!)
Would you like the same kinda love from Pinterest?
Well, it's easy, and I can teach you!
If want to find out how exactly Pinterest became one of my biggest traffic sources, read on!
Learn how to drive massive referral traffic to your blog from Pinterest
Now that you have such a cool new custom Pinterest button, wouldn't you like to know how you can capitalise on it? Wanna drive massive referral traffic to your blog from Pinterest?
Then check this out:
For a limited period, I'm offering bundled group coaching for Pinterest, a mini-course if you will, designed to take your Pinterest account to new levels.
If you want to learn exactly how Pinterest became one of my biggest traffic sources, sending tens of thousands of visitors my way, then you'll want to sign up for this coaching bundle!
Put it bluntly; can you afford not to?
How much traffic are you getting from Pinterest today?
- Get this: a regular one-on-one coaching session is $95. In this group bundle you get 3 full-blown coaching sessions for $135 (that's $45 per session). The coaching will take place over Skype or Messenger, and you'll be in a group of minimum 3-5 other bloggers who all want to become Pinterest champions.
Why is this mini-course better than a webinar or online course?
Unlike online courses, ebooks and webinars, this mini-course is a hands-on, interactive and dynamic group coaching session. It's you and me, along with 3 or 4 other dedicated bloggers, getting personally coached over Skype.
This is a not a slideshow and a monologue in the company of 200 muted listeners.
During the coaching sessions, I will walk you through a strategic process that will make your Pinterest traffic multiply at an astounding rate, and it's all super easy and achievable. You can ask questions and you will get personal guidance.
Click on the banner to learn more, and to sign up for the Pinterest coaching bundle before it's too late!
Sign up now for a bonus
Sign up now, and you'll also get a kick-ass Pinterest planning tool that will help you maximise your results! Hit the button for direct enrollment.
How to Add a Custom Pin It Button in Squarespace
What you'll need to install a custom pin-it button in Squarespace:
- A Squarespace account on a Business or Commerce plan
- A custom Pinterest pin-it button in .png format (download your pin-it button from this post)
TIP: You can click on any image in this tutorial to blow it up to a larger size!
Step-by-step installation of Squarespace custom Pinterest pin-it button:
1.
Log into your Squarespace account, and click on "Settings" in the left-hand dashboard.
2.
Scroll down to the "Website" menu and click on "Advanced"
3.
Navigate down to the "Code injection" option and open the page
4.
How to insert code for custom pin-it button in Squarespace
Here's the deal; I use a code that was created by Bloggersentral and modified by Station Seven. It's awesome, and because I appreciate their hard work, I've not made it possible to copy the code from here. Instead, I ask humbly that you visit the Station Seven post for the code, copy it, and return here.
Sure, it would be easier to simply share the code, and you wouldn't leave my site, but it's good form to give credit where credit is due. I trust that you feel the same way, and that you'll come back for the rest of the tutorial :)
Once you've got the code, come back and paste it into the "Footer" area of your Code Injection section.
5.
Download your free custom pin-it buttons
Before we go ahead and insert your actual custom pin-it button, there are a few things you need to do.
First you have to download the free custom pin-it button package. You can do that here:
Once you've followed the steps to receive the free pin-it buttons, you have to head to "Downloads" on your computer and unzip the file as it is delivered compressed. For most computers, all you have to do is right click and choose "unzip", "unarchive" or "open".
Once the folder is unzipped, you will be able to open it and look at the different pin-it buttons. If you're not sure which one to choose, you can always try several by repeating this process.
option of personalised pin-it button design
Before we get started with the installation, I just want to let you know that you can also order your very own custom pin-it button that will be uniquely designed to suit your website and your brand.
I design and install for $86. Click the button below to order.
6.
Create an ulr image address for your pin-it button
As you'll often find with images online, you need to use an image url or "image address" to complete this install. You can upload your image to any website, public or private, but what I like to do is create a private (hidden) post within my own blog where I can post any images I need an url for. Simply create an new post and publish it as "private" or hidden".
Once you've done this, simply hover over your button image, right-click and choose "copy image address". You're gonna paste this image address into the code.
7.
How to customise your custom pin-it button
After you have copied the image address, you paste it into the following section of your code:
Keep your Url/image address within the quotation marks. If you've saved your image within a hidden post in Squarespace, it will automatically have an address beginning with "https". If you've saved it elsewhere, you need to make sure it does.
Placement of your pin-it button
Next, you can decide where the pin-it button should appear on your images. This is automatically set to "top left",which, in my opinion, is the best placement. You can, however, change this positioning if you like.
Lastly, you can choose to add a sentence that displays after the pinned image title, for example: "Pinned from Blog it Better!"
Remember to exchange your text with the existing text in the code. Don't leave the existing text within the brackets, or it will display along with your text.
Save your changes.
8.
Add custom css to your pin-it button
Station Seven have fixed a display issue by adding a custom code snippet in the "Custom CSS" section of your Squarespace dashboard.
Copy this code (keep the attribution):
/*Station Seven custom pin it button*/
.pinimg {
position: relative!important;
max-width: 100px!important;
margin: 20px!important;
}Navigate to "Design" in your dashboard
Click, and scroll down to "Custom CSS"
Paste the code into the custom CSS window and save.
9.
Disable the default Squarespace Pinterest pin-it button
If you fail to disable the default button, you'll have two conflicting pin-it buttons on your images.
Open "Settings" in the Dashboard, scroll down to the "Website" section and click on "Marketing.
You'll see an option called "Pin it buttons". Click on it and choose "Disabled" from the drop down menu. Save your changes.
Now you know how to install a custom Pinterest button!
Congrats! Now, why don't you take a look at these stats from my blog:
Yup, that's 84 095 hits from Pinterest alone. Pinterest helps me out a LOT! (Pinterest I luv u!)
Wouldn't you like some of that juice too?
Guess what, it's easy, and I can show you how.
If you want to learn exactly how Pinterest became one of my biggest traffic sources, sending tens of thousands of visitors my way, then click here to jump up the page for some more information, or click directly on the banner below to check out my Pinterest Coaching Bundle.
CAN I ASK YOU A teeny tiny FAVOUR?
If you appreciate my content, it would make me the happiest gal in the blogosphere if you would share my post ā¤ļø
Perhaps you think that your little share doesn't matter, but it means a HUGE deal to me! Without shares from people like you, I literally couldn't keep this blog running.
A share from you won't take up much of your time but it will seriously help me out, so please hit one of the (very convenient) little buttons below to tell your friends about Blog it Better!
Hint: I've included a pretty neat Pinterest banner that I think you'll like š
Thank you so very much, you're totally awesome!
Kristine x
latest posts
HI, I'M KRISTINE!
I've been a full-time blogger for half a decade and a business and marketing professional a decade before that.
Now I help bloggers reach their goals, grow their income and increase their influence by giving them the tools they need to confidently pursue their passion.
