Edited at

Instagram Embedding APIで取得したHTMLをWebViewでうまく表示できない

More than 1 year has passed since last update.

Instagramの投稿を埋め込むためのHTMLを以下のAPIで取得できる。

レスポンスはJSONで返ってきて、htmlキーに埋め込み表示時用のHTMLが入っている。

{

"author_id": 123456,
"author_name": "eimei4coding",
/* 〜その他諸々〜 */
"html":"...", // <-- ここに埋め込み表示用のHTMLが入っている
}

公式APIドキュメント

で、このHTMLをWebViewで表示したら、デフォルト画像(グレー背景でInstagramアイコンのみ)のまま、埋め込み表示されない・・・なんでだ。

htmlの中身見たら、なぜかembed.jsをロードする部分(src)で、プロトコル(https or http)が抜けてる・・・

<script async defer src="//www.instagram.com/embed.js"></script>

ウェブページに埋め込んで表示する分には、そのプロトコルが使われるから問題ないけど、それ以外では表示されないというオチでした。たとえば私のケースは、WKWebView#loadHTMLStringで表示しようとしたのでだめでした。

というわけで、置換してhttps:を付けて解決した。

<script async defer src="https://www.instagram.com/embed.js"></script>