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

2017年3月4日

とっつぁん

Instagram SNS

この記事は 4 分くらいで読めると思います

あとで読む

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

instagram

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

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

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

最も簡単な方法

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

• InstaWidget
• SnapWidget

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

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

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

気に入らない点

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

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

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

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

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

ちょっとめんどい方法

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

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

ディベロッパー登録

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

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

「Register Your Application」

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

Client ID発行

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

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

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

<?php
  $json = @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token=アクセストークン&count=9");
  if ($json) {
    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $arr = json_decode($json, true);
    $arr = $arr['data'];
     if (count($arr)) {
      //dataの数があるだけループ
      echo "<ul class='instagram'>\n";
      foreach($arr as $v) {
        $Link = $v['link'];
        $imgSrc = $v['images']['standard_resolution']['url'];
        echo "<li><a href='{$Link}' target='_blank' ><img src='{$imgSrc}' /></a></li>";
      }
      echo "</ul>\n";
    }
  }
?>

• 2行目アクセストークンの部分を先程取得したアクセストークンに変更
• 2行目count=9は表示件数です（数字は変更可能）

css

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

.instagram li {
	box-sizing :border-box;
	width :33.3333%;
	padding :2%;
	float :left;
}

.instagram li img {
	max-width :100%;
	height :auto;
}

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