Spotify Feature

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Warning: this page contains external links, please beware of where you click. We will NOT be responsible for your safety.
Additionally, we encourage you to exercise internet safety in all wikis.

Quick Code

Copy to clipboard <spotify uri="https://open.spotify.com/track/4B3qvzOMzLQXLeYgPsG3KA?si=0e8482478f15406e"/>

## Introduction

The **Spotify feature**, much like the now unused SoundCloud feature, adds a box with a Spotify track/song/record/artist/podcast/etc. in it. To listen to the music, you do not have to be logged in, as this is only a sample. You will only need an account if you want to listen to the *whole* song.
**NOTE: Some songs are not available in certain countries due to licensing and copyright agreements.**

## Code

```
<spotify uri="spotify:track:4B3qvzOMzLQXLeYgPsG3KA?si=0e8482478f15406e" height='70' width="400"/>
```
The part where it says **4B3qvzOMzLQXLeYgPsG3KA?si=0e8482478f15406e** is the code of each song. To get the track code of each song, you press the **...** button and then press the **share** button. After that, you press, **copy song link** and when you paste it, it'll look something like this:
**https://open.spotify.com/track/4B3qvzOMzLQXLeYgPsG3KA?si=0e8482478f15406e**

Take the part that says **4B3qvzOMzLQXLeYgPsG3KA?si=0e8482478f15406e** and replace it in the code, to get the song you want.

You can also get the basic code (automatic width and heights) for a song by copying the URL, like this:

```
<spotify uri="https://open.spotify.com/track/4B3qvzOMzLQXLeYgPsG3KA?si=0e8482478f15406e"/>
```

Result:

### Width and Height

In the example, the code has a height of 70px and the width as 400px. But, we can mess around with stuff a bit, too! If you're using a whole soundtrack, you should put the height as 200px so people can scroll through all the songs; for individual songs, it's best to keep it at 70px! Here's the code for a 200px tall Spotify insert.

```
<spotify uri="URL" height='200' width="400"/>
```

This results in:

To change the height, just replace the '400' with a number of your choice!
If you want a wider Spotify Gadget, the recommended is 700px. The code for this is:

```
<spotify uri="URL" height='200' width="700"/>
```

This results in:

To change the width, just replace the '700' with a number of your choice!

### Adding More Attributes

Although the Spotify feature itself can't be customized much, we can add a span/div style tag and customize it that way!

#### Borders

Borders can be added with the regular border code, but with an extra div tag. For an example:

The code for this:

```
<div style="box-sizing:border-box; border:8px dotted purple; width:auto; height:auto"><spotify uri="https://open.spotify.com/artist/3UUJfRbrA2nTbcg4i0MOwu" height='200' width="688"/></div>
```

#### Rounded Edges

Like borders, rounded edges can be added with the border radius, with an extra div tag as well.
```
<div style="box-sizing:border-box; border-radius:100px;overflow:hidden; width:auto; height:auto"><spotify uri="URL" height='200' width="700"/></div>
```

To adjust how round the edges are, replace the '100' with a different number of your choice!

#### Combining the Two

To combine the two above attributes, use the following code:

```
<div style="box-sizing:border-box; border-radius:CODE;border:CODE;overflow:hidden; width:auto; height:auto"><spotify uri="URL" height='200' width="700"/></div>
```

Replace **CODE** with a specific integer value as shown on the Border Radius and Borders pages! It should give something similar to the below as a result:

## An Important Note

**As stated in our Guidelines, it is OK to have a song with some swears, however songs containing many or mostly swears will be removed.**

*Also, putting several Spotify one after the other would result in them being on the same line. This is because the Spotify tag is **inline**.*