How to Embed Bandcamp in Squarespace for Free
If you are a musician or band and have a Squarespace website, this tutorial will show you how to embed Bandcamp on Squarespace. This is a great option for musicians looking for an audio player that links directly to Bandcamp. In addition to embedding Bandcamp, Squarespace offers an audio block, video block, and Soundcloud block.
If you want to embed a Bandcamp player in Squarespace, all you have to do is copy the iframe code they provide and place it in an “Embed Block”. This is available for free as part of the personal plan. The video below walks you through this simple process.
Additionally, if you are noticing your Bandcamp player does size correctly on smaller screens or mobile, this video shows you how to correct those issues. It will ensure your Bandcamp player looks great on all screen sizes!
-
0:01 We are going to add a Bandcamp and embed block on our Squarespace website and make sure it's responsible for all page sizes. So first we want to go ahead and get the embed code.
0:11 I went to the Stillhouse Junkies Bandcamp page They're my sister's band. I highly recommend you check them out on Google. Under every single Bandcamp album and single is a share and embed code So we're going to click on this and click on embed this track. You can choose from three different sizes.
0:31 The information we're going to go over today is going to work on all three. We're going to pick this block for now.
0:37 If you want to change the colors you can. For now, you can leave all of the rest of this as is.
0:43 I'm going to go ahead and click in here and do “command + C” on my Mac to copy. And we're going to come back over to Squarespace.
0:51 I'm going to click on Edit, scroll down. I'm going to hit the G key so I can see my grid.
0:58 We're going to go ahead and add an embed block. Now, you can use a code block but it requires a business plan or higher and the embed block works great.
1:08 So, I'm going to go ahead and put this code in. We're going to go to “code snippet” and “embed data” and I'm going to go ahead and do “Command + V” to paste that.
1:19 Now, we're going to pretend that this video is multiple videos. I want to go ahead and put several of these on the page so that we can mock up a layout that might be similar to something that you would put on your website.
1:34 So, let's say we have three different Bandcamp embeds. I want to show you what happens if we don't take this additional step.
1:40 So, I'm going to go ahead and hit save and exit. And as I exit out of editing mode, the screen size is going to become smaller.
1:49 And this might be equivalent to a tablet or if someone was viewing this on a very small laptop, you can see these are overlapping.
1:59 So I want to show you how to make sure this looks good on all screen sizes and on mobile. So we're going to go ahead and click edit and we're going to come back into these embed blocks.
2:11 I'm going to click the edit button on the embed block. And basically, we're going to come back to our code.
2:18 Bandcamp, when you export this, I frame content. It says, keep it at 350 pixels. It gives a specific width, which is great, except it doesn't work on all screen sizes.
2:30 So instead, we're going to say we're going to take 350 pixels. And instead, we're going to say 100%. And what we're telling the computer is that instead of always keeping it at 350 pixels, make it 100% of whatever this frame is.
2:48 So I'm gonna go ahead and do this on the rest of these. So we're just gonna click edit, and we're gonna replace this with a 100%, and I'm just clicking off the screen to exit.
3:02 So far, it looks the same on my screen, but when I exit out of here and size down, you're going see a difference.
3:09 So we're going to save that and we're going to exit. And now when we scroll down on a smaller screen size, you'll see these fit perfectly.
3:21 However, I want to show you one more thing. This looks good on a super small screen size on mobile and on a medium screen size, however, on a large screen size we need to take this one step further.
3:33 So, if we were on a larger screen size, you'll see some of this information down here the bottom starts to get cut off.
3:41 So the way we can fix that is we actually can make the height a little bit bigger. And I'm going to go with 500 pixels and you’l see that brought back some of that information.
3:53 Now the height isn't as big of a deal in the sense that you can always scroll. So, I'm not worried about this on mobile or other screen sizes, but we want to make sure that on larger screens all of this is showing.
4:12 All right, and we'll go ahead and hit save. And then we'll double-check it on the rest of the screens. So I'm going to exit.
4:20 I'm actually going to come back to my normal screen sizing. You'll see it looks good on a small device. It still looks good on a bigger screen.
4:30 It still looks good if I was viewing this on a very large display. And then we of course need to check mobile.
4:37 So we're going to click this little mobile icon and here we go—it looks fantastic on mobile as well.
Table of Contents Show
How to Embed a Bandcamp Player in Squarespace
1: Copy the Bandcamp Code
2: Choose “embed block” from the Squarespace blocks
3: Choose the Code Snippet option (not link) > Embed and paste your code in
How to fix the Bandcamp block dynamically so it looks good on all screen sizes (including mobile)
1: Change the “width” from “350px” to “100%”
2. Change the “height” from “440px” to “500px”
Frequently Asked Questions
Does Squarespace have a media player?
Yes, there are multiple options available. In addition to their Audio player (audio block), you can embed Soundcloud, video, or any type of media that gives you iframe content, such as Bandcamp.
Audio Player
This block allows you to upload an mp3 or mp4. The file must be 160 MB or smaller. This is a great option if you want to feature a short song or snippet of your work directly on your website.
Soundcloud
If you use Soundcloud, there is a dedicated Soundcloud block that allows you to connect directly with your account. This is the preferred method for Soundcloud embeds.
Video Block
The video block allows you to put in a YouTube or Vimeo link. This can be a great alternative for hosting longer songs and media files. You can also upload your video directly to Squarespace. The Personal Plan allows for up to 30 minutes of video. I recommend hosting on a third party platform such as YouTube or Vimeo. You can publish your videos as “unlisted” if you don’t want them to show up anywhere except your website. When you host videos on a YouTube or Vimeo, they won’t load until someone clicks “play”. This will keep your page load speed time down and help with conversions and SEO.
Bandcamp and Other Embeds
As mentioned in this post, you can embed Bandcamp on your Squarespace pages. The iframe code they provide works in an Embed block or Code block. Use the Embed block if you are on a personal plan.
How do I add a Bandcamp icon to Squarespace?
Currently, Squarespace doesn’t support a Bandcamp icon in their social media block. However, you can add the icon as an image and link to your profile or customize the icon with CSS.
If you get stuck and need some help, get some Squarespace help, or check out my flexible and affordable music website services.
