How to create a SoundCloud widget SoundCloud allows you to share an audio recording of a presentation, speech, song or event. It is the equivalent for audio that YouTube is for video. The UON SoundCloud account can be found at https://soundcloud.com/university-ofnewcastle. To request an upload of an audio file to SoundCloud, refer to the Marketing Resource Centre instructions or contact onlinemarketing@newcastle.edu.au. Once you have an uploaded SoundCloud audio file you would like to include in your page content, follow the below instructions to create a SoundCloud widget in your page s sidebar. You can also embed a SoundCloud audio file in your page content by following the instructions in the Web Support Portal. Embedded within page content Sidebar widget Creating a SoundCloud Widget Last Updated: 17/11/2015 1
1. Finding the SoundCloud Embed Code 1. Navigate to UON s SoundCloud account at https://soundcloud.com/university-ofnewcastle. 2. Open the SoundCloud file you wish to include in your page content and click on the Share button. 3. In the pop up window, select the Embed tab and copy all of the text under Code & preview. This is the file s Embed Code. Paste this in a text document for your reference. <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http s%3a//api.soundcloud.com/tracks/209792919& amp;auto_play=false&hide_related=false &show_comments=true&show_user =true&show_reposts=false&visual=tr ue"></iframe> Creating a SoundCloud Widget Last Updated: 17/11/2015 2
2. Creating a sidebar widget You will need to have a sidebar folder set up for your page. If you need to create a sidebar folder, refer to the instructions in the Web Support Portal. 1. Create a new standard page asset saved under your page s sidebar folder. Enter a name for your reference (e.g. SoundCloud Widget) and select No for Show in Menu. 2. Click Create. 3. Click Edit. 4. Navigate to the Linking screen of your new standard page asset. 5. In the Link Value box, type feature in lower case. 6. Click Save. Creating a SoundCloud Widget Last Updated: 17/11/2015 3
7. Navigate back to the Content screen of your standard page asset. 8. Click on the Setting Wheel of the WSYSIWYG Content Container. 9. In the Edit Container Properties pop up box, change the Styling Presentation and Content Type to Raw HTML. Click Set Properties. 9. Click Save. Your new Raw HTML Content Container will be yellow. Creating a SoundCloud Widget Last Updated: 17/11/2015 4
10. Copy the following into your Raw HTML Content Container: <div class="box-3 feature"> <h3>heading/title FOR WIDGET/FILE</h3> EMBED CODE <p>caption/description</p> </div> For example: <div class="box-3 feature"> <h3>jeff Julian s interview with ABC's Rob Virtue</h3> <iframe width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tr acks/201172850%3fsecret_token%3ds- 8n1rv&auto_play=false&hide_related=false&show_comment s=true&show_user=true&show_reposts=false&visual=true"> </iframe> <p>meet Jeff Julian and his vision for creative industries in Newcastle.</p> </div> Heading/Title Embed Code Caption 10. Adjust the height value to 150 (or to your desired value), by deleting and re-typing the value in the embed code. You can also adjust the width by percentage. Creating a SoundCloud Widget Last Updated: 17/11/2015 5
10. Click Save. 11. Navigate back to the page your widget will be appearing on to Preview your SoundCloud Widget. Be sure to Apply for Approval for all of the assets you have created and edited. Creating a SoundCloud Widget Last Updated: 17/11/2015 6