Installing Shareaholic on Squarespace



The following tutorial will help you install Shareaholic on Squarespace:

If you have not already signed up for Shareaholic, check out the Getting Started with Shareaholic Guide before following the instructions below.

Install Shareaholic Setup Code (Shareaholic.js)

  1. Sign in to your Squarespace account and visit your Dashboard.
  2. Select Settings from the left menu, then click Advanced > Code Injection. squarespace_settings_flow.png
  3. Paste your Shareaholic Setup Code into the text area beneath the Header section.

    As a reference, your site's Shareaholic Setup code can be found in the "Installation" tab of your site's Settings on, and it looks something like the following: html-setup_code.png
  4. Press Save to save the changes made to your Squarespace site.
  5. Congratulations - Shareaholic is now installed on your website!

Shareaholic In-page Apps are special apps that let you place them exactly where you want in your website layout or template at the location where the app should be displayed. In-Page Share Buttons, In-Page Related Content and In-Page Follow Buttons are examples of Shareaholic In-Page apps.

If you have not already created an In-Page Shareaholic App, check out the Installing an In-Page Shareaholic App Guide before following the instructions below.

First, create a new In-Page App instance (for example - Share Buttons, Follow Buttons, Related Content) in your Shareaholic dashboard:

  1. Login to your Shareaholic account and select your site from the My Sites drop-down at the top of the page.
  2. On your 'Apps' dashboard, under 'Social Sharing', you'll find the Share Buttons section. Similarly, you'll find the Related Content and Follow Buttons sections. Click New In-Page App.


  3. Give a name to this new app location. Choose a name which makes sense for you. Something like 'Post Above Content' would be a good name.
  4. Edit the look and feel of the app and click Save.
  5. In the same window, Click on the Code tab. This is where you'll find the HTML code for your app, which you'll insert into your Blogger template:

    You can also quickly get to the code using this short cut:

  6. Copy this code to your clipboard.

Adding an In-Page App to Squarespace Pages

  1. Add a Code Block where you want the app to appear on your page. SquareSpace Support has a detailed video listed here on how-to which we recommend reviewing.
  2. Clear any default text that appears in the input section of the new code block.
  3. Paste in your In-Page App HTML Code into the input section of the code block, as seen below:


  4. Make sure "Display Source" is not checked.
  5. Click Apply in the lower-right of the panel.
  6. Click the Save & Publish button to apply these changes to your site.

Adding an In-Page App to Blog Posts

  1. In the left menu of your Squarespace dashboard, click on Pages, then click on the Settings cog that appears when you hover over your Blog name.


  2. Select the Advanced tab at the top of the pop up.
  3. Paste in the In-Page App HTML Code into the Post Blog Item Code Injection text area, adding the parameters data-title="{title}" and data-link="{permalink}" as seen below:


  4. Click Save in the lower-right of the window.

Excluding In-Page App from Blog Index

If you would like to exclude In-Page Apps from the Blog Index Page (the page that lists your Blog posts with short excerpts), add the following code to "Page Header Code Injection" box:


jQuery version:

<script src=""></script>
$(document).ready(function() {
  var current_url = window.location.pathname;
  if (current_url == '/blog' || current_url == '/blog/' || current_url.includes("offset=") ){

Plain JavaScript version:

  function ready() {
    var current_url = window.location.pathname;
    if (current_url == '/blog' || current_url == '/blog/' || current_url.includes("offset=") ){
      var elements = document.querySelectorAll('.shareaholic-canvas');
      elements.forEach(function(el) {
        if (el.getAttribute('data-app') == "share_buttons" || el.getAttribute('data-app') == "recommendations") {
          el.parentNode.removeChild(el); // remove in-page app div
  document.addEventListener("DOMContentLoaded", ready);

Additional Resources:

Was this article helpful?
6 out of 9 found this helpful