0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【備忘録】Instagram Graph APIを使用してWEBページに正方形の画像を埋め込む

Last updated at Posted at 2022-01-14

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

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

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

#実装後に起きた問題

  1. 画像が表示されない。
  2. 画像をクリックしても投稿に飛ばない。
  3. 取得された画像サイズが正方形ではないのでレイアウトが崩れる。

#原因

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?