Add a Pinterest Pin it Share Button in Squarespace

by Holly Ezell on February 16, 2012 in Squarespace 5, Squarespace Basics with 8 Comments Tweet

How to Add a Squarespace Pinterest Button

After hours of googling and pretending I know more than I do about the trifecta that is javascript, html, and css, I think I have finally figured a way to add a Pin it Button to Squarespace without having to hand-code each link.

To find out more about the different Pinterest social media buttons, visit their goodies page (http://pinterest.com/about/goodies/).

Part of the reason the Pinterest Share Button is harder to code in Squarespace, is that each “Pin” must be associated with an image. Unfortunately, I have not found a Squarespace standard for images that would allow a script to scan posts and find, say the first image of each post.

However, Pinterest does have a bookmarklet script that users can drag and drop into the browser. It finds all the images on the associated page and lets the user choose which image to include. So the trick was to get that script into a Pinit Button. Have I lost you yet? Either way, just include the following code snippet and you will be able to add a Pin-it button that you can set and forget.

Where to Add the Pinterest Code Snippet in Squarespace

Website Management >> Website Settings >> Header and Footer 
(I’ve included this in the footer. However, many people paste these kind of scripts in the head via code injection. I’m trying to cut down on scripts in the head though)

Next you will need to add the following code to and HTML Snippet in your Journal Configuration via Structure Mode:

(Please Please Please! Save the Pinit Button image in your own storage. I don’t have a Squarespace account with unlimited bandwidth! These 1k images can really add up! lol)

Paste Pin it Button Code in Journal Configuration's Html Snippet

Improving the Pinterest Button Functionality

This is still a work in progress as I would like to have the Pin It Button only appear on individual posts. (similar to the Google+ and Facebook share buttons) and not  index pages.

I think I need to incorporate the above within the following script.

I would also like the pinterest bookmarklet script to pull the post’s title in the Pin’s description to provide a more frinction-less experience for the sharer.

Anyone that can offer some help on this, please leave a comment or link  below!

Top

If you would like to receive other tips and tutorials,  follow Squarespace Plugins via RSS or sign-up for the SSP Monthly Newsletter which will include all the tutorials for the month as well as the latest Squarespace happenings around the net. (Your info will not be shared or sold to anyone)

Share:

• Pin It

Holly Ezell

Squarespace user since 2009. Traveling throughout North America with my first husband and three kids. You can follow our journey at FoggyPhils. (http://www.foggyphils.com)

Tagged: HTML Snippet, Journal Configuration, Pin It Button, Pinit Share Button, Structure Mode

8 Comments on "Add a Pinterest Pin it Share Button in Squarespace"

1. Holly says:

   February 17, 2012 at 2:18 pm

   UPDATE: Sheesh, I guess I should of waited a couple of days instead spending so much time trying to figure this out. Anyways, ss now has a help doc for pinterest. It’s a bit different from mine but uses the same basic js code. I still would like for it not to show on index pages though.

   http://help.squarespace.com/customer/portal/articles/376251-adding-pinterest-to-your-squarespace-site

   Reply
2. Dustin Cabeal says:

   June 28, 2012 at 10:49 pm

   Thank you! I went through several other guides on how to make this work, but yours was the only one that actually did! Really appreciate it!

   Reply
   • Holly says:

     June 29, 2012 at 9:22 pm

     Glad it helped! It’s definitely one of the easier ways to do it. However, I eventually need to update with option to only load on single posts as it can slow your site speed if you have a bunch of these buttons. Using the Facebook SDK (instead of an iframe) to provide better insights would be helpful as well

     Reply
3. kim klassen says:

   July 30, 2012 at 5:14 pm

   hi Holly
   great site…. i’m glad i discovered you…. through a search on my hunt for a pin it plugin.

   i’m looking for a way to do this…..
   http://wordpress.org/extend/plugins/pinterest-pin-it-button-for-images/
   which could lead to this: http://blog.imbreannarose.com/seemingly-green/ (hover over the image and pin it feature appears
   love it!

   any ideas would be sooo appreciated.

   Reply
   • Holly says:

     July 30, 2012 at 10:47 pm

     Thanks KIm!
     As to the pinit plugin you found, I believe there is good news and bads news
     Bad news- it includes php (a server side script not doable on ss)
     Good news- It’s actually a very simple plugin when looking at the files. Instead of PHP, it should be doable with js/jquery (similar to the script included in this post). If you download and open the plugin files, you can find the custom css. It uses classes to determine which photos are “tagged” with the script. So your images would start something like I know this may not help much if you haven’t done a bit of code dabbling, but my js skills just aren’t that great and it would take me the better part of a week of trial and error to get it right! You might try posting on the developer forums if you need more in-depth help. Some of those folks could probably figure it out in 5 secs

     Reply
     • Holly says:

       July 30, 2012 at 10:54 pm

       ugh..the code didn’t go through … here’s a pastebin
       http://pastebin.com/9SXfxgVY

       Reply
       • Anthony Nguyen says:

         August 14, 2012 at 4:41 pm

         Thanks for the effort Holly. Please let me know if you figure it out. I’m at no means a coder so if you were to solve this, I believe TONS of people will love you for it.

         Reply
4. Holly says:

   September 30, 2012 at 2:00 am

   I”m really REALLY hoping to get a tutorial up soon, but I think I MAY have found a solution. I’ve purchased two jquery plugins on codecanyon that SHOULD work. I expect it to be much easier on SS5 than SS6 so I’ll be testing first there. Here they are for those who need this sooner rather than later
   Pintools and/or Jackbox Responsive Lightbox

   Reply