wordpress以外でも出来る？Spotifyを記事に埋め込む方法とは。
※Seesaaブログ利用時に投稿した記事を編集しています。
この曲、みんなと共有したい！
ブログに埋め込んで、少しかっこよく魅せたい！
そう思った方いるんぢゃないですかね？
私も、そのうちの1人です😝😅
でわ
どうすれば、埋め込みが出来るのか？
私はスマホで、Spotify使って、カーオーディオにBluetoothで飛ばして聴いたりする事もあります
スマホアプリのSpotifyには共有ボタンがありますが、リンクをコピー迄しかありません
埋め込みコードをコピーという項目が存在しないんですね💦
埋め込みコードがない･･･
ぢゃどぉやって埋め込もうか？出来るのか分かりませんが、ググりましたよ！
最初はスマホからクロームでSpotifyにログインで、パソコンモードにて閲覧で、埋め込みコードがあるだろうと勝手に思い込んでましたがありませんでした💦
どぉやらパソコンにSpotifyのアプリをインストールすると、埋め込みコードのコピーが出来るようです
で、パソコンにSpotifyアプリをインストールしたよ🎵
ありましたね！埋め込みコードのコピーが
埋め込みコードをコピーしたので、Seesaaブログに、埋め込みしてみましたよ
実際にSpotify埋め込みしてみました
パソコンアプリのSpotifyから埋め込みコードを取得して埋め込んだものが下記
なかなか魅せてくれますね🎵
※下記より曲が違いますが、方法は同じです。
埋め込みコード説明
肝心な埋め込みコードですがこのようになってました↓↓↓
<iframe src="https://open.spotify.com/embed/track/1WmoDex6I3RyAyYSAgRAvL" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>こちらは同じ曲をスマホのアプリでリンクをコピーしたもの【URL部分】↓↓↓
https://open.spotify.com/track/1WmoDex6I3RyAyYSAgRAvL?si=48IamaYBQC6MhqwVgdF1gghttps://open.spotify.com/ここからコードが異なりますねこちらがパソコンから埋め込みコードを取得したもの↓↓↓
https://open.spotify.com/embed/track/1WmoDex6I3RyAyYSAgRAvLs://open.spotify.com/embedembedがプラスされてます
またパソコンで埋め込みコードを取得したものは
スマホでコピーしたリンクのクエスチョンマーク以下がありません
でわ埋め込みコードは･･･？
埋め込みコードは下記となります
<iframe src="https://open.spotify.com/embed/ここにスマホでコピーしたリンクのalbum or trackから？マーク直前迄を貼る" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>アルバム単位でも、コードの中身の差し替えは同じくクエスチョンマーク直前迄を、上記の埋め込みコードに挿入して頂けると問題なく
記事にSpotifyを埋め込みが可能ですよ🎵
※数字は埋め込むサイズとなりますので変更も可能です
スマホアプリからのアルバムのリンク【URL部分】↓↓↓
https://open.spotify.com/album/7oPUiFyVwpKOyQ4TIBVg0J?si=e6QIc6H8SrS1IDY0KiRb1A
↑↑↑
説明通りにリンクを挿入し記事に貼り付けると
↓↓↓
肝心な埋め込みコードですがこのようになってました↓↓↓
<iframe src="https://open.spotify.com/embed/album/7oPUiFyVwpKOyQ4TIBVg0J" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>※コード表記がトラック単位になってましたので修正しました。2020年8月29日
この方法だと、wordpress以外のブログでもSpotifyの埋め込みが可能なはずです。
機会があればお試し下さい🎵
追記※2020年8月29日
最後に、記事にcodeを表示させるには下記で置き換えます。
