Add SoundCloud To Your EverWeb Website!

Modern media is now one of the major ways in which we entertain ourselves: images, movies and audio are key ways of captivating global audiences and whilst growing a product’s user base. In this blog post we’re going to look at popular music sharing and audio distribution app, SoundCloud, and how you can integrate it in to your EverWeb created website.

All About SoundCloud
SoundCloud launched in 2007 and you can use it for adding your own music, or other audio such as spoken word, and for music sharing, streaming and audio distribution. Globally, SoundCloud has over 175 million users per month, and is available on multiple platforms such as The Web, iOS, Android, Sonos, Chromecast and Xbox One. The platform has both free and tiered paid for subscriptions and is designed with music creators and music consumers in mind.

integrating music or other audio based work such as audio books, speeches, sound effect etc. is easy to do with EverWeb. There are two methods that you can use: Integrating using EverWeb’s HTML Snippet Widget or using EverWeb Garden‘s SoundCloud Player widget. In the examples below, we have assumed that you already have a SoundCloud account and have uploaded the track(s) that you want to integrate in to your website…

SoundCloud Integration with EverWeb’s HTML Snippet Widget
To integrate SoundCloud using the HTML Snippet widget:

1. Log in to SoundCloud. In SoundCloud profile you’ll find your track listings.
2. Find the track you want to add in to your EverWeb site.
3. Click on the ‘Share’ button which you’ll find below the track’s waveform.
4. You now have three options to choose from: Share, Embed or Message.
5. Select ‘Embed’.
6. If you have a Basic SoundCloud plan, you can change the ‘Play’ button color and enable automatic playback.
7. If you have a Pro Unlimited plan, in addition to the Basic plan features you also have a mini-player option available as well as options to show comments, recommendations and SoundCloud overlays..
8. Select the options you want to include then click in the Code Box and make sure all of the code is highlighted before copying it to the Clipboard.
9. Now that the code is copied to the Clipboard, go to the page in your EverWeb site where you want to embed your SoundCloud track.
10. Click on the Widgets tab and drag and drop the HTML Snippet widget on to the page.
11. Click inside the ‘HTML Code’ box then paste the code in from the Clipboard.
12. Always remember to press the ‘Apply’ button once you have added the code, or if you have modified the code. The page will then update in EverWeb’s Editor window.

<liTo finish, click on the Preview button so you can test that the code works properly.

SoundCloud Integration with EverWeb Garden’s SoundCloud Player Widget
To integrate one of your SoundCloud tracks in to a page in your EverWeb site using EverWeb Garden’s SoundCloud Player widget:

1. First go to the EverWeb Garden site and download the SoundCloud Player widget to your computer. Please note that you may have to sign up to be able to download all of EverWeb Garden’s widgets free of charge to your computer.
2. If you have not already installed EverWeb Garden’s widgets in EverWeb, go to the Widgets tab in EverWeb then drag and drop the downloaded folder containing the widgets on top of the widgets you see in the Widgets tab. EverWeb will automatically install the widgets for you, all you need to do is to follow the instructions.
3. Once you have installed the EverWeb Garden widgets either scroll down to the SoundCloud widget, or use the Widget tab’s Search Box and enter ‘SoundCloud’.
4. Drag and drop the widget on to the page from the Widgets tab.
5. Now log in to SoundCloud and go to your track listings in your profile.
6. Find the track you want to add in to your EverWeb site.
7. Click on the ‘Share’ button which you’ll find below the track’s waveform.
8. You have three options to choose from: Share, Embed or Message.
9. Choose the ‘Share’ option to get a URL Link for the track. The link will be copied to the Clipboard.
10. Go back to the page in EverWeb where you have added your SoundCloud widget and paste in the URL Link in to the ‘Enter URL’ field.
11. You now have a number of options that you can choose from directly in EverWeb e.g. you can set the Play button color, Show or hide Buy, Share and Download buttons, you can show or remove the track’s artwork, show or hide the track’s play counter and opt in or out of having only one track will play at one time.
12. Once you have selected the options you want to use, Preview the page and test before publishing your site.

Which Widget Should You Use?
As you have just read, there are two easy ways of integrating SoundCloud tracks in to your EverWeb made website, but which way is best? Well that really depends on the on-going needs of your website. If your site is ‘static’ in terms of look and feel then you may want to use EverWeb’s HTML Snippet widget. Alternatively, there may be options that you can only apply to your track via the SoundCloud app itself, thus negating the use of the EverWeb Garden widget.

Conversely, if you think that you will be changing the look and feel of your website on a regular basis, then the SoundCloud Player widget form EverWeb Garden is probably the way to go as you don’t need to go back in to SoundCloud to update your track’s settings and regenerate your code and re-apply it in EverWeb. If you have multiple tracks in your site the EverWeb Garden widget may well save you a lot of time and effort when you’re updating your site!

At the end of the day, how you decide to implement SoundCloud in EverWeb is down to how often you update your site and often you need to change the options that you use for your SoundCloud track.