php 20180413インスタ埋め込み

Posted 2021-05-04

// get instagram
$(function() {
	$.ajax({
		url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent/?access_token=' + access_token +"&count=" + getCnt,
		dataType: "jsonp",
		error: function(jqXHR, textStatus, errorThrown) {
		},
		success: function(data, textStatus, jqXHR) {
			var html = '';
			for (var i = 0; i < data.data.length; i++) {
				//データ取得
				var d = data.data[i];
				//時間取得（エポック秒）
				time = d.created_time;
				//エポック秒を変換
				date = new Date(Number(time+"000"));
				//img取得
				src = d.images.low_resolution.url;
				//likes数取得
				likes = d.likes.count;
				//comments数取得
				comments = d.comments.count;
				//captiontext取得
				//caption = d.caption.text;
				//link取得
				link = d.link;
				//[html]
				html += '<li>';
				html += '<a href="' + link + '" target="_blank">';
				html += '<div class="photo" style="background-image:url(' + src + ')"></div>';
				html += '<div class="txt">';
				html += '<p class="likes"><i class="fa fa-heart" aria-hidden="true"></i>' + likes + '</p>';
				html += '<p class="comments"><i class="fa fa-comment" aria-hidden="true"></i>' + comments + '</p>';
				html += '</div>';
				html += '</a>';
				html += '</li>';
				html += '</ul>';
			}
			//タグ指定
			$("#instagram").html(html);
		}
	});
	$w.superResize({
		resizeAfter : function() {
			var $img_w = $('#instagram li:first-child').width();
			$("#instagram li").height($img_w + "px");
		}
	});
});

#instagram {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	li {
		width: 16.666%;
		padding: 5px;
		a {
			overflow: hidden;
			position: relative;
			display: block;
			height: 0;
			padding-top: 100%;
			text-decoration: none;
			&:before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.6);
				z-index: 1;
				opacity: 0;
				transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
			}
			&:hover {
				&:before, .txt {
					opacity: 1;
				}
			}
			.photo {
				width: 100%;
				height: 100%;
				background-position: center center;
				background-size: cover;
				position: absolute;
				top: 0;
				left: 0;
			}
			.txt {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				line-height: 1.3;
				color: #fbf6ef;
				text-align: center;
				transform: translate(-50%, -50%);
				z-index: 5;
				opacity: 0;
				p {
					display: inline-block;
					margin: 0 10px;
					i {
						padding-right: 8px;
					}
				}
			}
		}
	}
}

<ul id="instagram"></ul>

<script>
	//instagram
	var access_token = "6778316321.abe49db.b34d34e0cc854b6aba8a1d1d1cd672d9";
	var userid = "6778316321";
	var getCnt = "12";
</script>
<script type="text/javascript" src="./js/instagram.js"></script>