Quickly Embed Spotify Playlist in WordPress (2023)
Are you looking for an easy and reliable way to embed Spotify playlist in WordPress? Because Spotify is a great way to share your favorite songs with friends. It’s also an easy way to locate new tunes and find out what’s trending on the service. With Spotify playlists, you can display all of your favorite songs in one place, so people who visit your site will be able to enjoy them as well!
If so, then this article is perfect for you. This blog post will show you how to embed a Spotify playlist in WordPress. The tutorial is broken down into three easy steps: Get the link from the Spotify playlist, embed the playlist with Gutenberg editor, classic editor, and Elementor, embed it in your WordPress widget area.
The following article contains everything you need to know about adding a Spotify playlist in WordPress.
How to Embed Spotify Playlist in WordPress
If you run a music blog or want to share your favorite tunes with your fans, you’ll need to know how to embed a Spotify playlist in WordPress.
Thankfully, it isn’t as complicated as you may think. It’s not difficult to do.
Even a plugin isn’t needed. WordPress comes with an embed feature that allows you to quickly embed Spotify songs. Now I’ll show you how to embed a Spotify playlist in WordPress.
Step 1: Copy the playlist URL from Spotify
Clearly, To insert Spotify, you’ll need the playlist’s URL. So that’s our first move. To copy the playlist URL, you must first log in to your Spotify account and find the playlist which you want to show on your page.
You can copy the link from Spotify’s web version. Let’s look at how to copy the link from the computer or the web version. Log into your Spotify account and find or make a playlist to show. Click the three-dot button once you’ve found or built the playlist. The share option will be visible. When you hover your mouse over the share option, you’ll see a copy link to the playlist option. This link must be copied.
If you’re worried about how to get the link from the desktop app then let me tell you that the process will be the same for collecting links from the desktop app. So don’t panic.
Let’s take a look at how to copy playlist link from a mobile app:
Go to the app first, then look for the playlist. Similarly, go to the 3 dot option and then to the share option. The copy link option will appear after you tap on the share. To create the link, select Copy Link.
Add Spotify playlist to WordPress Post or page with Gutenberg editor
After copying the link, you’re almost finished with half of the job. You must now include the playlist in your post or page. To do so, create a page or post where the playlist will be added. Then switch to editing mode. The Gutenberg editor is now used by almost all. So first, I’ll show you how to use the Gutenberg editor to add a Spotify playlist.
Go to edit mode and add a new block where you want to add the Spotify playlist. Now click on the plus icon and Search Spotify.
You will see this kind of option, you have to put the link of the playlist that have you copied. Then hit the embed button and see your Spotify playlist is now showing on your page.
Don’t worry about the Hight and width. It will show in normal size in the post preview. Just align it to the Center, So that it will show in the center.
How to add a Spotify playlist with Classic editor:
If you’re using the Classic editor, I recommend switching to the Gutenberg editor because it has more features and is recommended by WordPress.
Anyways, if you’re using the Classic editor, go to the post and select Edit. Select the add media option.
Then select insert from the link, paste the link, and then select the insert into post. Your playlist will be embedded successfully.
How to Add Spotify Playlist to a Widget in WordPress:
If you want to embed the playlist on the sidebar widgets then go to Appearance >> Widgets then insert a text box to the slider. And paste the code in the text mode. Then save the widgets. Now it will add the playlist in your widgets.
How to Add Spotify Playlist with Elementor
Elementor is used by a lot of web developers and bloggers for their websites. This is based on the fact that it is a strong WordPress plugin that allows you to make beautiful designs without having to know how to code. It’s also easy to use, with drag-and-drop features and a variety of customization option. If you are a fan of Elementor and love to edit Elementor then follow my step:
Go to your post or page then add a section where you want to embed the playlist. Then get the text editor elements in that section.
Paste the link and hit the save.
If you want customization you can Do that with Elementor as well.
Example
Here’s an example. I’m using a garbage editor to make this embed.
To refresh your mind and mood, listen to the playlist.
Here is the Mood Booster playlist
However, since I use custom CSS to build the background shadow on my website, you will note a slight difference. You can also use this CSS.
All you need to do that just copy the CSS code and paste it into your custom CSS option. You can do it by going through the theme customization option than custom CSS/Additional CSS. Paste the CSS code and hit update. When you embed Spotify it will automatically add a background shadow. You can also use a plugin to use custom CSS such as Simple Custom CSS and JS, Simple Custom CSS, Custom CSS, and JavaScript.
.entry-content .wp-block-embed-spotify iframe {
box-shadow: 0px 2px 30px 1px #000;
}Warping up
In this blog post, we’ve discussed the three different ways you can add a Spotify playlist to your WordPress site. We hope these instructions have helped you out and you can use one of them to successfully include music on your site. If there is anything I missed, please leave me a comment below so I may address it quickly. Thank you for reading about how to add Spotify playlists in WordPress.
So, what’s next? You can read the following articles also :
