Squarespace Users: Create a Custom Pin for Your Blog

2SLJBDK4T0.jpg

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>

Screen Shot 2015-09-25 at 2.43.02 PM.png
Screen Shot 2015-09-25 at 2.43.16 PM.png
Screen Shot 2015-09-25 at 2.43.26 PM.png

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.