Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Adding a Facebook Like button

Add Facebook Like buttons to your site to help visitors share your content in their Facebook friends' News Feeds. This guide demonstrates how to add custom Like buttons to pages and blog posts using Code Blocks.

The steps in this guide include using Code Injection and adding advanced code to Code Blocks. These are Premium features available in Business and Commerce plans.

Before you begin

The best way to add Facebook Like buttons depends on which version of Squarespace your site is on.

  • Version 7.1 - Version 7.1 doesn't have built-in options for adding Like buttons. Follow the steps in this guide to add them.
  • Version 7.0 - We recommend displaying Like buttons with your Share buttons instead. However, you can follow the steps in this guide if you have coding knowledge and want more control over where the button appears. If you use custom code, first disable the Facebook Share button. In the Home Menu, click Marketing, click Share Buttons, then uncheck Facebook.

Step 1 - Create a Like button

Follow the instructions in Facebook's developer documentation to generate your custom code. A window will open with your code in two fields.

Step 2 - Add the Javascript SDK code

Copy the Javascript SDK code from the first field.

Open your Squarespace site in a new tab. In the Home Menu, click Settings, click Advanced, then click Code Injection.

In the Header field, paste the Javascript SDK code. Click Save.

Note: For more help with this panel, visit Using Code Injection.

Step 3 - Add the Like button code to a page

In Facebook's developer tools, copy the code from the second field.

This code adds a Like button to a specific area of your site. You can add this to any content area using the Code Block.

Open the editor for the page or post where you'd like to add the Like button. Click an insert point and select Code from the Block Menu.

In the Code Editor, paste the Like button code. Click Save.

Note: Embedded code is sometimes disabled while you're logged in as a security measure. If you're not seeing your code, log out or view the page using your browser's Private / Incognito mode. For more help, visit Why can't I see custom code while logged into my site?

Step 4 - Add post-specific Like buttons to blog posts (optional)

You can modify the code to display a unique Like button below each of your blog posts. When visitors click this Like button, it will like the specific blog post, rather than your site as a whole.

In the Pages panel, hover over a Blog Page title, and click gear-icon next to the title to open page settings.

In the Advanced tab, paste the Facebook Like button code (from Step 3) in the Post Blog Item Code Injection field.

Replace your site URL in the code with {permalink}.

Click Save.

The_code_pasted_into_the_Post_Blog_Item_Code_Injection_box.png

The Facebook Like button will display directly after the content for each blog post.

Note: This code-based customization falls outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, since this is a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Code-based customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Was this article helpful?
46 out of 61 found this helpful
Adding a Facebook Like button