インスタの写真を埋め込むときの注意

応募をインスタ+ハッシュタグで行った写真のコンテストのキャンペーンで、公式サイト(ワードプレス)で入賞作品を埋め込んだ時の苦労話。

基本的にインスタの写真を他のサイトに埋め込むときには、写真の埋め込みコードを取得して、ページに貼りつけるだけでいいのだけれど、何枚も貼る場合は、表示が重なったりしてレイアウトが乱れることがある。

10分で終わると思ったら、ほぼ半日かかりました。

軽くググったら埋め込みコードを取得するときに「キャプションを追加のチェックを外す」というのが出ていたのでやってみたが、症状は変わらず。

次に、力業で表組のタグを入れて、サイズを固定してみたのだが、効果なし。

元のコードが問題なのかと思って、ページのhtmlソースをコピーして、ホームページビルダーに貼ってプレビューしてみたら、エラーが大量に出てプレビューできず。つまり、コードに問題があるのだよ。

で、答えは簡単。埋め込みコードの一番下の行の「<script async defer src=”//www.instagram.com/embed.js”>という部分は、1ページ1か所あればいいのだが、埋め込みコードには写真1枚につき1こ入っているのだ。これがエラーを起こして悪さをしていた。これをそのページの一番最後の写真のやつを残して、その他を削除したら、めでたしめでたし。

ふー。これが分かるまで4時間、悩んでいました。ホームページビルダーって初心者用のイメージですけれど、単純にしようといろいろなエラーを教えてもらえる優れもの。これで、htmlを組むことはほとんどないけれど、バグ取りにはいいと思います。

サイトのタグ地獄はどこまでも続く。