Adding SoundCloud Content to Squarespace
TL;DR:
- You can embed SoundCloud tracks, playlists, and profiles directly into Squarespace pages
- Mobile users can listen in their browser without needing the SoundCloud app
- Two ways to add content: paste the URL or use embed code for more control
- Automatic playback and custom sizing options are available
SoundCloud blocks work well for showcasing music and audio content on your site. They're perfect for sharing tracks, displaying playlists, or promoting profiles. Keep in mind these blocks are designed for music rather than podcasts – for podcast content, you'll want to use audio blocks instead.
Adding a SoundCloud Block
Open your page or post editor, click 'Add Block', then select 'SoundCloud'. Click the pencil icon to configure your new block.
You have two options for adding content to your SoundCloud block.
Using a URL
This is the simplest method. Find the SoundCloud track, playlist, or profile you want to showcase, copy its URL, and paste it into the SoundCloud block settings. If the link works, you'll see a "Successfully Located" confirmation message.
Using an Embed Code
For more control over how your content appears, use SoundCloud's embed code. Go to your chosen track on SoundCloud, click 'Share', then 'Embed'. Copy the embed code and paste it into your Squarespace SoundCloud block settings.
Embed codes give you access to features like automatic playback that aren't available through the URL method.
Setting Up Automatic Playback
If you want your track to start playing when visitors land on your page, you'll need to use the embed code method. In SoundCloud's embed options, check 'Enable automatic play' before copying the code. Then paste this autoplay-enabled code into your Squarespace block.
Adjusting Block Size
You can resize your SoundCloud blocks to fit your page layout. Adjust the width by adding spacer blocks on either side, or change the height using the cropping handle that appears when you select the block.
FAQs
Can I customize how SoundCloud blocks look on my site?
The basic URL method doesn't offer appearance customization. However, using embed codes gives you more control if you're comfortable working with code.
How do I make a SoundCloud track play automatically?
Enable automatic play in SoundCloud's embed settings, then use that specific embed code in your Squarespace block rather than just the URL.
Can I resize SoundCloud blocks to fit my page better?
Yes. Use spacer blocks to adjust the width and the cropping handle to change the height.
Jargon Buster
Embed Codes: Snippets of code from platforms like SoundCloud that let you display their content on your website with specific settings and controls.
Automatic Play: A feature that starts playing audio or video content as soon as a webpage loads.
Spacer Blocks: Design tools that help you adjust spacing around elements on your page.
Wrap-up
Adding SoundCloud content to your Squarespace site is straightforward whether you use URLs or embed codes. The embed code method gives you more control over features like automatic playback and custom sizing. Take time to adjust your blocks so they fit well with your page layout – this makes a big difference to how professional your site looks and sounds.
Ready to level up your Squarespace skills? Join Pixelhaze Academy for in-depth tutorials and expert guidance.