[Resolved] Getting a link submitted with form to use in Spotify embed

[Author]

Posts

[michaelH-40]

I’m trying to get a link to a Spotify playlist into an embed

I can get the link dynamically into a toolset button and that takes me to the playlist, but I want to use the link in the Spotify embed.

Any help appreciated.

[Jamal]

Hello and thank you for contacting Toolset support.

I am really sorry but I do not understand your question. Probably because I am not familiar with Spotify links and embeds. Can you rephrase your question in steps like the following, and provide examples or screenshots along the way:
1. I want to xxx
2. I do xxx
3. I expect to have xxx
4. Instead I get xxx

[michaelH-40]

Hi that’s ok

So I want to have a Spotify link to a playlist.

I can get the link to go to Spotify no issues.

I want to use their embed so a visitor does not leave my site.

This what the embed code looks like.

_———————

<iframe src="hidden link" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

————————-
Need to replace that url with the dynamic one.

Any ideas please?

Thanks

[Jamal]

Now, I can see an embed example. What about what you have already stored? I mean the link to a playlist? Is it stored in a URL field?

Are you using the blocks editor or the legacy editor?

[michaelH-40]

Hi

Its stored in a URL field

Block editor

[michaelH-40]

Hi
Its stored as a URL

Im using blocks

[Jamal]

I still need an example of the URL to give accurate advice. Let's assume that the URL that is stored in the field is hidden link and that the field's slug is "spotify-url"
Then, you can use a Fields&Text block and add this to it:

<iframe src="[types field="spotify-url" output="raw"][/types]" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Read more about the types shortcode for URL fields here https://toolset.com/documentation/customizing-sites-using-php/functions/#url

But, if the URL is different and needs to be formatted or transformed to an embed URL, you will need some custom coding.

Another solution would be to create your own shortcode that will produce the iframe. Let me know if you need help with that.

[michaelH-40]

Hi
The slug is playlist-url

I just get the 404 not found of the template page.

How would I go about with a shortcake please?

Thanks

Mike

[Jamal]

Would you allow me temporary access to your website and let me check this closely? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

Please let me know what custom post type? And what content template?

[Jamal]

Unfortunately, the password did not work for me, can you double-check from your side and update your last reply or add the password in your next message.

Assume that:
- The post type is: Playlists
- The content template is: Playlist display

[Jamal]

Currently, there are two Playlists posts:
- hidden link
- hidden link

Both have a URL in the custom field "PLaylist URL"
- hidden link
- hidden link

But I still do not know if there is a difference between this field and the embed fields. I tied the same URL but it did not generate a working iframe. Check this screenshot

Can you provide the embed URLs for both of the Playlist URLs? Maybe that can help understand the logic behind it.

[michaelH-40]

Yes of course

<iframe src="hidden link" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>

<iframe src="hidden link" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Thats the two embed codes

Thanks

[Jamal]

Hello and my apologies for the late reply, it took me some time before finding how to achieve this.

Because the URL that you save on the database is not the same as the embed URL(the embed URL includes /embed/ in it), you will need custom code to extract the item ID and build the correct URL for it. So, I created a custom shortcode for it. I added it as a snippet in Toolset->Settings->Custom Code.

add_shortcode('spotify-playlist', function(){
  global $post;
  $playlist_url = get_post_meta( $post->ID, 'wpcf-playlist-url', true );
  // return $playlist_url;
  $playlist_id = false;
  // This regular expression is responsible for extracting the ID. This will need adapting to handle other elements than playlist, or other URL schemes.
  $pattern = '/https:\/\/open\.spotify\.com\/playlist\/([a-zA-Z0-9]{22})\?([\s\S]*)/';
  if ( preg_match( $pattern, $playlist_url, $re ) ) {
    $playlist_id = $re[1];
  }
  if ( $playlist_id ) {
    return '<iframe src="<em><u>hidden link</u></em>' . $playlist_id . '" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>';
  }
});

Then use the shortcode as follow, in a Fields&Text block or in a shortcode block. I added it to the content template, and also inside of the view:

[spotify-playlist]

Please note that this custom code will only work for URLs that are for playlists. If you have URLs for albums, tracks, or other elements of Spotify, the code will need to be adapted.

I hope this helps. Let me know if you have any questions.

[michaelH-40]

Wow thank yo usb much. Works spot on.

May I ask would it need much changing for the embed way rather than iframe?

<!-- wp:embed {"url":"hidden link","type":"rich","providerNameSlug":"spotify","responsive":true,"className":"wp-embed-aspect-21-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
hidden link
</div></figure>
<!-- /wp:embed -->

Thank you again so much

[Jamal]

I am sorry, but I don't understand your question. Can you elaborate more?