MyBB Community Forums

Hi everyone,

I made this for my forum and thought that others might find it useful as well.

This mod will add a single MyCode button above the editor to post either single tracks or playlists from sets, users or groups.

First, you'll need to create the MyCodes:

Single Track

Title: SoundCloud Track

Short Description: Embed a single track from SoundCloud

Regular Expression:

\[soundcloud\]http(s)?\://(.*?)\[/soundcloud\]

Replacement:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http://$2&color=ff6600&auto_play=false&show_artwork=true"></iframe>

Playlist (for Sets, Users and Groups)

Title: SoundCloud Playlist

Short Description: Embed a set, user or group playlist from SoundCloud

Regular Expression:

\[scplaylist\]http(s)?\://(.*?)\[/scplaylist\]

Replacement:

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http://$2&color=ff6600&auto_play=false&show_artwork=true"></iframe>

--------

Next, upload this icon:



... or your own 23 x 22px SoundCloud icon to jscripts/editor_themes/YOUR_EDITOR_THEME/images

Then add the following to editor.js:

				{type: 'button', name: 'soundcloud', insert: 'soundcloud', image: 'soundcloud.png', title: 'SoundCloud'}

			case "soundcloud":
				this.insertSoundCloud();
				break;

	insertSoundCloud: function()
	{
		type = prompt("Would you like to post a single track, or a playlist from a set, user or group? Please choose either track or playlist.", "");
		type = type.replace(/^\s+/, '').replace(/\s+$/, '');
		type = type.toLowerCase();

		while(type != "" && type != null && type != "track" && type != "playlist")
		{
			type = prompt("Sorry, that wasn't a valid player type. Please try again. Valid choices are track or playlist.", "");
			type = type.replace(/^\s+/, '').replace(/\s+$/, '');
			type = type.toLowerCase();
		}

		if(type == "" || type == null)
		{
			return false;
		}
		
		if(type == "track")
		{
			url = prompt("Please enter the SoundCloud URL.\n\nYou can find this by clicking the Share button below the track; find the WordPress Code, and copy the URL in quotes.", "http://api.soundcloud.com/tracks/example");
			url = url.replace(/^\s+/, '').replace(/\s+$/, '');

			if(url == "" || url == null || url == "http://api.soundcloud.com/tracks/example")
			{
				return false;
			} else {
				this.performInsert("[soundcloud]"+url+"[/soundcloud]", "", true);
			}

		} else {
			url = prompt("Please enter the SoundCloud URL.\n\nYou can find this by clicking the Share button below a set, or below the avatar on a user or group profile; find the WordPress Code, and copy the URL in quotes.", "http://api.soundcloud.com/playlists/example");
			url = url.replace(/^\s+/, '').replace(/\s+$/, '');

			if(url == "" || url == null || url == "http://api.soundcloud.com/playlists/example")
			{
				return false;
			} else {
				this.performInsert("[scplaylist]"+url+"[/scplaylist]", "", true);
			}
		}
	},

Use this tutorial to work out where those bits of code go.

After these edits, users can simply click on the SoundCloud icon, answer a prompt about which type of player they're embedding, and paste the URL taken from the WordPress Code section of the share dialog to post either version of the SoundCloud player.

Edit: Updated last editor.js edit to make "track or playlist" prompt case insensitive, avoid adding tags when user enters nothing but whitespace and avoid adding tags with "null" as value when user cancels prompt on iOS.