구글 블로그 랜덤 추천 포스트 기능 직접 만들기

이번 글은 짧게 쓸 내용이 절대 아니지만, 최대한 짧게 쓰고 싶다.

이 기능을 완벽하게 구현하느라 많은 시간을 써서 지쳤기 때문이다.

완성된 모습부터 캡처하고 시작하겠다.

이게 이번에 완성한 구글 블로그에서 포스트를 랜덤으로 가져와서 보여주는 랜덤 추천 글 기능이다.

오늘은 이 기능을 구현한 코드를 올려볼까 한다.

랜덤 추천 포스트 기능을 지원하는 구글 블로그 템플릿도 있다

내가 약 3년 전에 만들었다가 운영을 포기했던 예전 구글 블로그다.

(카카오 데이터 센터의 화재로 티스토리 블로그가 먹통이 되었을 때, 더 이상 티스토리에 글 못 쓰겠다고 생각하며 만들었다가 결국 포기하고 다시 티스토리로 돌아갔었다.. 티스토리는 그때 그냥 버렸어야 했는데..)

이 블로그에도 랜덤 추천 글 기능이 보인다.

그런데 이 블로그의 랜덤 추천 글 기능은 직접 코드를 입력해서 어렵게 구현한 것이 아니고, 당시에 사용하던 템플릿에 기본적으로 탑재된 기능이었다.

HTML/자바스크립트 위젯을 추가해서, 코드도 아닌 이런 간단한 텍스트만 올리면 자동으로 랜덤 추천 포스트 기능이 구현됐었다.

이렇게 구글 블로그에 어떤 템플릿을 사용하느냐에 따라 이 랜덤 추천 포스트 기능은 기본으로 탑재되어 있을 수도 있고, 지금의 이 Amalia 템플릿처럼 그런 기능을 지원하지 않을 수도 있다.

구글 블로그에 랜덤 추천 포스트 위젯을 만드는 코드

<div class="PopularPosts">
  <div id="random-posts-list"></div>
</div>

