Adding the Facebook “Like” and “Share” button?

Unfortunately, Squarespace does not currently offer the ability to have share buttons added to non-blog pages. I would love to have this ability on pages I create, specifically Facebook, Pinterest and Twitter.

Twitter is the easiest of the bunch, requiring a simple HTML link added to a Code Block. Pinterest is not as straight forward. Facebook is the same. Regarding Facebook specifically, I would like to add the Like / Share button found here:

However, when using the tool to generate the code, it results in two blocks of code for HTML5. The first batch of code has the following instruction: “Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.”

The second batch of code has this instruction: “Place the code for your plugin wherever you want the plugin to appear on your page.”

My question is: where do these batches of code go in Squarespace 6? I’m assuming the second batch goes in a Code Block where you want it to appear. But what about the first? I’ve tried pasting it into every available space for code and nothing is working.

Any help would be greatly appreciated. Thanks!

asked Apr 25 '13 at 22:26 by deardorff 116125


I'd think you paste the first bit of code in the Header Code Injection Point.

answered Apr 25 '13 at 23:37 by kale 6.7k610


@kale, this worked! I still need to test how it links but the buttons appear on the page preview so this is certainly progress. Thank you so much for chiming in.

(Apr 30 '13 at 03:40) deardorff deardorff's gravatar image

UPDATE: The easiest way that I've included a Facebook like/share button to individual blogposts goes as follows.

  1. Go to blog settings (upper righthand corner of dashboard, next to Add Post)
  2. Go to "Advanced"
  3. Scroll down and go to Post Blog Item Code Injection
  4. Paste the code below in the box

<div class="fb-like" data-href={permalink} data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

If anyone else figures out how to do this with a twitter button, please let me know.

answered Oct 22 '14 at 01:40 by donutlover 913


Excellent! Thanks a lot @donutlover

(Nov 26 '14 at 00:34) mdmclean88 mdmclean88's gravatar image

Still working on a way to do very similar and simply for a Gallery or even just at the bottom of a regular page.

(Nov 26 '14 at 00:35) mdmclean88 mdmclean88's gravatar image

@donutlover Sorry the code you provide doesn't work for me. I did exactly what you describe but nothing appear neither on my blog page or on my blog post page. Can you give me a screenshot of where and how it should appear please? :)

(Jul 06 at 05:28) VictorM VictorM's gravatar image

There should be a way to do this in a way that doesn't require creating custom Code blocks for every page.

I think the jQuery append/prepend method would allow insertion consistently.

Something like:

<script  src="//"></script>
$( insertSocial );
function insertSocial() {
  var insertionCode= $( "Like button HTML goes here" );
  $('#headerWrapper').append( insertionCode );

NB - I haven't tested that – just thinking out loud.

The code would drop whatever you define as the Like button HTML immediately after the Headerwrapper. #headerWrapper could be replaced by any other unique reference in the HTML. A conditional could ensure that it only appears on certain pages.

The advantage of this approach is that the code only needs to go in the sitewide injection point and is thus easier to maintain.

answered Apr 30 '13 at 06:34 by silvabokis 10.0k2613


If you want to add the the addthis/ individual share buttons to the bottom of each individual blog post:

  1. Get the code from or any share button code.
  2. Make sure your in your blog dashboard.
  3. Click "Blog Settings" on the right, next to "add post."
  4. Click advanced.
  5. Scroll to bottom and paste code in "Post Blog Item Code Injection."
  6. You're welcome!

PHEW, it took me months to find something easy, that works!

ALSO- to make sure the buttons pull content from your individual posts, replace your url in any code with "{permalink}" instead. Edit the first line of your code to look like:

 <div class="addthis_toolbox addthis_default_style " addthis:url="{permalink}">

answered Jan 30 '14 at 17:08 by donutlover 913

Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: Apr 25 '13 at 22:26

Seen: 18,348 times

Last updated: Jul 06 at 05:28

Established 2004 Handmade in NYC