<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>페이스북 API</title>
</head>
<body>
<!-- 페이스북 영역 -->
<div id="facebook_area" style="background: black; text-align: center">
<!-- 페이스북 제목 -->
<div class="facebook_title" style="color: white">Facebook</div>
<!-- 페이스북 콘텐츠 -->
<div class="facebook_contents" align="center" style="background: white">
<div
id="facebook-feed"
style="display: flex; flex-direction: row"
></div>
<!-- -->
<script>
function updateFacebookFeed() {
var pageId = "";
var accessToken =
"";
$.ajax({
method: "GET",
data: {
fields: "created_time,message,message_tags,full_picture,id",
access_token: accessToken,
limit: 3,
},
success: function (data) {
// 수정: feedContainer 변수명 수정
var feedContainer = $("#facebook-feed");
feedContainer.empty(); // 기존 내용 비우기
for (var i = 0; i < Math.min(3, data.data.length); i++) {
var post = data.data[i];
var postContainer = $("<div>").css("margin-bottom", "20px");
// 이미지가 있는 경우에만 이미지 추가
if (post.full_picture) {
// 수정: 이미지 크기 500으로 고정
var imageElement = $("<img>")
.attr("src", post.full_picture)
.css("width", "500px");
// IIFE를 사용하여 클로저 생성
(function (postId) {
imageElement.click(function () {
window.open(
"_blank"
);
});
})(post.id);
postContainer.append(imageElement);
}
// 텍스트 추가
if (post.message) {
var postContent = $("<p>").text(post.message);
// IIFE를 사용하여 클로저 생성
(function (postId) {
postContent.click(function () {
window.open(
"_blank"
);
});
})(post.id);
postContainer.append(postContent);
}
feedContainer.append(postContainer);
}
},
error: function (error) {
console.error("Failed to fetch Facebook data:", error);
},
});
}
// 초기 로딩 시 업데이트 실행
updateFacebookFeed();
// 5초마다 업데이트 실행
setInterval(updateFacebookFeed, 5000);
// 추가: Sticky Kit 적용
$("#facebook_area").stick_in_parent();
</script>
<!-- -->
</div>
</div>
</body>
</html>
'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
| HTML 1일차 - title, style, script (1) | 2024.04.18 |
|---|---|
| Google Api -Youtube data Api v3 (0) | 2023.12.26 |
| Instagram API 를 이용하여 게시물 가져오기(수정본) (0) | 2023.12.20 |
| Instagram API 를 이용하여 게시물 가져오기 (0) | 2023.12.20 |
| IIFE(Immediately Invoked Function Expression) (0) | 2023.12.12 |
