phpを使ってインスタグラムの投稿をページに掲載する方法

  • このエントリーをはてなブックマークに追加

以前に紹介した埋め込み方法が非対応になっていました

最新のinstagram.jsだと、以前に紹介した下記方では表示されない事がわかりました・・・

instaglamの投稿画像をWebページへ掲載するには

記述を対応した造りに変えれば対応できそうですが、なんだか面倒そうなので別の手段を紹介します。

phpを使おう!

アクセストークンの取得は必須なので、前回の記事を参照しながら必要な情報を取得しましょう!
続いて、ページ上に設置する為に必要な記述をphpで書いていきます。

それがこちら。

<?php
  //アクセストークンからインスタのデータをjsonで取得
  $json = @file_get_contents(“https://api.instagram.com/v1/users/self/media/recent/?access_token=&count=“);
  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>\n”;
      foreach($arr as $v) {
        $Link = $v[‘link’];
        $imgSrc = $v[‘images’][‘standard_resolution’][‘url’];
        echo “<li><a href='{$Link}’ target=’_blank’ ></a></li>”;
      }
      echo “</ul>\n”;
    }
  }
?>

には取得したアクセストークンを記述します。
には何件表示させるのかを半角数字で記述します。

配置したい場所にphpで記述を追加しましょう。

ここまでできれば後はレイアウトだけです。
今回の例ではulタグやliタグが入っていますが、もちろん都度変えても問題ありません。
Webサイトに合ったHTMLと、CSSで独自のデザインを作っていきましょう。

WordPressを利用の場合はプラグインで対応

ふとWordPressとの連携が気になったので調べてみました。
するとわんさか情報が見つかるではありませんか!さすが利用率トップのCSMですね。

Instagramからの操作でアクセストークンの取得などが必要になるそうですが、ページへの埋め込み自体はプラグインでできるようです。
アクセストークンやユーザーIDを設定してあげることで、それからの設置は簡単にできそうですね。

  • このエントリーをはてなブックマークに追加