Want to create a custom pin for blog posts in Squarespace but find it difficult? After doing some digging and testing, I found an easy way to add my custom pin (and it’s really easy).
But first, why create a custom pin?
Brand consistency. While it doesn’t make or break how people view your brand, the more things can be cohesive, the better. Plus, I’m not a fan of the default pin.
Now: Design your custom pin.
In Photoshop or Illustrator, create a document no bigger 144px X 144 px (2 inches).
Once you’ve designed it, save it as a .png file and upload it to an image/video hosting service like Photobucket so you can grab the direct link later.
Grab this code from Blogger Sentral (Java Script)
<script> //<![CDATA[ var bs_pinButtonURL = “http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png”; var bs_pinButtonPos = “center”; var bs_pinPrefix = “”; var bs_pinSuffix = “”; //]]> </script> <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’></script> <script id=’bs_pinOnHover’ src=’http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js’ type=’text/javascript’> // This Pinterest Hover Button is brought to you by bloggersentral.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact. </script>
In ‘Header’ paste the code in the box and save it.
Now, let’s look at this part of the code:
var bs_pinButtonURL = “http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png”;
Don’t be overwhelmed. You’re almost finished.
Find the direct link to the pin you created.
Highlight:
‘http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png’
and paste it in its place. You may also delete the link above and copy it, but make sure you do it after the after the “=“ because the URL must be between the quotation marks.
If you don’t want your position in the center, find this: var bs_pinButtonPos = “center”; and change where you want it. Use: left, top-left, right, top-right
After all of that, you’re done!
Note: when someone pins your photo, the entire post may copy into the description post. I don’t know if this has happened because of this code or because of the post (it’s happened before I pinned it). Be mindful and shorten your description before you pin it to your board.
Another note: This only pins photos from your blog, not your website. Personally, it works fine for me as I’m trying to promote
Hope this helps everyone! Let me know if you have any questions in the comments (and if it worked, link me to your blog!).
Until next time, C
UPDATE 1/16/2016
People have reached out to say they’ve had a problem creating custom pins lately. It worked for me until Squarespace did an update on their end, which may have altered what JavaScript works and doesn’t. I’ve reached out but right now it’s a runaround for answers. Technology is a pooper at times.
I’m not telling ya’ll not to try it, but just know if it doesn’t work, that’s why.
Hello "C".
I’m very confused by this post. If I understand the point of it, it explains how to get an image (slash "Pin") onto a post that can then be clicked on and shared on Pinterest by your readers. But Squarespace already offers a way to do this without all the instructions and code you gave. When I hover over your image/PIN, the "Pin It" button appears, just like it does with all my images on all my blog posts … and I didn’t go through any great lengths to make that happen. Just followed Squarespace instructions to set it up.
Also, the way to get the Pin description you want to appear when your readers pin your images is to include a "caption" under the image, but you can "Turn Off Captions" in your image settings so the description doesn’t appear in the actual post if you don’t want it to. This eliminates any wonder about the entire post appearing in the Pin description.
I also just save my images to a folder on my computer. No Photo Bucket or anything.
So unless I completely misunderstand the point of your post, I think you’re going to way to much trouble and providing unnecessary and complicated information to Squarespace users.
Feel free to respond if you want.
Take care,
Jenna
Hi Jenna,
The post is about creating a CUSTOM pin and being able to add it to show up on your blog posts. As I am a Squarespace designer (more than just arranging a basic site from the template), I completely understand there’s the standard pin it button that goes with the Pinterest style. However, some people like a pin custom to their brand, so I wrote my post according to what people wanted, hence why I did research and provided the information for those looking for it. In other words, this an alternative to what Squarespace has as its default.
If anyone is confused, they are more than welcome to reach out and ask for help. I’ve done so with a few people. I get coding isn’t something people grasp onto easily, which is why I provide screencaps and again, offer to help them without a problem.
As I do with all of my blog posts, Jenna, I make sure anything I write will be a resource for people looking for answers. It’s never a waste of time, so don’t worry about that.
I also understand it may not be a need for everyone, and that’s completely fine. They don’t bother leaving passive aggressive comments trying to critique why I should or should not write certain about certain topics.
Thanks for stopping by,
Clarissa
Jenna, I think you missed the entire point of her post. It was for people who wanted a custom pin it button and not the the ugly, obnoxious standard pin it button that comes with Squarespace.
Well I found this helpful, and got your point lol But I do have a question, I noticed when I hover over your pictures in this post, your customized pin it button only pops up on some of the pictures, and the original pin it button still pops as well, but on all of the pictures? Is there a way to only have the customized button to pop up? And do you know why it’s not popping up on each photo on the post?
Melinda,
Thanks for stopping by and bringing it to my attention! I’ll look it up and let you know and offer a solution and update the blog 🙂
Again, thanks for letting me know and I’m glad you found this helpful!
Clarissa
Did not work at all for me 🙁 Is there anyone out there who can do this for me please? (add a custom image for Pinterest button) I’m happy to pay, it’s driving me nutty! Thanks!
Hi Hayley!
I know it isn’t working, which sucks and I’m so sorry I couldn’t find a solution. However, Square Plugins does have a plugin with easy step-by-step directions. It’s $14, but I am more than satisfied with the price. I’m providing the link below (and updating the post this weekend). http://squareplugins.com/styling-plugins/customizable-pin-it
If you need help installing it, give me a shout and I’ll let you know (because you have to pay for it, I don’t want to blog the how-to here. Does that make sense?).
Let me know what you decide to do!
Clarissa
I know that the author of the blogger sentral code post just a couple of weeks ago in line ten of the code to: http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js
I’m still having problems trying to upload it to squarespace though. Is there no hope to diy one without buying special code?