<script>
  function getRandomPosts(data) {
    var posts = data.feed.entry;
    var numPosts = posts.length;
    var randomIndexes = [];
    var limit = 6;

    while (randomIndexes.length < limit) {
      var randomIndex = Math.floor(Math.random() * numPosts);
      if (randomIndexes.indexOf(randomIndex) === -1) {
        randomIndexes.push(randomIndex);
      }
    }

    var randomPosts = [];
    for (var i = 0; i < limit; i++) {
      var post = posts[randomIndexes[i]];
      var postTitle = post.title.$t;
      var postUrl = post.link.filter(link => link.rel === 'alternate')[0].href;

      /* 작성 날짜 가져오기 */
      var postDate = new Date(post.published.$t);
      var formattedDateISO = new Date(post.published.$t).toLocaleString('sv-SE', { timeZone: 'Asia/Seoul' }).replace(' ', 'T') + '+09:00';
      var formattedDate = (postDate.getMonth() + 1) + '월 ' + ('0' + postDate.getDate()).slice(-2) + ', ' + postDate.getFullYear();


      /* 포스트 썸네일 */
      var postImageUrl = post.media$thumbnail ? post.media$thumbnail.url.replace(/\/s\d+-c/, "/w120") : 'https://4.bp.blogspot.com/-eALXtf-Ljts/WrQYAbzcPUI/AAAAAAAABjY/vptx-N2H46oFbiCqbSe2JgVSlHhyl0MwQCK4BGAYYCw/s120/nth-ify.png';
      var posterImage = postImageUrl ? '<span class="post-thumb lazy-ify" data-image="' + postImageUrl + '" style="background-image:url(' + postImageUrl + ')"></span>' : '';

      randomPosts.push('<article class="popular-post post"><div class="post-image-wrap"><a aria-label="' + postTitle + '" class="post-image" href="' + postUrl + '">' + posterImage + '</a></div><div class="post-header"><div class="post-meta"><time class="post-date published" datetime="' + formattedDateISO + '">' + formattedDate + '</time></div><h2 class="post-title"><a href="' + postUrl + '">' + postTitle + '</a></h2></div></article>');
    }

    document.getElementById('random-posts-list').innerHTML = randomPosts.join('');
  }

  function loadScript(url) {
    var script = document.createElement('script');
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  loadScript('/feeds/posts/summary?alt=json-in-script&max-results=100&callback=getRandomPosts');
</script>

<style>
  .post-image span {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

어쨌든 개고생을 하며 만든 코드를 올려본다.

블로그 관리 페이지의 왼쪽 메뉴 '레이아웃'에서 HTML/자바스크립트 위젯을 추가해서 코드를 올리고 저장하자.

이 모든 기능을 스스로 다 구현한 것은 아니고, 이미 작년에 '랜덤 추천 포스트 기능을 지원하지 않는 템플릿의 구글 블로그에도 랜덤 추천 포스트 기능을 만들 수 있는지' 영어로 검색해 보다가 어느 선구자 님께서 올려놓으신 코드를 보게 되었다.

그런데 디자인도 내 블로그와는 맞지 않았고, SEO 관련해서 놓친 부분도 많았고, 포스트에 썸네일이 없을 경우의 대체 썸네일도 지정하지 않는 등.. 여러 가지 고쳐야 할 부분들이 많았는데 그 모든 문제를 다 직접 수정한 코드다.

(그래도 수정 전의 원래 코드를 올려주신 분의 글이 있는 링크를 올리고 싶은데.. 작년에 봤던 글이라 지금 찾아봐도 기억나지 않는다..)

일단 현재 내가 사용중인 구글 블로그 템플릿인 Amalia에 맞게 만들어진 코드라서 다른 템플릿을 사용 중인 구글 블로그에는 어떻게 표시될지 잘 모르겠다.

어쨌든 코드에서 본인의 블로그에 맞게 직접 수정해야 할 부분은 다음과 같다.

• var limit = 6;: 위젯에 표시할 랜덤 포스트 개수를 6개로 지정한다.
• max-results=100: 최신 게시물 100개를 가져온다.

부연 설명을 하자면, max-results=100은 블로그에 총 300개의 게시물이 있더라도 최신 게시물 100개만 반환한다. 그리고 100개의 게시물 중에서 6개를 랜덤으로 선택하여 표시한다.

즉, 나머지 200개의 게시물(오래된 글)은 랜덤 선택 대상에서 제외되는 것이다.

그렇다면 본인의 블로그의 총 포스트 수에 맞게 자주 바꿔주면 된다고 생각하겠지만, 요청하는 게시물 수가 많아질수록 데이터 로딩 시간이 길어질 수 있으니 블로그의 성능을 고려하여 적절한 값을 설정하는 것이 좋다.

랜덤 추천 포스트 위젯에 썸네일이 뜨지 않는 포스트가 있다면?

내 블로그에는 썸네일이 없는 포스트가 단 하나도 없었는데, 랜덤 추천 포스트 위젯에는 이렇게 썸네일이 없는 포스트가 뜨는 일이 생겼다.

(위에서도 설명했지만, 내가 코드를 수정하기 전에는 이런 대체 이미지도 없이 아무런 이미지도 표시되지 않았었다.)

구글 블로그에서 포스트 썸네일을 선택하는 방법

구글 블로그에서 원하는 이미지를 포스트 썸네일로 설정하는 방법을 알아봅니다. 블로그의 썸네일 시스템을 이해하고, 숨겨진 <img> 태그를 활용해 원하는 썸네일을 지정하는 실용적인 팁과 코드, 그리고 그 이유를 자세히 설명합니다.

이 현상의 원인은 이 포스트의 내용과 관계가 있다.

이 포스트에서 알려준 방법대로 포스트의 썸네일을 본인이 직접 포스트에 업로드 한 사진을 사용하지 않고, 외부 사이트의 URL을 가져와서 썸네일로 사용한 경우에는 이렇게 된다.

그러니 썸네일이 없는 포스트가 신경이 쓰인다면, 썸네일로 사용할 이미지는 항상 포스트 안에 업로드 해서 사용하도록 하자.

글을 짧게 쓰고 싶다고 해놓고선 또 글 쓰는데만 몇 시간이 걸렸다.

이렇게 스스로 땀 흘려가며 노력해서 구현하고 글도 쓰면서 공유하는 코드를 마치 본인이 만든 것처럼 다른 곳에 올리는 바보는 없길 바란다.

발견하면 진짜 고소할 거다.

링크를 적극적으로 이용해 주시길.

강의팔이 전자책팔이에게 속아서 블로그를 하는 사람들에게 (feat. 랜덤 포스트 썸네일 개선)

블로그로 쉽게 돈을 벌 수 있다는 강의팔이, 전자책팔이들의 허상에 속아 블로그를 시작한 사람들에게 던지는 솔직한 메시지입니다. 또한, 구글 블로그의 랜덤 포스트 썸네일 문제를 해결하는 개선된 코드와 그에 얽힌 고민도 함께 담았습니다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.