instagramをホームページに埋め込む方法【コピペでOK】

instagramをホームページに埋め込みたい!

instagram

instagram

特に真新しい情報でもないけれどインスタグラムの自分の投稿をホームページに埋め込もうと思った時に調べてみると意外と面倒だったので備忘録。

インスタグラムは写真毎に共有しようと思ったら公式では写真を個別にシェアする方法しかない。

そんなんじゃなくてタイムラインをごそっと表示したいんじゃぁ、という事でこの記事です。

最も簡単な方法

最も簡単な方法はWEBサービスを使います。

これらのWEBサービスを使えば

簡単にインスタグラムの投稿を埋め込むタグを作成してくれます。

※使い方は簡単すぎて説明するまでもないので省略

気に入らない点

上記で紹介したサービスは簡単にそれっぽいのが実装できますが、

いざ投稿された写真をクリックして詳細ページに飛ぼうとすると、

インスタグラムに飛ぶのではなく、それぞれのサービス内のページに飛んでしまうのが気に入りませんでした。

インスタのページに飛んでくれれば完璧なのに…

とっつぁん

とっつぁんそんなページに飛んでコメント付けられても見ねーよっていう(笑)

ちょっとめんどい方法

ちょっとめんどい方法はAPIを使って表示する方法。

  1. ディベロッパー登録
  2. アクセストークンをゲット
  3. PHPで取得して表示

ディベロッパー登録

みーたむ

みーたむPCでインスタグラムにログインしたら
下記URLからディベロッパー登録をします。

https://www.instagram.com/developer/

「Register Your Application」をクリック。

「Register Your Application」

とっつぁん

とっつぁん「Register Your Application」をクリック。
するとプロフィールの登録画面に行くのでそれぞれ入力して登録。

Client ID発行

みーたむ

みーたむもう一度「Register Your Application」をクリックすると「Manage Clients」というページに行きます。
「Register a New Client」のボタンをクリックすると、以下のような登録画面になります。

Register New Client ID

  • 【Application Name】アプリ名(なんでもよし)
  • 【Description】説明(なんでもよし)
  • 【Website URL】使うURL
  • 【Valid redirect URIs】リダイレクトするURL(Website URLと一緒でおk)

Bot回避の認証を入力して登録するとClient IDが発行されます。

アクセストークンの発行

みーたむ

みーたむ以下のアドレスの赤字部分をClient IDとValid redirect URIsに置き換えてアクセスします。

https://instagram.com/oauth/authorize/?client_id=【Client ID】&redirect_uri=【Valid redirect URIs】&response_type=token

みーたむ

みーたむエラーが出なければ確認画面になるので「Authorize」をクリックするとリダイレクトURLに遷移してアドレスバーにアクセストークンが表示されます。

とっつぁん

とっつぁんここでアクセストークンじゃない場合は「Valid redirect URIs」の「Disable implicit OAuth」にチェックマークが入ってるかも。

phpでWEBサイトに埋め込み

とっつぁん

とっつぁん以下にアクセストークンとアカウント名を入れてコピペ。

php

html

css

CSSは適当にいじればOKですがそれっぽく3列で画像だけ表示するならこんな感じ

とっつぁん

とっつぁん以上、めんどくさーい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です