 |
|
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.[1]
Code
The Spotify feature looks like this:
The 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. For example:
The code for this:
<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.
References
Template:Reflist