How to add a Spotify follow button to your website

Building your Spotify follower count is way more important than the clout. When Spotify sees that somebody is following your artist profile, they're more likely to recommend more of your music the user. Your tracks will start to show up in their Discover Weekly and Release Radar playlists, they'll start to get notifications about your new releases, and your tour dates will appearn in their feed. Automatically!

With that in mind, it's crucial to convert casual listeners to followers whenever you can. Spotify unfortunately discontinued their embeddable follow button, but there's a new way to add a Spotify follow button to your website. In this guide, we'll show you how to add a Spotify follow button to any website using Sonikit in just a few minutes.

Step 1: Generate your Spotify follow button

First, you'll need to create and customize your follow button. We'll be using Sonikit to create a custom button that you can connect with your artist profile. If you don't already have an account, you can create one for free.

Once your Sonikit account is set up, follow these steps to create your Spotify button:

1. Add a new patch
   
   1. Click the "Create" button in the top left of the sidebar and choose "Patch"
   2. Choose the "Follow" action
   3. Give your patch a name
   4. Paste your Spotify artist profile URL
2. Customize your design
   1. Click the "Design" tab on your new patch
   2. Adjust the the button's color, style, and choose whether to include a profile image, follower count, or use only the button
   3. 
3. Copy your Patch embed code (you'll use this in the steps below)
   1. Click the "Embed button on your new patch
   2. Copy the embed code

How to add a Spotify follow button to Squarespace

Squarespace is known for its sleek design and user-friendly interface, and it allows you to embed custom code into your site with ease. First, make sure your website is set up with a paid plan to ensure your customization options are enabled. Then follow these steps to add your Spotify follow button:

Step-by-Step Instructions

1. Log in to Your Squarespace Account:

   • Open Squarespace and log in to your account.

2. Navigate to the Page or Post:

   • From the dashboard, go to the page or blog post where you want to embed the code.

3. Edit the Page:

   • Click on the “Edit” button to enter the page editor.

4. Add a Code Block:

   • In the editor, click on the "+" icon where you want to add the code.
   • Choose the “Code” option from the menu.

5. Insert Your Code:

   • A code block will appear. You can paste your HTML, CSS, JavaScript, or other code directly into this block.
   • Ensure that you have checked the “Display Source” box if you want the code to be visible to visitors.

6. Save and Publish:

   • Click “Apply” or “Done” to save your changes.
   • Publish the page to see your embedded code in action.

How to add a Spotify follow button to Wix

Wix offers a highly customizable drag-and-drop interface that's recently gotten much easier to use. Follow these steps to add a Spotify button to your Wix website:

Step-by-Step Instructions

1. Log in to Your Wix Account:

   • Visit Wix and log in to your account.

2. Select Your Website:

   • Choose the website where you want to embed the code from your dashboard.

3. Go to the Editor:

   • Click “Edit Site” to open the Wix Editor.

4. Add an Embed Code Element:

   • Click on the “+ Add” button on the left-hand side of the editor.
   • Scroll down and select “Embed” and then choose “Embed a Widget” or “Custom Embeds.”

5. Insert Your Code:

   • A box will appear where you can paste your HTML, CSS, or JavaScript code.
   • You can resize and move the embed box to fit your design.

6. Save and Preview:

   • Once your code is in place, click “Publish” to make it live.
   • Preview your site to ensure everything looks as expected.

How to add a Spotify follow button to WordPress

WordPress is one of the most popular website-building platforms, known for its flexibility. Embedding code in WordPress can be done in several ways, depending on whether you’re using the Block Editor (Gutenberg) or the Classic Editor.

Step-by-Step Instructions (Gutenberg Editor)

1. Log in to Your WordPress Dashboard:

   • Go to your WordPress site and log in.

2. Create or Edit a Post/Page:

   • Navigate to “Posts” or “Pages” and click “Add New” or choose an existing post/page to edit.

3. Add a Custom HTML Block:

   • In the Gutenberg editor, click on the “+” icon to add a new block.
   • Search for “Custom HTML” and select it.

4. Insert Your Code:

   • Paste your HTML, CSS, or JavaScript code into the block.
   • You can preview the block to see how the code will look.

5. Publish or Update:

   • Click “Publish” to make your changes live, or “Update” if you’re editing an existing page.

Step-by-Step Instructions (Classic Editor)

1. Log in to Your WordPress Dashboard:

   • Log in to your WordPress site.

2. Edit the Post/Page:

   • Go to “Posts” or “Pages” and choose the one you want to edit.

3. Switch to the Text Editor:

   • In the Classic Editor, switch from the “Visual” tab to the “Text” tab.

4. Insert Your Code:

   • Paste your code directly into the text editor where you want it to appear.

5. Save and Publish:

   • Click “Update” or “Publish” to make your changes live.