Squarespace Users: Create a Custom Pin for Your Blog

UPDATE 1/16/2016

Hi! I know a lot of you were excited to see how to create a custom pin it hover for your Squarespace blog. You may have found problems getting every image on your blog to show up and I'm trying to figure out a solution as I speak. Sorry for the inconvenience. Sometimes the backend updates or gets new features that might mess with some of the custom code. 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.  

-C 


When I switched this blog from Blogger to Squarespace, I missed out on installing my custom pin on for my blog posts. I love the integration Squarespace has with Pinterest, but design wise, the custom Pinterest button wasn’t my taste. 

After doing some digging and testing, I found an easy way to add my custom pin (and it’s really easy).

First: create 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 a 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 of 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 can also delete that link and copy it, just make sure you do it after the after the “=“. The url must be between the quotation marks or it won't work.

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 

There you have it! 

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

Clarissa Nash

Designer, photographer and writer who's half Daria/half bohemian with a pinch of Beyonce.