Instagram Graph APIを使用してInstagramの画像をwebページに埋め込む際に、少し手間取ったので備忘録として。
実現したいこと
Instagram Graph APIを利用してInstagramから取得した画像をwebページに埋め込み、正方形のグリッド状に配置したい。
実装
Instagramのプロアカウント作成からwebページへの埋め込みまではこちらを参考に行った。
実装後に起きた問題
- 画像が表示されない。
- 画像をクリックしても投稿に飛ばない。
- 取得された画像サイズが正方形ではないのでレイアウトが崩れる。
原因
画像が表示されない。
- phpファイル内のGraph APIのバージョンが最新ではなかった。
- 目的のInstagramアカウントの投稿数が、Graph APIで取得する数（javascriptファイルの
photo_lengthの値）より少なかった。 - javascriptファイル内のphpファイル指定がうまく動作しなかった。
画像をクリックしても投稿に飛ばない。
- 投稿へのリンクの値である
permalinkを取得していなかった。
取得された画像サイズが正方形ではないのでレイアウトが崩れる。
- 対策を後述。
修正点
画像が表示されない。
- phpファイルの
$instagram_api_url内のGraph APIのバージョンを最新のものに書き換える。 - 「取得する画像の数 ≦ 目的のアカウントの投稿の数」にする。
- javascriptファイル内のphpファイル指定を相対パスから絶対パスに変更。
画像をクリックしても投稿に飛ばない。
- phpファイルの
$query内の、media｛値（省略）｝の値の部分にpermalinkを追加。 - javascriptファイルの
photos +=内の、<li>と＜img>の間に「<a href="' + gallery_data[i].permalink + '" target="_blank">」を追加（閉じタグも忘れずに）
取得された画像サイズが正方形ではないのでレイアウトが崩れる。
-
こちらのサイトを参考に
<li>タグを正方形にして、中に入れる画像をobject-fit: cover;で拡大表示。
まとめ
以上で、webサイト内にInstagramの画像をレスポンシブな正方形で配置することができた。