jQuery
인스타그램 iframe 에 사진 표시하기
영은파더♥
2020. 1. 7. 09:51
728x90
인스타그램 iframe 에 표시하는 예제 소스코드입니다.
insta_urls 배열에 미리 주소값을 넣어놓으면 사진이 바로 보입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
div.instagram_div { width:900px;height:1200px;padding:50px 0 50px 0;text-align:center;letter-spacing:3px;line-height:0px; }
div.instagram_div > div { float:left;width:293px;height:293px;overflow:hidden;border:1px solid #cecece;margin:0 2px 5px 3px;line-height:293px; }
div.instagram_div > div > iframe { width:293px;height:347px;overflow:hidden;margin-top:-54px; }
div.instagram_div > div > input[type=text] { width:75%;text-align:center; }
</style>
<script>
function SetCookie(cKey, cValue, cExpires) {
var date = new Date();
date.setDate(date.getDate() + cExpires);
document.cookie = cKey + '=' + escape(cValue) + ';expires=' + date.toGMTString();
}
function GetCookie(cKey) {
var allcookies = document.cookie;
var cookies = allcookies.split("; ");
for (var i = 0; i < cookies.length; i++) {
var keyValues = cookies[i].split("=");
if (keyValues[0] == cKey) {
return unescape(keyValues[1]);
}
}
return "";
}
function instagram_div_update(n) {
var insta_urls = new Array(n); // 디폴트 인스타그램 사진주소
var instagram_div = $('<div class="instagram_div"></div>').appendTo($('div.instagram_list_item'));
var instagram_title = $('<h3>INSTAGRAM</h3><br>').appendTo($('div.instagram_div'));
for(var i=0; i<insta_urls.length; i++) {
var insta_img = $('<div><input class="instagram-url" type="text" value="" placeholder="인스타그램 사진주소를 입력하세요" /></div>')
.appendTo($('div.instagram_div'));
insta_urls[i] = GetCookie(i);
if(insta_urls[i] && ~insta_urls[i].indexOf('https://www.instagram.com/p/')) {
//console.log('url : ' + insta_urls[i]);
instagram_load($('input.instagram-url:eq('+i+')'), insta_urls[i]);
}
}
$('input.instagram-url').change(function(){
var i = $('input.instagram-url').index(this);
if(this.value.indexOf('https://www.instagram.com/p/')) {
alert('올바른 주소가 아닙니다.\nhttps://www.instagram.com/p/xxxxxxxxxxx/ 형식의 주소입니다.');
} else {
SetCookie(i, this.value, 1);
instagram_load(this, this.value);
}
});
}
function instagram_load(obj, url) {
$(obj).hide();
var ifrm = $('<iframe src="'+url+'embed" frameborder="0" scrolling="no" allowtransparency="true"></iframe>').appendTo($(obj).parent());
}
$(document).ready(function(){
instagram_div_update(9);
});
</script>
</head>
<body>
<div class="instagram_list_item"></div>
</body>
</html>
응용해서 사용하시면 됩니다.
728x90
반응형