Wordpress Spotify Embed

spotify-embed.css

/* Store in your theme under admin/assets/css or update spotify-embed.php */

.spotify-embed-track {
	width: 100%;
	margin: auto;
}

	.spotify-embed-track label > span {
		display: block;
		float: left;
		width: 100px;
		text-align: right;
		line-height: 23px;
		margin-right: 10px;
	}
	
	.spotify-embed-track label > input {
		width: 200px;
	}
	
	.spotify-embed-track .search-results {
		height: 280px;
		border: 1px solid #DFDFDF;
		border-radius: 3px;
		margin-top: 20px;
		overflow: auto;
	}
	
		.spotify-embed-track .search-results > p {
			margin: 0;
			padding: 10px;
		}
	
		.spotify-embed-track .search-results > ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
			
			.spotify-embed-track .search-results > ul > li {
				clear: both;
				margin-bottom: 0;
				border-bottom: 1px solid #F1F1F1;
				color: #333;
				padding: 4px 6px;
				cursor: pointer;
				position: relative;
			}
			
			.spotify-embed-track .search-results > ul > li:nth-child(even) {
				background-color: #FCFCFC;
			}
			
			.spotify-embed-track .search-results > ul > li:hover {
				background: #EAF2FA;
				color: #151515;
			}

spotify-embed.js

/* Store in your theme under admin/assets/js or update spotify-embed.php */

jQuery(document).ready(function($) {

	var $spotify_search = $('.spotify-embed-track'),
			$spotify_input  = $('#spotify-track'),
			$spotify_results = $spotify_search.find('.search-results');
			
	$spotify_input.keypress(throttle(function (event) {
		if ($(this).val().length < 0) {
			$spotify_results.html('<p class="howto">Search for a track in the input above</p>');
			return false;
		}
	
	  $.get("http://ws.spotify.com/search/1/track.json", { q: $(this).val() }, function( data ) { 
	  	if (data['tracks'].length == 0) {
	  		$spotify_results.html('<p class="howto">No results</p>');
	  		return false;
	  	} else {
	  		$spotify_results.html('');
	  	}
	  	
	  	var $ul = $spotify_results.children('ul'),
	  			track;
	  	
	  	if ($ul.length == 0) {
	  		$ul = $(document.createElement('ul')).appendTo($spotify_results);
	  	}
	  	
	  	for (track in data['tracks']) {
	  		var artists = data['tracks'][track]['artists'],
	  				artistList = [],
	  				artist;
	  		
	  		for (artist in artists) {
	  			artistList.push(artists[artist]['name']);
	  		}
	  		
	  		$ul.append('<li><input type="hidden" value="' + data['tracks'][track]['href'] + '"><span>' + data['tracks'][track]['name'] + ' (' + artistList.join() + ')</span></li>');
	  	}
	  	
	  	console.log(data['tracks']);
	  });
	}, 250));
	
	$spotify_search.on('click', '.search-results > ul > li', function () {
		window.send_to_editor('[spotifyEmbed track="' + $(this).children('input').val() + '"]');
	});
			
	function throttle(fn, delay) {
		var timer = null;
		return function () {
			var context = this, args = arguments;
			clearTimeout(timer);
			timer = setTimeout(function () {
				fn.apply(context, args);
			}, delay);
		};
	}
	
});

spotify-embed.php

<?php

/* Include in functions.php */

function html_editor_add_button() {
	echo '<a href="#TB_inline?width=640&height=800&inlineId=spotify-embed-wrap" title="Embed Spotify track" class="thickbox"><img src="'.get_stylesheet_directory_uri().'/admin/assets/img/icons/spotify.png"></a>';
}

add_action( 'media_buttons', 'html_editor_add_button', 100 );

function spotify_embed_wrap() {
?>
	<div id="spotify-embed-wrap" style="display:none">
		<div class="spotify-embed-track">
			<p class="howto">Search the track you like and select it to embed.</p>
			<div>
				<label><span>Track name</span><input id="spotify-track" type="text" tabindex="10" name="spotify-track"></label>
				
				<div class="search-results">
					<p class="howto">Search for a track in the input above</p>
				</div>
			</div>
		</div>
	</div>
<?php
}

add_action( 'admin_footer', 'spotify_embed_wrap' );

function spotify_embed_assets() {
	wp_enqueue_style( 'spotify-embed-css', get_stylesheet_directory_uri() . '/admin/assets/css/spotify-embed.css', false, VERSION, 'all' );
	wp_enqueue_script( 'spotify-embed-js', get_stylesheet_directory_uri() . '/admin/assets/js/spotify-embed.js', false, VERSION, 'all' );
}

add_action( 'admin_enqueue_scripts', 'spotify_embed_assets' );

function spotify_embed_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'track' => 'Spotify Track URI'
	), $atts ) );

	return '<iframe class="spotify-embed" src="https://embed.spotify.com/?uri='.$track.'" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>';
}

add_shortcode( 'spotifyEmbed', 'spotify_embed_shortcode' );