Custom Pin-It Buttons for Squarespace

 

Pinterest is king when it comes to passively sending readers to your blog. If you don’t already have a pinterest strategy, I highly recommend working on it! Whether you just start using Tailwind, manually Pin regularly, or hire a Pinterest Manager -- you gotta get on this!

You already know that I think well-rounded branding is essential… so why stop at just colors and a logo? Enter: Custom Pin-It Buttons!

Squarespace has a feature included that allows you to enable small icons to show up on your images, allowing readers to easily pin your content back to Pinterest, and thus giving you free publicity and website traffic! But what if you could customize that little icon to match your brand, impress your readers, and possibly entice them to pin your content even more? Yes please!

Now, this process involves a bit of code… but don’t stress! I got this code from the geniuses over at Station Seven… and they’ve made sure to make the process easy-breezy!

Step 1: Copy this code

<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: Add code to your site’s footer code injection

(Settings -> Advanced -> Code Injection -> Footer)

Step 3: Customize

This involves two steps. The first is to upload your custom button to your site files. I have created a couple for you to use, or you can create your own on Canva or your design software of choice. Just make sure the image has a transparent background and is a PNG.

To add to your site files, you can go to Custom CSS and click “manage files”, and add the file there. Once you upload the image here, click the file and a URL will appear in the CSS box. Copy that… then erase it from CSS ;)

Take that URL back over to the original code in your Footer Code Injection, and enter it in the space that says "https://your-image-url-here.png"

Directly under that, you can see a few more options for customization.

var bs_pinButtonPos = "topleft";  ← tells where the button will appear on the image. The options are center, topleft, topright, bottomleft, bottomright.
var bs_pinPrefix = "";  ← you can choose to add content to appear before the Pin description

var bs_pinSuffix = ""; ← you can choose to add content that appears after the Pin description here, I have added “Pinned from LJ Media House”

Step 4: Disable the Squarespace default Pin button

If you had it enabled, this can be done via Marketing → Pinterest Save Buttons → Disable

Step 5: Custom CSS

To ensure that Squarespace coding doesn’t interfere, Station Seven has given us this little CSS. Head to Design → Custom CSS → Drop the code below there. If your Pin button is a bit too big or small, you can adjust the max-width character.

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


*When using these codes, please keep the attribution from Station Seven.

 
pin it! (1).png
 
 
 
Add custom pin it buttons to your website
 
Pin This!.png