読者です 読者をやめる 読者になる 読者になる

ヒロログ

公開型メモ帳 (=_=)zzz

instagramの埋め込みコードを書き込んでも画像が表示されない問題をなんとか解決

Webサービス

はてなブログに複数のinstagram埋め込みコードを書くと表示されない場合が多いけど、ブログの貼り付け機能を使用するとこの問題は発生しない。でもこれだとキャプションが表示されない。何かバッティングしてるのか?コードを削れば何とかなるんじゃないのか?

 

ちなみにこんな内容が書かれてます。一枚目はブログ連携させた自分の投稿、サイドバーから貼り付け可能です。

<p><a class="http-image" href="https://www.instagram.com/p/BJpAOCPAJ3x/" target="_blank"><img class="http-image" src="https://www.instagram.com/p/BJpAOCPAJ3x/media/?size=l" alt="https://www.instagram.com/p/BJpAOCPAJ3x/" /></a></p>
<p><a href="https://www.instagram.com/p/BJpAOCPAJ3x/">葛桜売り切れ… 12:00頃でも遅いのか…!田楽餅のみたらし、ごま、あんこ</a></p>

https://www.instagram.com/p/BJpAOCPAJ3x/

葛桜売り切れ… 12:00頃でも遅いのか…!田楽餅のみたらし、ごま、あんこ

 

<p><iframe class="instagram-iframe" src="//www.instagram.com/p/BJpAOCPAJ3x/embed/" frameborder="0" scrolling="no" data-entry-image="http://www.instagram.com/p/BJpAOCPAJ3x/media/?size=l"></iframe><cite class="hatena-citation"><a href="https://www.instagram.com/p/BJpAOCPAJ3x/">www.instagram.com</a></cite></p>

www.instagram.com

 (画像とリンクの間が不自然に離れてますね)

 

ということで検索。 

検証した結果だと、
blockquote
a
script
の3つの情報があれば表示は出来るので、これでもOKです

 

Instagram 埋め込みコードの構造を解析してみた - Qiita

http://qiita.com/h5y1m141@github/items/403dee38e88570185949

 

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="5" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">

<a href="%%URL%%" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">@@@</a>

</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

 

%%URL%%のところにinstagramのURL入れて埋め込んでみるとすべて表示されました。@@@のところにはキャプションが書かれているのですが削除してもちゃんと表示されますし全く違う文字を書き込んでも問題ありません、元のページから取得します。

気になるのが[data-instgrm-version="5"]今回はバージョン5でしたが最新の埋め込みコードを見ると7です、今後そちらをベースに最小限まで削った埋め込みコードも自分で探してみたいと思います。

 

◆表示されない
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="7">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 62.4537037037% 0; text-align: center; width: 100%;"> </div>
<p style="margin: 8px 0 0 0; padding: 0 4px;"><a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BJobBX0jU5P/" target="_blank">We are here in the US! I found a copy of @nylonmag in Los Angeles!!!!!! Can't believe we are on this magazine. Thank you so much NYLON!!!! It's soooo cool! From a-chan #perfumetour2016</a></p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">Perfume Officialさん(@prfm_official)が投稿した写真 - <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-08-28T00:04:32+00:00">2016 8月 27 5:04午後 PDT</time></p>
</div>
</blockquote>
<script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"></script>

 

◆ちゃんと表示される埋め込みコードのURLだけ変更してみたら表示された、キャプションに注目、読み込んだ画像のものに書き替わる。
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="7">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 60.9259259259% 0; text-align: center; width: 100%;"> </div>
<p style="margin: 8px 0 0 0; padding: 0 4px;"><a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BJobBX0jU5P/" target="_blank">Our CEO backstage with Perfume at their Los Angeles show! #amuse #perfume #pentatonix photo credit: world famous filmmaker @ryuhei_kitamura</a></p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">Bang Zoom! Studiosさん(@bangzoom)が投稿した写真 - <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-08-28T00:01:55+00:00">2016 8月 27 5:01午後 PDT</time></p>
</div>
</blockquote>
<script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"></script>