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の画像をレスポンシブな正方形で配置することができた。