ブログにApple Podcastプレイヤーを埋め込み表示する方法

 

 

 

 

WebページやブログにApple Podcastを埋め込む方法

 

先日、AppleからPodcast Creator宛にこんなメールが届きました👇

英語だったので、見逃してしまいそうだったのですが、、、

Apple Podcastで、ポッドキャストをWebサイトやブログに埋め込むことができるようになったという内容☝️

埋め込む方法を備忘録としてシェアしておきます🎤

Apple Podcastをブログに埋め込む手順

まず、Apple Podcast Marketing Toolsへアクセス▼

🔗　https://tools.applemediaservices.com/apple-podcasts

自分のポッドキャストの番組名などで埋め込みたいコンテンツを表示させます。

検索欄に「リッキー」と入力👇

大本のPodcastとエピソードが表示されます。

埋め込みたいエピソードを選ぶと、以下の項目が表示されます▼

　　　　

Podcast Playerはこのように表示されるので、「Copy Embed」をクリックして、貼り付け用のコードを入手します👇

ブログ記事の編集画面で「カスタムHTML」を呼び出し、さきほどコピーしたコードを貼り付けます👇

ここでプレビューを表示すると、このようになります👇

ブログのページ上でポッドキャストを再生できるようになりました。

右の・・・をクリックすると👇

エピソードに移動をすると、Macの場合はPodcastアプリが起動。

リンクのコピーはURL、埋め込みは埋め込み用のコードが生成されます☝️

なので、ポッドキャストのシェアがよりカンタンになりました💦

Spotifyのポッドキャストを埋め込む場合

SpotifyのポッドキャストはリンクURLをペーストするだけで、埋め込まれます👇

Apple PodcastとSpotifyを比較すると、こんなかんじ👇

Spotifyの方が大きく表示されます。

Apple Podcastのプレイヤーの表示大きさは、コードのHeightとWidthの数値を書き換えれば調整することができます。

しかし、縦幅は175pxでジャストサイズになるようになっていました💦

横幅を800px、縦幅を200pxにした場合、縦幅が少し収まりません👇

Apple Podcastの埋め込みプレイヤー

Apple PodcastそのものをEmbed Playerでブログなどに埋め込むことができます。

Apple Podcast Embed Playerはブログの記事下に入れておこう！

Apple Podcast Marketing Toolsをクリック👇

🔗　https://tools.applemediaservices.com/apple-podcasts

検索で、自分のPodcastを表示させます。

ここで、Copy Embedをクリックし、カスタムHTLMで貼り付ければ、貼り付け完了✅

実際に埋め込むと、ポッドキャストのアイコン、最新のエピソード５つがブログに表示されます👇

実際に１つのエピソードを再生すると、左側のプレイヤーに表示されます。さらに、エピソードに添付した概要欄も見れるようになります。ただし、概要欄に貼り付けたリンクは飛べなかったです💧

バッジ、アイコン、QRコードを生成する

あなたへのリンクとなるバッジ、QRコードを生成がカンタンにできます。

さらに、貼り付け用のコードも生成されるので、カンタンにブログに貼り付けできます。

バッジは色や言語を選択👇

アイコンをモノブラックにした場合👇

日本語表示の場合👇

アイコンはこんなかんじ👇

ブラックにもできます👇

QRコードも同様に色を選択できます。

一般的なQRコード👇

黒背景のQRコード👇

紫のQRコード👇

QRコードの真ん中にポッドキャストのアイコンをいれることもできます👇

　

まとめ

【関連記事】