Web site integration

Every Spinitron member station has a web site on spinitron.com. But stations usually want to have content from Spinitron on their own web site. Spinitron offers several ways to put Spinitron content on other web pages. Mash-ups are welcome.

Using iframe and custom stylesheet

You can change the appearance of Spinitron's public pages to suit your needs. Anyone who understands or can figure out web page styling with CSS may take control over the appearance of public pages.

Altering the stylesheet

You will need to have a basic understanding the HTML and CSS. If you aren't comfortable with these computer languages, find someone who can help. Standard Spinitron service does not include tutoring or custom page design. Some great web sites you may find useful:

You can override any or all of the style rules in Spinitron's default stylesheet by supplying your own. The HTML page structure of the Spinitron public pages can be best understood from the page source or using tools like Chrome DevTools or Firebug. It is easy to experiment with and test a user stylesheet under development using those tools.

You supply your stylesheet in one of two ways:

  1. Linking an external user stylesheet

    See below.

  2. Storing a station stylesheet on Spinitron server

    Access the form from Custom CSS stylesheet in the admin menu, use the form to create or update your custom stylesheet.

  • Either work on the stylesheet directly in the form or using a text editor, so you keep a copy of it, and copy-paste the style rules from the editor into the form.
  • Figure out a custom CSS stylesheet for your station, the guide gives a few pointers on how to do this.
  • Test your stylesheet with the link on the form page
  • Activate your station stylesheet when you like to Spinitron by appending "&css=true" to the URI.

Most recently logged songs

You can show the "currently playing" song on your web site by putting:

http://spinitron.com/radio/newestsong.php?station=wxyz

in an iframe in your web page (replacing wxyz with your station ID). This is not always the currently playing song, of course, it is just the most recently logged song. If, for example, your station doesn't operate overnight then this song can get quite old.

To show more than one song, put a number into the URL with &num=N like this:

http://spinitron.com/radio/newestsong.php?station=wxyz&num=5

The number can be between 1 and 999. The songs are ordered with most recent first. To reverse the order with oldest first, use a negative number, e.g. &num=-5.

Add &tweets=1 to the URL to include tweet links with each spin. Tweet links make it easy for listeners to send a twitter status update referencing the artist, song and station etc.

To control the appearance of the text in your iframe, you may supply style definitions. Style rules can be included in the query itself in the 'styles' GET parameter, e.g.:

http://spinitron.com/radio/newestsong.php?station=wxyz&styles=body,a{background:black;color:white}

or instead you can set the 'stylesheet' GET parameter to the URI of a CSS stylesheet file on any web server:

http://spinitron.com/radio/newestsong.php?station=wxyz&stylesheet=http://spinitron.com/css/style-public.css

Thus, if your stylesheet is at http://yourserver.com/path/to/stylesheet.css then your iframe html might look like this

<iframe width="600" height="800"
  src="http://spinitron.com/radio/newestsong.php?station=wxyz&stylesheet=http://yourserver.com/path/to/stylesheet.css"
></iframe>

Removing parts of the default Spinitron web pages

The default public Spinitron pages include a banner heading at top and a navigation panel on the left. Using the stylesheet methods described above you can change the layout and appearance of these elements (and even hide them). But they can also be removed altogether allowing you to use Spinitron in other ways.

Basic method

If you set the GET parameter 'ptype' to 'd' in a link to a Spinitron public page (i.e. append &ptype=d) then the server returns an HTML page without the heading banner or navigation menu, calendar, search form etc.

Thus a link like this:

http://spinitron.com/radio/playlist.php?station=wxyz&playlist=6463&ptype=d

will display only the playlist on an HTML page without the navigation menu and banner.

You can easily try this out by going to the Spinitron public pages and adding &ptype=d to the web address in your web browsers navigation bar. You may combine ptype=d with a user stylesheet by including both parameters in a link.

Advanced method for scripting

If you set ptype=i or ptype=s then the server returns only a fragment of HTML code that contains only the data on that page (e.g. a playlist) – the standard HTML page elements <html>, <head>, <body>, etc. are removed. This can be useful if your web site generates pages on the fly with scripts such as PHP or ASP. Your script can read the HTML formatted data from Spinitron and include it in your own web page either directly or after manipulating it, e.g. to munge the link URIs. Don't use the 'css' parameter with ptype=i, it will be ignored.

Setting ptype=i removes banner, navigation panel and all HTML surrounding the data in the main panel. Setting ptype=s additionally removes (actually hides) the heading text at the top of a playlist leaving only the table of songs.

If you don't understand the above paragraphs, you should probably not try to use this method.

Examples

We set up a website to demonstrate iframe integration in action. There are several examples and the source code for the entire site is available. It is all on Butbucket:

In addition, the following text walks you through a couple of examples.

Displaying the current playlist on your station's web site

Say you want to display the current playlist on the front page of your station's web site. You don't want to show the Spinitron banner heading or navigation panel, only the playlist. And you want it to look consistent with the rest of your front page.

First, decide if you are going to store your custom user stylesheet on the Spinitron server (you will need to have administrator permissions at Spinitron or find someone who does) or on some other Server. Then experiment with the stylesheet until it looks right. While testing your stylesheet, you should click all the different kinds of links on the Spinitron pages to check that your stylesheet also works right on the pages that it links to.

If you stored your stylesheet on the Spinitron server, experiment by looking at:

http://spinitron.com/radio/playlist.php?station=wxyz&ptype=d&css=true

replacing wxyz with your station's ID.

If you stored your stylesheet on some other server, experiment by loading:

http://spinitron.com/radio/playlist.php?station=wxyz&ptype=d&css=http://yourserver.com/path/to/stylesheet.css

replacing wxyz with your station's ID and http://yourserver.com/path/to/stylesheet.css with the URL of your stylesheet.

Once you are happy with the appearance, put an IFRAME element in the front page on your web site to contain the current playlist. If you stored your stylesheet on the Spinitron server, try something like this (replacing wxyz with your station's ID):

<iframe width="600" height="800"
  src="http://spinitron.com/radio/playlist.php?station=wxyz&ptype=d&css=true"
></iframe>

If you stored your stylesheet on some other server then your iframe might look like:

<iframe width="600" height="800"
  src="http://spinitron.com/radio/playlist.php?station=wxyz&ptype=d&css=http://yourserver.com/path/to/stylesheet.css"
></iframe>

replacing wxyz with your station's ID and http://yourserver.com/path/to/stylesheet.css with the URL of your stylesheet.

Displaying your playlists on your own personal web site

Say you have your own personal web site to promote your radio show and you want to show your playlists there. Your station logs playlists using Spinitron. You have the option of making and maintaining a copy of the playlist on your own server or linking to the playlist on Spinitron. This example deals with the latter.

Your own personal web site probably has its own distinct appearance. So you first need to create a user stylesheet for displaying Spinitron pages so that they look like your pages. Store the stylesheet somewhere on your server, e.g. http://yourserver.com/path/to/spinstyle.css.

Now you can put links to your playlists on your web pages like this:

<a href="http://spinitron.com/radio/playlist.php?station=wzyz&playlist=nnn&ptype=d&css=http://yourserver.com/path/to/spinstyle.css">

You replace:

Alternatively, if you want to display the playlist within the surroundings of your web page, you can use an iframe, e.g.:

<iframe width="600" height="800"
  src="http://spinitron.com/radio/playlist.php?station=wzyz&playlist=nnn&ptype=d&css=http://yourserver.com/path/to/spinstyle.css"
></iframe>

Or, if you are into scripting, you can try using the advanced method with ptype=i as described above.