How to Add a Custom Pin It Button on Squarespace

How to Add a Custom Pin It Button on Squarespace.jpg

While we’re sure you know that getting your content shared is important, don't forget that crucial aspect of making it easy for readers to do so. You don’t want your audience searching (or forgetting) to share your content, you want it right there asking them to do it.

One of the greatest ways to get your readers to share your posts is Pinterest (pssst! If you don’t already know how useful Pinterest is for growing your blog, check out our 5 favorite ways to grow your blog with Pinterest here).

Today we’re showing you how to add a Pin It button to your Squarespace site so that anyone reading your blog can easily share your content with one click. There are a few steps involved but it won't take you long at all, so let’s get to it!

Pssst! If you are on WordPress instead of Squarespace check out our guide to setting up a custom pin it button (with free downloadable graphics) here.

Step 1 - copy the script

Update December, 2018: we've updated the code below! If your Pin It button isn’t displaying, please update your script with the one below.

To get things started, we'll need to add some javascript to our Squarespace site. Blogger Sentral has a great script that we're basing our code off of, but we've had to modify to work specifically with Squarespace. If you're not used to dealing with large blocks of code, don't stress! Simply copy everything below between (and including) the opening <script> tag and closing </script> tag.

<script>
//<![CDATA[
var bs_pinButtonURL = "https://your-image-url-here.png";
var bs_pinButtonPos = "topleft";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' type='text/javascript'>
//<![CDATA[
var _0x781d=["\x3C\x69\x6D\x67\x20\x73\x74\x79\x6C\x65\x3D\x22\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3A\x68\x69\x64\x64\x65\x6E\x3B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x6D\x67\x6C\x6F\x61\x64\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x68\x69\x64\x65","\x23\x62\x73\x5F\x70\x69\x6E\x4F\x6E\x48\x6F\x76\x65\x72","\x6F\x75\x74\x65\x72\x57\x69\x64\x74\x68","\x2E\x70\x69\x6E\x69\x6D\x67\x6C\x6F\x61\x64","\x6F\x75\x74\x65\x72\x48\x65\x69\x67\x68\x74","\x72\x65\x6D\x6F\x76\x65","\x6C\x6F\x61\x64","\x62\x6C\x6F\x67\x67\x65\x72\x73\x65\x6E\x74\x72\x61\x6C\x2E\x63\x6F\x6D","\x69\x6E\x64\x65\x78\x4F\x66","\x68\x74\x6D\x6C","\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79","\x68\x69\x64\x64\x65\x6E","\x63\x73\x73","\x2E\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72","\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70","\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74","\x74\x6F\x70","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x6C\x65\x66\x74","\x63\x65\x6E\x74\x65\x72","\x74\x6F\x70\x72\x69\x67\x68\x74","\x74\x6F\x70\x6C\x65\x66\x74","\x62\x6F\x74\x74\x6F\x6D\x72\x69\x67\x68\x74","\x62\x6F\x74\x74\x6F\x6D\x6C\x65\x66\x74","\x73\x72\x63","\x70\x72\x6F\x70","\x2E\x70\x6F\x73\x74\x2D\x74\x69\x74\x6C\x65\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x74\x69\x74\x6C\x65\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x68\x65\x61\x64\x65\x72","\x66\x69\x6E\x64","\x2E\x70\x6F\x73\x74\x2C\x2E\x68\x65\x6E\x74\x72\x79\x2C\x2E\x65\x6E\x74\x72\x79","\x63\x6C\x6F\x73\x65\x73\x74","\x74\x65\x78\x74","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","","\x6C\x65\x6E\x67\x74\x68","\x61","\x72\x65\x70\x6C\x61\x63\x65","\x68\x72\x65\x66","\x61\x74\x74\x72","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x7A\x2D\x69\x6E\x64\x65\x78\x3A\x20\x39\x39\x39\x39\x3B\x20\x63\x75\x72\x73\x6F\x72\x3A\x20\x70\x6F\x69\x6E\x74\x65\x72\x3B\x22\x20\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x2E\x63\x6F\x6D\x2F\x70\x69\x6E\x2F\x63\x72\x65\x61\x74\x65\x2F\x62\x75\x74\x74\x6F\x6E\x2F\x3F\x75\x72\x6C\x3D","\x26\x6D\x65\x64\x69\x61\x3D","\x26\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x3D","\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x62\x6C\x6F\x63\x6B\x3B\x6F\x75\x74\x6C\x69\x6E\x65\x3A\x6E\x6F\x6E\x65\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x6D\x67\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x2D\x6D\x6F\x7A\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x2D\x77\x65\x62\x6B\x69\x74\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x2D\x6F\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x74\x3B\x6D\x61\x72\x67\x69\x6E\x3A\x20\x30\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x20\x30\x3B\x62\x6F\x72\x64\x65\x72\x3A\x30\x3B\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x69\x6E\x20\x6F\x6E\x20\x50\x69\x6E\x74\x65\x72\x65\x73\x74\x22\x20\x3E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x69\x73","\x70\x61\x72\x65\x6E\x74","\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72","\x68\x61\x73\x43\x6C\x61\x73\x73","\x6E\x65\x78\x74","\x61\x66\x74\x65\x72","\x6F\x6E\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72","\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x3B\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3D\x27\x76\x69\x73\x69\x62\x6C\x65\x27","\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x3B\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3D\x27\x76\x69\x73\x69\x62\x6C\x65\x27\x3B\x63\x6C\x65\x61\x72\x54\x69\x6D\x65\x6F\x75\x74\x28\x62\x73\x42\x75\x74\x74\x6F\x6E\x48\x6F\x76\x65\x72\x29","\x76\x69\x73\x69\x62\x6C\x65","\x73\x68\x6F\x77","\x66\x61\x64\x65\x54\x6F","\x73\x74\x6F\x70","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x2E\x6E\x6F\x70\x69\x6E\x2C\x2E\x6E\x6F\x70\x69\x6E\x20\x69\x6D\x67","\x6E\x6F\x74","\x2E\x65\x6E\x74\x72\x79\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x20\x69\x6D\x67\x2C\x2E\x70\x6F\x73\x74\x2D\x62\x6F\x64\x79\x20\x69\x6D\x67\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x73\x75\x6D\x6D\x61\x72\x79\x20\x69\x6D\x67\x2C\x2E\x42\x6C\x6F\x67\x49\x74\x65\x6D\x20\x69\x6D\x67","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x6F\x6E","\x72\x65\x61\x64\x79"];jQuery(document)[_0x781d[66]](function(_0xb4a3x1){_0xb4a3x1(_0x781d[3])[_0x781d[2]](_0x781d[0]+ bs_pinButtonURL+ _0x781d[1]);_0xb4a3x1(_0x781d[5])[_0x781d[4]]();var _0xb4a3x2;var _0xb4a3x3;var _0xb4a3x4;_0xb4a3x1(_0x781d[7])[_0x781d[10]](function(){_0xb4a3x3= _0xb4a3x1(_0x781d[7])[_0x781d[6]](true);_0xb4a3x4= _0xb4a3x1(_0x781d[7])[_0x781d[8]](true);_0xb4a3x1(_0x781d[7])[_0x781d[9]]()});var _0xb4a3x5=_0xb4a3x1(_0x781d[5])[_0x781d[13]]()[_0x781d[12]](_0x781d[11]);_0xb4a3x5!= -1&& _0xb4a3x6();function _0xb4a3x6(){_0xb4a3x1(_0x781d[63])[_0x781d[62]](_0x781d[61])[_0x781d[60]](function(){_0xb4a3x1(_0x781d[17])[_0x781d[16]](_0x781d[14],_0x781d[15]);clearTimeout(_0xb4a3x2);var _0xb4a3x7=_0xb4a3x1(this);var _0xb4a3x8=parseInt(_0xb4a3x7[_0x781d[16]](_0x781d[18]));var _0xb4a3x9=parseInt(_0xb4a3x7[_0x781d[16]](_0x781d[19]));var _0xb4a3xa;var _0xb4a3xb;switch(bs_pinButtonPos){case _0x781d[23]:_0xb4a3xa= _0xb4a3x7[_0x781d[21]]()[_0x781d[20]]+ _0xb4a3x7[_0x781d[8]](true)/ 2- _0xb4a3x4/ 2;_0xb4a3xb= _0xb4a3x7[_0x781d[21]]()[_0x781d[22]]+ _0xb4a3x7[_0x781d[6]](true)/ 2- _0xb4a3x3/ 2;break;case _0x781d[24]:_0xb4a3xa= _0xb4a3x7[_0x781d[21]]()[_0x781d[20]]+ _0xb4a3x8+ 5;_0xb4a3xb= _0xb4a3x7[_0x781d[21]]()[_0x781d[22]]+ _0xb4a3x9+ _0xb4a3x7[_0x781d[6]]()- _0xb4a3x3- 5;break;case _0x781d[25]:_0xb4a3xa= _0xb4a3x7[_0x781d[21]]()[_0x781d[20]]+ _0xb4a3x8+ 5;_0xb4a3xb= _0xb4a3x7[_0x781d[21]]()[_0x781d[22]]+ _0xb4a3x9+ 5;break;case _0x781d[26]:_0xb4a3xa= _0xb4a3x7[_0x781d[21]]()[_0x781d[20]]+ _0xb4a3x8+ _0xb4a3x7[_0x781d[8]]()- _0xb4a3x4- 5;_0xb4a3xb= _0xb4a3x7[_0x781d[21]]()[_0x781d[22]]+ _0xb4a3x9+ _0xb4a3x7[_0x781d[6]]()- _0xb4a3x3- 5;break;case _0x781d[27]:_0xb4a3xa= _0xb4a3x7[_0x781d[21]]()[_0x781d[20]]+ _0xb4a3x8+ _0xb4a3x7[_0x781d[8]]()- _0xb4a3x4- 5;_0xb4a3xb= _0xb4a3x7[_0x781d[21]]()[_0x781d[22]]+ _0xb4a3x9+ 5;break};var _0xb4a3xc=_0xb4a3x7[_0x781d[29]](_0x781d[28]);var _0xb4a3xd=_0xb4a3x7[_0x781d[33]](_0x781d[32])[_0x781d[31]](_0x781d[30]);var _0xb4a3xe=_0xb4a3xd[_0x781d[34]]();if( typeof bs_pinPrefix=== _0x781d[35]){bs_pinPrefix= _0x781d[36]};if( typeof bs_pinSuffix=== _0x781d[35]){bs_pinSuffix= _0x781d[36]};if(_0xb4a3xd[_0x781d[31]](_0x781d[38])[_0x781d[37]]){pinitURL= _0xb4a3xd[_0x781d[31]](_0x781d[38])[_0x781d[41]](_0x781d[40])[_0x781d[39]](/\#.+\b/gi,_0x781d[36])}else {pinitURL= _0xb4a3x1(location)[_0x781d[41]](_0x781d[40])[_0x781d[39]](/\#.+\b/gi,_0x781d[36])};var _0xb4a3xf=_0x781d[42]+ pinitURL+ _0x781d[43]+ _0xb4a3xc+ _0x781d[44]+ bs_pinPrefix+ _0xb4a3xe+ bs_pinSuffix+ _0x781d[45]+ bs_pinButtonURL+ _0x781d[46];var _0xb4a3x10=_0xb4a3x7[_0x781d[48]]()[_0x781d[47]](_0x781d[38])?_0xb4a3x7[_0x781d[48]]():_0xb4a3x7;if(!_0xb4a3x10[_0x781d[51]]()[_0x781d[50]](_0x781d[49])){_0xb4a3x10[_0x781d[52]](_0xb4a3xf);if( typeof _0xb4a3x2=== _0x781d[35]){_0xb4a3x10[_0x781d[51]](_0x781d[17])[_0x781d[41]](_0x781d[53],_0x781d[54])}else {_0xb4a3x10[_0x781d[51]](_0x781d[17])[_0x781d[41]](_0x781d[53],_0x781d[55])}};var _0xb4a3x11=_0xb4a3x10[_0x781d[51]](_0x781d[17]);_0xb4a3x11[_0x781d[16]]({"\x74\x6F\x70":_0xb4a3xa,"\x6C\x65\x66\x74":_0xb4a3xb});_0xb4a3x11[_0x781d[16]](_0x781d[14],_0x781d[56]);_0xb4a3x11[_0x781d[59]]()[_0x781d[58]](300,1.0,function(){_0xb4a3x1(this)[_0x781d[57]]()})});_0xb4a3x1(_0x781d[63])[_0x781d[65]](_0x781d[64],function(){_0xb4a3x1(_0x781d[17])[_0x781d[59]]()[_0x781d[58]](0,0.0)})}})
//This Pinterest Hover Button was developed by bloggersentral.com, then updated for Squarespace by Station Seven
//Visit https://stnsvn.com/configure-pin-button-squarespace/ and http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details
//Please do not remove this attribution
//]]>
</script>

Step 2 - insert into your Squarespace site

In your Squarespace site, navigate to Settings > Advanced > Code Injection. Take the code you copied in Step 1 and paste it into the Footer box.

code-injection.png

Step 3 - customize the pin it button code for your site

The code snippet will need a few updates to suit your site. You'll notice near the top of the code block are some variables:

var bs_pinButtonURL = "https://your-image-url-here.png"; 
var bs_pinButtonPos = "topleft"; 
var bs_pinPrefix = ""; 
var bs_pinSuffix = "";

This is how we can customize the pin it button for our needs. Here is what each one does:

  • var bs_pinButtonURL: Replace the URL with the URL of your custom pin it button. You can upload your image to an image hosting service like Photobucket if you need to. IMPORTANT: if your website url starts with "https", you have to make sure your image url also starts with "https" - Squarespace will block it if it is not coming from a secure source. You'll also need to change the link on line 10 to "https" in order to ensure it is working properly.

  • var bs_pinButtonPos: Choose where the pin it button displays over the image. The options are: center, topleft, topright, bottomleft, bottomright

  • var bs_pinPrefix = Add optional content that displays before the pin description here

  • var bs_pinSuffix = Add optional content that displays after the pin description here (such as "pinned from Station Seven").

custom-pin-it-button-code.png

Step 4 - add custom CSS

When we installed the javascript on our site, the pin it button wasn't displaying properly. It turns out that some of the Squarespace CSS was conflicting with it, but the fix isn't too hard. Navigate back to the home menu of your Squarespace site, and then go to Design > Advanced > Custom CSS. Paste in the following code snippet, then save your changes.

/*Station Seven custom pin it button*/ 
.pinimg {  
  position: relative!important;  
  max-width: 100px!important;  
  margin: 20px!important; 
}
custom-CSS.png

Step 5 - all done!

If everything has gone according to plan, your custom pin it button should now display whenever you hover your images. Yay!

squarespace-pin-it-button.png

A couple notes:

  • Make sure you have disabled the default Squarespace pin it button. If you already have it enabled, it can be disabled under Settings > Marketing > Pin it Buttons. Without disabling Squarespace's default pin it button, two buttons will appear when hovering over images - not cool!

  • The pin it button will only display on blog posts (not other pages on the site). Hopefully this isn't a deal breaker, but in our experience blog content is usually the most frequently pinned and the most valuable in drawing visitors to your site.

  • We've tested this on some of the most popular Squarespace templates, including Pacific, Montauk, Five, Rally and Marquee, as well as all of our custom Squarespace designs like Willow,Acadia, and Fable. It's possible that these steps may not work on all templates however, so leave a comment below if you think it might not be working on your template.

Free Pin It Button Design Download

Need some design inspiration? I've put together a few custom pin it button designs to help you hit the ground running. Click the image below to download all of these icons from our free resource library, including the Photoshop PSD files if you want to make any customizations (for personal use only, please!). You can download a free trial of Photoshop here!

Pin It Buttons

Free Pin It Buttons

Get noticed on Pinterest + grow your list!

So there you have it! Hopefully your new custom pin it button is displaying beautifully on your Squarespace site, encouraging your visitors to pin your great content - It's amazing what a difference a custom button can make. What custom pin it design are you using? I'd love to see your pin it button in action, be sure to share a link to your site in the comments below!