With the SoundCloud embed block for WordPress, you’ll be able to add an album, playlist or monitor to your submit or web page. Embedding SoundCloud content material in Gutenberg offers you quite a lot of choices for a way the block seems to be and features. In any other case, for those who merely copy and paste the SoundCloud hyperlink into the traditional editor, you might be able to showcase music, however your choices might be significantly restricted in terms of customizations and web page design.
On this article, we’re going to stroll you thru the way to embed a SoundCloud album, playlist or monitor on a WordPress submit or web page. We’ll additionally cowl finest practices, FAQs and suggestions that you must know.
Earlier than we get going, do be aware that whilst you don’t want a SoundCloud account to embed content material from the service, you will have to decide on public tracks – personal tracks can’t be embedded. Additionally, you should be utilizing the Gutenberg block editor so as to add the SoundCloud embed block. (We’ll cowl a few alternate options, although.)
How one can Embed SoundCloud Content material in WordPress
First, we’ll go over the way to add a SoundCloud monitor to a WordPress submit or web page. Then, we’ll rapidly cowl the way to add an album/playlist, as the method is much like including a monitor.
How one can Embed a SoundCloud Observe in WordPress
Go to SoundCloud and discover the monitor that you simply wish to embed in WordPress. Click on the monitor to open it by itself web page. Copy the URL from the handle bar on the prime of the web page.
Go to WordPress and create or edit a submit or web page. In the primary physique of the web page, you must see a Plus Signal. If you happen to don’t see one, click on someplace within the physique of the web page, and it ought to seem.
Click on the Plus Signal to convey up the block selector. Enter “SoundCloud” within the Search field, after which select the related block. The SoundCloud embed block will now be added to your web page or submit.
Paste the SoundCloud handle you copied into the sector that claims Enter URL to Embed Right here… Click on Embed. You’ll now see one thing like this:
To see the way it will look in your web site as soon as it’s stay, click on Preview > Desktop > Preview in New Tab on the top-right of the web page.
You’ll be able to add a caption for those who’d like. There’s a devoted space beneath the embedded monitor to enter a caption, together with formatting choices.
How one can Embed a SoundCloud Album or Playlist in WordPress
Embedding an album or playlist from SoundCloud is similar to including a monitor. In SoundCloud, navigate to the album or playlist you wish to add and click on it to open it in its personal web page. Copy the URL from the handle bar.
Within the SoundCloud embed field in WordPress, paste the handle bar into the devoted house. Click on Embed.
The result’s mainly the identical whether or not you’ve added an album or a playlist. The album or playlist’s cowl artwork will present in the primary a part of the embedded hyperlink, and beneath might be an inventory of tracks which you can scroll by way of. As you hover over the tracks and scroll, the primary cowl artwork will get smaller to show extra of the tracklist. On this screenshot, the highest embed is a playlist, whereas the underside embed is an album.
The Embed Error Message
If you happen to enter one thing that’s not a hyperlink, that’s a damaged hyperlink or that goes to content material that may’t be embedded, you’ll get an error message that appears like this:
You’ll be able to strive the hyperlink once more or click on Convert to Hyperlink to see if that makes a distinction. If neither choice works, although, you might have to embed totally different content material.
SoundCloud Embed Block Choices
There are two totally different areas the place you’ll discover choices for the SoundCloud embed block: Alongside the highest of the bar and within the right-hand sidebar. Let’s go over what they’re.
Toolbar Choices
When you’ve added content material to the embed block, clicking it is going to convey up an choices toolbar alongside the highest. It seems to be like this:
From left to proper, right here’s what the icons imply:
- Remodel To: You’ll be able to change the SoundCloud embed block right into a paragraph, column or group. The one choice to consider is the Group one as a result of it enables you to change the background colour of the block. If you happen to don’t care about that, depart it alone – it’s slightly tough to make use of.
- Drag: Hover over the Drag icon, and your cursor will flip into slightly hand. Left-click and drag the embed block wherever you wish to place it on the web page.
- Transfer Up and Transfer Down: The Up Arrow will transfer the block up one house, and the Down Arrow will transfer it down one house.
- Change Alignment: Align the embed block left, middle or proper. Aligning it left or proper will make it smaller. Relying in your theme, you may additionally have full-width and wide-width choices, which can make the embed block bigger.
- Edit URL: Change the SoundCloud URL to embed a unique album, playlist or monitor.
- Choices: The final icon brings up a drop-down menu with further choices.
The Extra Choices Menu
That choices drop-down has a handful of easy-to-understand choices. From prime to backside, they’re as follows:
- Conceal Extra Settings: Conceal (or present) the settings sidebar on the fitting.
- Copy: Copy the block and paste it wherever you want.
- Duplicate: Duplicate the block, which can make a replica of it immediately beneath the unique one.
- Insert Earlier than: Add a block earlier than the chosen one.
- Insert After: Add a block after the chosen one.
- Transfer To: This may present a blue bar, which you’ll be able to transfer across the web page utilizing your keyboard’s arrow buttons. When you’ve positioned it the place you need it, click on Enter/Return to maneuver the embed block to that place.
- Edit as HTML: Edit the block’s HTML code.
- Add to Reusable Blocks: Add the chosen block to your checklist of reusable blocks. This allows you to simply add it to a different submit or web page or to a different part of the present submit or web page.
- Group: Just like the Group choice talked about above, this allows you to change the background colour of the block.
- Take away Block: Delete the block from the web page.
Sidebar Choices
The fitting-hand sidebar has two settings: Media Settings and Superior. Let’s go over them.
Media Settings
If you happen to toggle on Resize for Smaller Units within the Media Settings part, the embed block will routinely resize relying on the scale of the display. That is particularly necessary for individuals viewing your content material on a cell gadget, so it’s a good suggestion to allow this selection.
Superior
Within the Superior part, you’ll be able to add a CSS block to the chosen block. This implies you’ll be able to customise and elegance the block the way you’d like (if you already know CSS, that’s).
Finest Practices and Suggestions for Utilizing the SoundCloud Embed Block Successfully
Fast-Add the Embedded Content material
If you already know precisely the place you need the embedded SoundCloud content material to go, you’ll be able to merely paste the URL onto the web page. A SoundCloud embed block will routinely be created for you, with all the similar choices as for those who have been to manually add the block.
Embed SoundCloud Content material Utilizing the Traditional Editor
If you happen to choose working with the WordPress traditional editor, you’ll be able to nonetheless embed SoundCloud content material. You’ll simply copy and paste the hyperlink wherever you need it within the physique of the submit or web page. This may routinely embed the content material. Nevertheless, you gained’t have the identical toolbar choices as with the Gutenberg block.
Use the Embed Code for Completely different Customizations
One other method to embed SoundCloud content material on WordPress is to make use of the embed code. Go to the SoundCloud content material you wish to embed, and click on the Share button.
On the pop-up, you may make adjustments to how the embedded content material will look. On this instance, I modified the play/pause button to gentle blue and adjusted the peak of the embed field.
While you’re carried out, copy the embed code after which paste it into an HTML block in WordPress. You’ll be capable to see what the content material will seem like once you preview the web page.
FAQs In regards to the SoundCloud Embed Block
Does SoundCloud solely have music?
Nope! SoundCloud additionally has podcasts. Embedding a podcast is identical as embedding a music monitor. Copy the URL after which paste it into the embed field. You’ll be able to embed a single episode, or if you wish to showcase the podcast in its entirety, go to its principal web page on SoundCloud and duplicate/paste the URL.
Can I add a number of tracks to the SoundCloud embed block?
When you have a number of songs or podcast episodes that you simply wish to characteristic in your WordPress web site, you’ll be able to create your personal playlist after which embed it. Know that every monitor’s privateness settings will carry over, even for those who make the playlist public (which you’ll must to be able to embed it). That implies that for those who add a personal monitor to a public playlist, that monitor will nonetheless stay personal.
https://assist.soundcloud.com/hc/en-us/articles/115003449787-Creating-and-adding-tracks-to-a-playlist
Can I select the place a SoundCloud monitor begins taking part in?
Sadly, no. While you click on the Share button on SoundCloud content material, a window pops up. On the backside is an choice for the place to start out taking part in the monitor. Nevertheless, once you copy and paste the related hyperlink into the embed block, it gained’t really begin the monitor at that half. We tried it a couple of other ways, however no luck.
Wrapping Up
Integrating music or podcasts along with your web site could make the expertise extra precious and enhance engagement. When you have your personal content material otherwise you wish to share another person’s, the SoundCloud embed block is the best method to try this with essentially the most customization and structure choices attainable. You’ll be able to add an album, playlist, podcast or music monitor to your web site and let guests pay attention with out being redirected someplace else. And in the event that they wish to discover extra, they’ll simply click on by way of to the content material on SoundCloud.
You may additionally be interested by our article with the 11 finest audio participant plugins for WordPress. Test it out!
Featured picture by apghedia on Shutterstock.com
The submit How one can Use the SoundCloud Embed Block appeared first on Elegant Themes Weblog.