IN THIS ARTICLE
Summary
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)
- Sign in to your Squarespace account and visit your Dashboard.
- Select Settings from the left menu, then click Advanced > Code Injection.
- 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 Shareaholic.com, and it looks something like the following: - Press Save to save the changes made to your Squarespace site.
- 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:
- Login to your Shareaholic account and select your site from the My Sites drop-down at the top of the page.
- 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.
- 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.
- Edit the look and feel of the app and click Save.
- 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:
- Copy this code to your clipboard.
Adding an In-Page App to Squarespace Pages
- 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.
- Clear any default text that appears in the input section of the new code block.
- Paste in your In-Page App HTML Code into the input section of the code block, as seen below:
- Make sure "Display Source" is not checked.
- Click Apply in the lower-right of the panel.
- Click the Save & Publish button to apply these changes to your site.
Adding an In-Page App to Blog Posts
- 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.
- Select the Advanced tab at the top of the pop up.
- 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:
- 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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var current_url = window.location.pathname;
if (current_url == '/blog' || current_url == '/blog/' || current_url.includes("offset=") ){
$('.shareaholic-canvas').filter('[data-app="share_buttons"]').remove();
$('.shareaholic-canvas').filter('[data-app="recommendations"]').remove();
}
});
</script>
Plain JavaScript version:
<script>
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);
</script>