設定手順 – インスタグラムフィード用プログラム

【1】InstagramFeed登録

1）Facebookにログイン（アカウントはKINTON参照）

2）FacebookアプリにInstagramテスターを追加します

3）Instagramにログインしてテスターへのご招待を承認します

4）Facebookアプリの「User Token Generator」に承認したInstagramアカウントが追加されます
　「Generate Token」からアクセストークンをコピーします

5）InstagramFeed登録にアクセストークン、お客様名、掲載先URLを入力して保存（Update）してください

6）ユーザーID、トークン発行日、JSONが自動入力されます

7）10分程で最新のInstagram投稿の取得してJSON（InstagramFeed）を自動生成します

※すぐJSON（InstagramFeed）を生成したい場合はこちらにアクセスしてください
一度登録されたJSON（InstagramFeed）は【無効】に変更しない限り10分間隔で自動処理され常に最新情報を保ちます

【2】サイトへの埋め込み

InstagramのフィードURL

JSON（InstagramFeed）をコピペしてください

jQueryコード

例：instafeeds.js

(function($) {
  if (document.getElementById('instafeed')){ 
    $.getJSON('InstagramのフィードURL',function (insta) {
        // console.log(insta);
        $.each(insta,function (photos,src) {
          if ( photos === 16 ) { return false; } //上限設定
          $('<li><a href="'+src.links+'" target="_blank"><img src="'+src.image+'" alt=""></a></li>').appendTo('#instafeed');
        });
    });
  }
})(jQuery);

HTMLサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>インスタフィードデモ</title>
<style>
#instafeed{
	max-width:750px;
	padding:0;
	margin:0 auto;
  display: flex;
  flex-wrap: wrap;
	list-style: none;
}
#instafeed li{
    width: 23%;
    margin:0 2% 2% 0;
}
#instafeed li:nth-child(4n){
	margin-right: 0;
}
#instafeed li a {
    width: 100%;
    height: 0;
    padding-top: 100%;
    display: block;
    position: relative;
    text-decoration: none;
}
#instafeed li a:hover img{
    -moz-opacity: 0.8;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#instafeed li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>

<ul id="instafeed"></ul>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
(function($) {
  if (document.getElementById('instafeed')){
    $.getJSON('https://instagram.createone.jp/feeds/17841408409029943.json',function (insta) {
        // console.log(insta);
        $.each(insta,function (photos,src) {
          if ( photos === 16 ) { return false; } //上限設定
          $('<li><a href="'+src.links+'" target="_blank"><img src="'+src.image+'" alt=""></a></li>').appendTo('#instafeed');
        });
    });
  }
})(jQuery);
</script>
</body>
</html>

【1】InstagramFeed登録

【2】サイトへの埋め込み

InstagramのフィードURL

jQueryコード

HTMLサンプル

「設定手順」への1件の返信

WordPress コメントの投稿者 へ返信する コメントをキャンセル

WordPress コメントの投稿者へ返信するコメントをキャンセル