Jak dodać playlistę Spotify na stronę?

Platforma Spotify cieszy się wielkim uznaniem wśród społeczności internetowej m.in. dzięki darmowej wersji dla każdego. O ile słuchanie jej na smartfonie lub komputerze jest proste, to schody zaczną się w momencie kiedy zechcesz dodać playlistę Spotify na stronę internetową.

W ostatnich artykułach przedstawiliśmy Ci najlepszą muzykę do snu oraz do biegania na Spotify. W dzisiejszym artykule opowiem Ci jak dodać playlistę Spotify na stronę internetową tak, jak zrobiliśmy to w powyższych artykułach. Wymaga to lekkiej wprawy. Zaczynamy.

Jak dodać playlistę Spotify na stronę?

Przejdę od razu do meritum i nauczę Cię jak dodać playlistę Spotify jako widget na stronie internetowej. Postępuj zgodnie poniższymi krokami.

1Wybierz swoją playlistę

Pierwszym krokiem będzie wybranie playlistę oraz skopiowanie linku, który do niej prowadzi. Możesz w tym celu przejść na stronę https://open.spotify.com/browse i wybrać odpowiednią pozycję poprzez skopiowanie adresu strony z przeglądarki.

2Stwórz widget na stronę

Aby to zrobić przejdź na stronę https://beta.developer.spotify.com/documentation/widgets/generate/play-button/ i wybierz z lewej strony Play Button. Follow Button posłuży Ci do szerowania playlisty lub albumu podczas, gdy Play Button przyda się do generowanie widgetu iframe.

3Wystarczy skopiować?

Wydawałoby się, że jesteś już na końcu swojej drogi i po wklejeniu na podstronie w polu 2. linku do playlisty lub albumu Spotify pozostanie tylko skopiować kod na stronę internetową.  Niestety, moduł ten jest w wersji Beta i często bardzo nie działa (kod widgetu nie jest generowany). Próbuj odświeżyć stronę, aż się uda, a wtedy skopiuj treść z pola 3. i wklej na swoją stronę internetową jako kod HTML w miejscu, w którym chcesz, aby był widoczny odtwarzacz Spotify. Nie działa? Przejdź do kolejnego punktu.

4Mamy na to sposób

Wykorzystaj poniższy kod przygotowany przez nas do celu zamieszczenia odtwarzacza z playlistą Spotify:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:3ycjBixZf7S3WpC5WZhhUK" width="640" height="80" frameborder="0"></iframe>

W miejscu https://open.spotify.com/embed?uri=spotify:album:3ycjBixZf7S3WpC5WZhhUK wstaw swój własny link do playlisty lub albumu Spotify i wklej cały kod na swoją stronę zgodnie z poprzednim krokiem. W ten sposób otrzymasz działający, szeroki, czarny widget  z odtwarzaczem Spotify na stronie internetowej.

5Personalizacja widgetu

Tak jak w przypadku generatora widgetu Spotify, masz możliwość jego personalizacji:

  • width – zmień szerokość widgetu (maksymalna 640px);
  • height – zmień wysokość widgetu (maksymalna 720px, do 80px będzie to odtwarzacz kompaktowy, powyżej tej wartości znacznie większy);
  • &theme=white – dodaj to na końcu linku URL, aby odtwarzacz miał jasne kolory;
  • &view=coverart – dodaj to na końcu linku URL, aby odtwarzacz miał dużą grafikę przypisaną do playlisty/albumu.

6Odtwarzacz w praktyce

PLAYLISTA KOMPAKTOWA:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:3ycjBixZf7S3WpC5WZhhUK" width="640" height="80" frameborder="0"></iframe>

PLAYLISTA DUŻA:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:3ycjBixZf7S3WpC5WZhhUK" width="640" height="400" frameborder="0"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

PLAYLISTA DUŻA, BIAŁA:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:3ycjBixZf7S3WpC5WZhhUK&amp;theme=white" width="640" height="400" frameborder="0"></iframe>

PLAYLISTA DUŻA, CZARNA Z GRAFIKĄ:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:3ycjBixZf7S3WpC5WZhhUK&amp;view=coverart" width="640" height="400" frameborder="0"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

Proste prawda? 🙂 Polub ten poradnik i udostępnij do swoim znajomym!

WYPOWIEDZ SIĘ

Wprowadź treść komentarza.
Wprowadź swoje imię.