応募をインスタ+ハッシュタグで行った写真のコンテストのキャンペーンで、公式サイト(ワードプレス)で入賞作品を埋め込んだ時の苦労話。
基本的にインスタの写真を他のサイトに埋め込むときには、写真の埋め込みコードを取得して、ページに貼りつけるだけでいいのだけれど、何枚も貼る場合は、表示が重なったりしてレイアウトが乱れることがある。
10分で終わると思ったら、ほぼ半日かかりました。
軽くググったら埋め込みコードを取得するときに「キャプションを追加のチェックを外す」というのが出ていたのでやってみたが、症状は変わらず。
次に、力業で表組のタグを入れて、サイズを固定してみたのだが、効果なし。
元のコードが問題なのかと思って、ページのhtmlソースをコピーして、ホームページビルダーに貼ってプレビューしてみたら、エラーが大量に出てプレビューできず。つまり、コードに問題があるのだよ。
で、答えは簡単。埋め込みコードの一番下の行の「<script async defer src=”//www.instagram.com/embed.js”>という部分は、1ページ1か所あればいいのだが、埋め込みコードには写真1枚につき1こ入っているのだ。これがエラーを起こして悪さをしていた。これをそのページの一番最後の写真のやつを残して、その他を削除したら、めでたしめでたし。
ふー。これが分かるまで4時間、悩んでいました。ホームページビルダーって初心者用のイメージですけれど、単純にしようといろいろなエラーを教えてもらえる優れもの。これで、htmlを組むことはほとんどないけれど、バグ取りにはいいと思います。
サイトのタグ地獄はどこまでも続く。
