Instagram Graph APIを使用してInstagramの画像をwebページに埋め込む際に、少し手間取ったので備忘録として。

#実現したいこと
Instagram Graph APIを利用してInstagramから取得した画像をwebページに埋め込み、正方形のグリッド状に配置したい。

#実装
Instagramのプロアカウント作成からwebページへの埋め込みまではこちらを参考に行った。

#実装後に起きた問題

#原因

###画像が表示されない。

###画像をクリックしても投稿に飛ばない。

###取得された画像サイズが正方形ではないのでレイアウトが崩れる。

#修正点
###画像が表示されない。

###画像をクリックしても投稿に飛ばない。

phpファイルの$query内の、media｛値（省略）｝の値の部分にpermalinkを追加。
javascriptファイルのphotos +=内の、<li>と＜img>の間に「<a href="' + gallery_data[i].permalink + '" target="_blank">」を追加（閉じタグも忘れずに）

###取得された画像サイズが正方形ではないのでレイアウトが崩れる。

#まとめ
以上で、webサイト内にInstagramの画像をレスポンシブな正方形で配置することができた。