事由
我有用一個編輯器叫做 summernote (我試過一些編輯器,作法似乎都是這樣)
當我直接填入IG的連結時:https://www.instagram.com/p/Bn43FsqjIC1/?taken-by=instagram
他會產生這樣的程式碼:
<iframe frameborder="0" src="https://instagram.com/p/Bn43FsqjIC1/embed/" width="100%" height="672" scrolling="no" allowtransparency="true" class="note-video-clip">
// ...
</iframe>
直接帶入貼文的 ID 然後透過 IG 的 API 顯示。
只是我發現當被嵌入的內容的圖片或影片高度不一致時,此時 iframe
所設定的 height
因為已經固定,就無法完整呈現該IG貼文。
無論把它改成 auto
or 100%
等等,他都無法完整呈現貼文,都會被切邊,又或者是當圖片很小時,下面就會有一大片空白,無法得知嵌入內容的高度!
目前編輯器的做法是:不使用IG提供的嵌入語法,僅透過絕對網址來抓ID並產生 iframe
並透過IG的 Embedding
API來顯示貼文內容。
問題
我要如何解決這個問題?能用 iframe 也能順利嵌入、自適應高度、貼文不會被切掉,完美契合。
補充
我有去 IG 開發者查詢:https://www.instagram.com/developer/embedding/#media_redirect
我發現他寫的好像是只有叫你選擇 「嵌入」,會得到一串他的專屬語法,貼上去時的顯示才是沒有問題的。但透過 iframe
他好像就沒有教學或說明了。
資源
範例網址:https://www.instagram.com/p/Bn43FsqjIC1/?taken-by=instagram
IG開發者:https://www.instagram.com/developer/embedding/#media_redirect