/
widget.html
executable file
·177 lines (149 loc) · 8.22 KB
/
widget.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Now Playing JavaScript Widget</title>
<meta name="Description" content="Demonstrates embedding Spinitron now-playing songs on your web site.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-config" content="browserconfig.xml" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#888888">
<meta name="theme-color" content="#000000">
</head>
<body>
<div class="header-container">
<header>
<nav>
<a href="index.html">Now Playing</a>
<a href="widget.html">Now Playing JS</a>
<a href="playlist.html">Current Playlist</a>
<a href="playlist-js.html">Current JS</a>
<a href="shows.html">Upcoming Shows</a>
<a href="shows-js.html">Upcoming JS</a>
<a href="schedule.html">Schedule</a>
</nav>
</header>
</div>
<div class="main-container">
<div class="main">
<h1>Now-playing JS widget</h1>
<div class="widget-box now-playing">
<header>
<h1>Recent spins on wzbc</h1>
</header>
<div data-station="wzbc" data-num="5" data-sharing="1" data-player="1" data-merch="1" data-cover="1"
data-action="now-playing-v2" data-meta="1"
class="spinitron-js-widget"></div>
<script async src="//widgets.spinitron.com/static/js/widget.js"></script>
</div>
<div class="widget-docs">
<p class="github"><a href="https://github.com/spinitron/v2-web-integration">Source code</a>
for this demo web site is on Github</p>
<h2>Recent spins using JavaScript</h2>
<p><a href="np-v1-js.html">Old Now Playing JS widget documentation</a></p>
<p><a href="https://github.com/spinitron/v2-web-integration/blob/master/widget.html">This page</a> shows
how you can put recent spins on the page using the JavaScript widget.</p>
<h3>About the Spinitron JavaScript Widget</h3>
<p>The Spinitron JavaScript Widget puts content from spinitron.com on your web page without needing an
iframe or the <a href="https://spinitron.com/v2-api-demo/">API</a>. A small script fetches markup from
Spinitron and puts it into a container element on your page.</p>
<p>The JavaScript widget has advantages over iframes</p>
<ol>
<li><p>It's easier to style because the markup is on your page rather than in a separate page
that the browser loads into the iframe. Just add widget styles to your stylesheet.</p></li>
<li><p>The widget container automatically assumes the height of its contents. It's hard to do that with
an iframe, which usually has a specified static height.</p></li>
<li><p>It loads faster and with less flicker.</p></li>
</ol>
<p>To use the widget, put a container element, a <code><div></code> for example, on your page in which
the
recent spins should appear, followed by the widget <code><script></code> element like this.</p>
<pre><code><div class="spinitron-js-widget" data-action="now-playing-v2" data-station="wzbc"></div>
<script src="//spinitron.com/static/js/widget.js"></script></code></pre>
<p>The container element must have</p>
<ul>
<li>The <code>spinitron-js-widget</code> CSS class, e.g. <code>class="spinitron-js-widget"</code></li>
<li>A <code>data-action</code> attribute to say what goes in the container, e.g. <code>data-action="now-playing-v2"</code>
</li>
<li>A <code>data-station</code> attribute to identify your station, e.g.
<code>data-station="wzbc"</code></li>
</ul>
<p>Depending on the action there may be more optional parameters you can set with data attributes.</p>
<p>If you have more than one widget on a page, you need the <code><script></code> element only once.
</p>
<h3>About the widget's <code>now-playing-v2</code> action</h3>
<p>Parameters that control the widget are described in the table.</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Use</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>station</code></td>
<td>Station id, e.g. "wzbc". Mandatory</td>
</tr>
<tr>
<td><code>num</code></td>
<td>Number of spins. Default is "1". Use negative number to reverse the order, e.g. "1",
"-5".
</td>
</tr>
<tr>
<td><code>sharing</code></td>
<td>Set to "1" to request Twitter and Facebook share links in the markup.
If not set, station setting 'Display: "Enable Share to ... links"' is used to determine whether
links should be displayed. Enabled by default.
</td>
</tr>
<tr>
<td><code>cover</code></td>
<td>Set to "1" to request cover art images in the markup.
If not set, station setting 'Display: "Enable cover art on public pages"' is used to determine
whether cover art should be displayed. Enabled by default.
</td>
</tr>
<tr>
<td><code>player</code></td>
<td>Set to "1" to request an ability to play songs preview from Apple Music.
Enabled by default.
</td>
</tr>
<tr>
<td><code>merch</code></td>
<td>Set to "1" to request "Buy it!" links in the markup.
If not set, station setting 'Display: "Enable Buy it! links"' is used to determine
whether links should be displayed. Enabled by default.
</td>
</tr>
<tr>
<td><code>meta</code></td>
<td>Set to "1" to request additional playlist and DJ metadata with each spin. Disabled by default.</td>
</tr>
<tr>
<td><code>non-music</code></td>
<td>Set to "1" to include non-music items. Disabled by default. When disabled, the widget lists only spins. When
enabled, spins and non-music items are combined in the widget display and ordered by timestamp.
</td>
</tr>
</tbody>
</table>
<p>The example on this page uses this markup which you can also see in the
<a href="https://github.com/spinitron/v2-web-integration/blob/master/widget.html">source code</a>.</p>
<pre><code><div class="spinitron-js-widget" data-action="now-playing-v2" data-station="wzbc" data-num="5" data-sharing="1" data-player="1" data-merch="1" data-cover="1"></div>
<script async src="//spinitron.com/static/js/widget.js"></script></code></pre>
</div>
<p>See also the <a href="https://spinitron.com/v2-api-demo/">API demo</a></p>
</div> <!-- #main -->
</div> <!-- #main-container -->
</body>
</html>