New article of Category

wordpress以外のブログサービスで記事内にSpotifyを埋め込む方法

09/14/2020

wordpress以外でも出来る?Spotifyを記事に埋め込む方法とは。

※Seesaaブログ利用時に投稿した記事を編集しています。

この曲、みんなと共有したい!
ブログに埋め込んで、少しかっこよく魅せたい!

そう思った方いるんぢゃないですかね?

adult beautiful blur casual
Photo by Burst on Pexels.com

私も、そのうちの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=48IamaYBQC6MhqwVgdF1gg
https://open.spotify.com/ここからコードが異なりますね

こちらがパソコンから埋め込みコードを取得したもの↓↓↓

https://open.spotify.com/embed/track/1WmoDex6I3RyAyYSAgRAvLs://open.spotify.com/embed

embedがプラスされてます

またパソコンで埋め込みコードを取得したものは
スマホでコピーしたリンクのクエスチョンマーク以下がありません

でわ埋め込みコードは・・・?

埋め込みコードは下記となります

<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を表示させるには下記で置き換えます。


ブログランキング・にほんブログ村へ