Adding Pinterest To Your Squarespace Site

What Is Pinterest? 

Pinterest is a social networking tool that allows you to collect, organize and share things of interest that you find on the web. It works much like a virtual pinboard. There's no limit to the amount of topics you can organize or types of pinboards that you can create using Pinterest.

If you aren't already using Pinterest and would like to, you can sign up here. Even if you don't use Pinterest, adding a Pin It button can still be beneficial because it provides another way that people can share your site with others.  

Add the Button To Your Blog  

You can add Pin It button code to your Squarespace blog so that it automatically displays within every journal entry as a share option. This can be done using the HTML Snippet field in the Journal Page configuration.

Step 1: Choose A Button

A button icon or image will be needed for the Pinterest code you'll be adding in the following steps. You can choose an image from the Pin-It Button page or use any other image of your preference. We've also provided two images below that you can use in your blog, simply right-click to download them:  

Once you've selected and saved an image of your choosing, upload that image directly to your site File Storage using the steps here. Also note the file name for your image; you'll need to update your code with that file name in the next step.  

Step 2: Copy Your Code

Copy the below code and change the file name portion (/yourbutton.png) to reflect the file name of the image you uploaded to your site in Step 1. You may want to also keep a copy of your code in a plain text file so that you have a copy on hand for reference as well.  

<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It!" style='border: none;' src="/storage/yourbutton.png"/></a>

Step 3: Paste Code Into the HTML Snippet Field

Click Structure Edit mode  

Once you've selected an HTML snippet to use, double click on it and paste the above code into the snippet field. Click the Hide & Save button to save the change. Then, click the Save Page Configuration button to close the editor. 

After completing the above steps, you will see the Pin It button appearing in your journal entries.

When visitors click to pin something to their pinboard, they will be presented with all image options on the page. The options list will appear with the Pinterest logo like the example shown below.   

Add a Pinterest "Follow Button" To Your Site

The follow button option allows visitors to follow you on Pinterest in the same way as done in any other social network. To add a follow button to your site simply choose a button style on the Pin-It Button page, copy the code they provide, and paste it directly into your Squarespace site.

While you can add this button to almost any page of your site, a good place to include it would be a sidebar HTML widget or the Header/Footer area so that it appears consistently across all your site pages.  

You can embed your follow button code using the steps here

Another way to add a follow button is to include it in your social profile using a Social Links widget. This will allow a Pinterest icon to appear along with other social links you may have added such as Facebook or Twitter. 

If you've not already set up a Social Links widget, you can do that using the steps here. Follow Step 3 of the guide to include your Pinterest icon as a custom profile link. 

You can download an icon from the Pin-It Button page  to use in your social profile or, you can you can right-click and download this icon below:

Once this has been added to your social profile, it will appear in your Social Links widget as in this example: 

There may be other ways you can include Pinterest in your site but we hope the above options will help you get started. To learn more about Pinterest, visit their website at Pinterest.com

Note: Squarespace does not provide support or troubleshooting for third party applications. For more information about Pinterest and additional coding resources see: Pinterest Support.

Was this article helpful?
0 out of 0 found this helpful
Adding Pinterest To Your Squarespace Site