2019年1月30日追記
2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。
ご了承ください。
2020年には埋め込みに使っていたAPIが使えなくなるので、この記事情報では設置ができなくなる可能性があります。
ご了承ください。
以前に紹介した埋め込み方法が非対応になっていました
最新のinstagram.jsだと、以前に紹介した方法では表示されない事がわかりました・・・
記述を対応した造りに変えれば対応できそうですが、なんだか面倒そうなので別の手段を紹介します。
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’ ><img src='{$imgSrc}’></a></li>”;
}
echo “</ul>\n”;
}
}
?>
//アクセストークンからインスタのデータを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’ ><img src='{$imgSrc}’></a></li>”;
}
echo “</ul>\n”;
}
}
?>
■には取得したアクセストークンを記述します。
●には何件表示させるのかを半角数字で記述します。
配置したい場所にphpで記述を追加しましょう。
ここまでできれば後はレイアウトだけです。
今回の例ではulタグやliタグが入っていますが、もちろん都度変えても問題ありません。
Webサイトに合ったHTMLと、CSSで独自のデザインを作っていきましょう。
WordPressを利用の場合はプラグインで対応
ふとWordPressとの連携が気になったので調べてみました。
するとわんさか情報が見つかるではありませんか！さすが利用率トップのCSMですね。
Instagramからの操作でアクセストークンの取得などが必要になるそうですが、ページへの埋め込み自体はプラグインでできるようです。
アクセストークンやユーザーIDを設定してあげることで、それからの設置は簡単にできそうですね。
