구글 블로거에는 관련 글이 기본으로 안 보입니다
처음 블로그를 시작할 때는, 글만 잘 쓰면 되는 줄 알았습니다. 그런데 글을 쓰고 나서 보면, 독자들이 한 글만 보고 그냥 나가버리는 경우가 많습니다. 그래서 ‘이 글을 읽은 사람은 이런 글도 좋아해요’ 같은 관련 글 목록이 필요합니다.
하지만 구글 블로거에서는 관련 글 기능이 기본으로 제공되지 않습니다. 따로 작업을 해야 합니다.
HTML/자바스크립트로 관련 글 기능 만들기
우선 블로거 관리자 페이지에서 레이아웃으로 들어갑니다. 그리고 관련 글을 보여주고 싶은 위치에 HTML/자바스크립트 추가를 클릭합니다.
예를 들어, 글 본문 하단에 관련 글을 보여주고 싶다면 그 위치에 위젯을 추가하면 됩니다. 위젯 제목은 “관련 글”이라고 써도 되고, 아예 비워둬도 됩니다. 중요한 건 내용에 자바스크립트 코드를 붙여넣는 것입니다.
관련 글을 자동으로 보여주는 자바스크립트 코드
아래 코드를 붙여넣으면, 현재 글에 달린 태그를 기준으로 관련 글을 불러오게 됩니다. 최대 5개까지 자동으로 보여주기 때문에, 따로 하나하나 수동으로 넣지 않아도 됩니다.
function showRelatedPosts() {
var tags = document.querySelectorAll('.post-footer .post-tags a');
var relatedPosts = [];
for (var i = 0; i < tags.length; i++) {
var tag = tags[i].innerText.trim();
var relatedPostsUrl = '/feeds/posts/default/-/' + encodeURIComponent(tag) + '?alt=json-in-script&max-results=5';
var xhr = new XMLHttpRequest();
xhr.open('GET', relatedPostsUrl);
xhr.onload = function() {
if (xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
var entries = json.feed.entry;
for (var j = 0; j < entries.length; j++) {
var entry = entries[j];
var title = entry.title.$t;
var url = entry.link[4].href;
relatedPosts.push({title: title, url: url});
}
var relatedPostsHtml = '';
for (var k = 0; k < relatedPosts.length; k++) {
relatedPostsHtml += '<li><a href="' + relatedPosts[k].url + '">' + relatedPosts[k].title + '</a></li>';
}
document.querySelector('.post-related-posts').innerHTML = relatedPostsHtml;
}
};
xhr.send();
}
}
showRelatedPosts();이 코드를 저장하고 나면, 이제 글을 볼 때마다 자동으로 관련 글이 아래에 나타납니다.
주의할 점은, 이 코드를 출력할 위치에 .post-related-posts라는 클래스를 가진 <div>나 <ul>이 있어야 한다는 것입니다. 예를 들면, 아래처럼 HTML 구조를 하나 추가해두면 됩니다.
<div class="post-related-posts"></div>일상 예시로 이해하기
예를 들어, 내가 블로그에 “파리 여행 코스”라는 글을 썼다고 해보겠습니다. 여기에 #프랑스여행, #파리, #유럽 같은 태그를 달았다고 하면, 이 코드가 작동하면서 같은 태그를 가진 다른 여행 글을 자동으로 불러옵니다.
즉, 독자가 하나의 글을 보고 나서도 다음 글로 자연스럽게 이동하게 됩니다. 마치 넷플릭스에서 한 편 끝나면 자동으로 다음 영상이 재생되는 것처럼 말이죠.
NomadX
@nomadx