I'm Ben. 20. @BennSt

BA Media & Communication at Birmingham City University. I make websites and design for print, produce and present radio as well as take photos. Among other things.

Hear me every Wednesday 2-4pm on Scratch Radio.

More? benstones.net
Facebook  /  Twitter  /  Flickr.

 

How to embed Soundcloud (and other nice things) into Mahara…

No doubt you’re as stressed out trying to use Mahara as I am, and the thing that was annoying me the most was the fact that I couldn’t embed any sort of audio into my “view”. Mahara wasn’t having anything - native support for mp3 files or embedding a lovely Soundcloud player.

I was resigned to the fact that I would have to just put mp3 files onto Mahara for people to download - which frankly is a crap idea. But, never fear, because your friendly web specialist has found the bug that was restricting embedding Soundcloud and other players into your Mahara view.

Simply follow these simple steps to embed a Soundcloud player, Vimeo video, Flickr slideshow or any other form of embeddable media into your view. (In theory, this could also be used to embed an entire website into your Mahara!)

Embedding nice stuff into a Mahara view…

1. Go to the source of whatever you want to embed into Mahara… I’ll be embedding a Soundcloud player into my view.

2. Then grab the embed code of whatever you want to embed - this can usually be found somewhere around a share button.

On Soundcloud, click ‘Share’ at the top right of your player and then copy the ‘Embed code’ from the box that appears…



3. Now you need to edit the embed code before you put it into Mahara - to do that open either Notepad on Windows (NOT WordPad!!) or on Mac you need to use a program like Taco HTML Editor (NOT TextEdit!!).

I’m using Taco on Mac so the first step is to remove anything that it puts in automatically for you. Then copy the code straight into the document…



4. It’ll look like a mess, but honestly trust me on this one. Within the text, you need to find anywhere were the width of the object is specified - circled in red on the example below.

This bit is really important, Mahara can’t handle the fact that Soundcloud adjusts to wherever you put it’s player - using a width of 100% the player will change it’s width for wherever you embed it. Instead Mahara needs you to specify the width.

If you’re using 2 equal width columns for your Mahara view you need to change the width in all instances to 525 - this is the exact width of my Mahara columns…



5. Now you need to save this file onto your computer in order to upload it to Mahara. When saving, call it something like ‘soundcloud.html’ - making sure that you add the ‘.html’ extension (otherwise you’ll kill Mahara).

Using both Taco and Notepad you need to make sure the file type is set to ‘Plain Text’ and then add the ‘.html’ bit on the end of the name of your file…



6. Next, we need to put it into Mahara - so head to your view and start editing your content. Under the ‘Files, Images and Video’ tab you need to drag the ‘Some HTML’ widget into your view…



7. This will open up a configuration box. Give your block a nice title and then click ‘Browse’ to go and find the soundcloud.html file you’ve just created and saved onto your computer…



This will then automatically upload to your Mahara view and all you need to do is click ‘Save’ at the bottom of the box when it’s finished uploading!

8. And there you have it, one Soundcloud player embedded straight onto your Mahara view! This process can be replicated for anything that uses some sort of HTML code to embed itself into a webpage - so Vimeo videos, the Flickr slideshows and so on…



And there you have it, it’s as simple (ish) as that. Don’t get me wrong, this isn’t me advocating Mahara, that’s a pretty hefty work around when Mahara is supposed to be easy to use!

If you’re thinking about using Mahara to send your CV and portfolio off to clients, think again and go have a look at Flavors.me - it will, without all this hastle, draw in content from Soundcloud, LinkedIn, Twitter, blogs and a million other places and even make it look all nice. You can see my Flavors page at flavors.me/bennst to see what it’s all about!

PS. sorry the picture’s aren’t overly clear… my fault. Hopefully they illustrate the point well enough!

  1. benstones posted this