Blogger 에 댓글을 넣는 세 자리

Blogger 에 이미 있는 댓글, 무엇을 대신하려는 건가

Blogger 테마에는 댓글 영역이 처음부터 들어 있고, 그 영역은 글과 같은 Blog 위젯이 그립니다. 레이아웃 데이터 태그 목록을 보면 allowComments, numComments, addCommentUrl이 글 제목, 본문 태그와 나란히 놓여 있습니다. 기본 댓글창은 위에 얹은 기능이 아니라 테마의 일부라는 뜻입니다. 모양만 손보려 해도 결국 템플릿 코드를 열어야 합니다.

이걸 갈아 치우는 이유는 대개 셋 중 하나입니다. 여러 사이트의 댓글을 한 화면에서 관리하거나, 테마가 만들어진 연도가 그대로 드러나는 댓글창을 걷어내거나, 블로그와 다른 지면의 댓글 모양을 하나로 맞추려는 경우입니다. 댓글을 옮겨 심는 일은 기대하지 않는 편이 낫습니다. Blogger 양식으로 달린 댓글은 Blogger 에 남고, 새 위젯은 모든 글에서 빈 상태로 시작합니다.

한 가지는 유리합니다. BootSignal 댓글은 방문자에게 Google 로그인을 받는데, Google 이 운영하는 블로그 플랫폼에 들어온 독자는 이미 로그인한 채로 도착하는 경우가 많습니다.

테마 편집기를 열기 전에 댓글창을 먼저 본다

들어가는 길과 각 길이 치르는 대가

Blogger 는 HTML 을 붙여넣을 자리를 세 곳 줍니다. 그중 글 본문 아래에 댓글창을 놓을 수 있는 곳은 하나입니다. 클릭하기 전에 내가 원하는 것이 어느 줄인지 골라 두세요.

셋 중 어느 것도 등급을 올려야 열리는 기능은 아닙니다. 레이아웃의 가젯 추가, 테마의 HTML 수정, 테마 백업이 모두 고객센터 문서에 유료 조건 없이 적혀 있습니다. Google 은 Blogger 요금 페이지를 따로 내놓지 않으므로, 이건 인용할 만한 약속이 아니라 막는 것이 없다는 뜻으로 읽으세요. blogger.com 에서 돈 이야기가 나오는 곳은 blogspot.com 주소 대신 맞춤 도메인을 사는 대목 하나입니다. 비용을 내는 쪽은 아래에 적어 둔 BootSignal입니다.

A 안: 가젯으로 사이드바에 다는 길

1. blogspot 주소 또는 그 자리를 대신한 도메인을 등록한다

   Blogger 블로그는 만들어진 날부터 yourname.blogspot.com에 있고, 설정 > 게시 > 맞춤 도메인에서 자기 도메인을 붙이지 않는 한 계속 그 주소에 있습니다. 도메인을 붙이면 blogspot 주소는 블로그를 직접 보여 주는 대신 그 도메인으로 넘겨 줍니다. 그 화면에 Blogger 가 적어 둔 대로, 이 넘김이 실제로 작동하기까지는 시간이 걸립니다. 그러니 BootSignal 사이트 설정 을 열고, 발행된 글을 열었을 때 주소창에 뜨는 호스트네임을 넣으세요. 도메인을 옮긴 지 얼마 되지 않아 옛 링크가 아직 blogspot 주소로 들어온다면 그 주소도 함께 넣습니다. 국가 코드가 붙은 표기는 따로 등록하지 않아도 됩니다. yourname.blogspot.co.uk 같은 주소는 .com 쪽으로 리디렉션되므로, 어느 나라 독자든 결국 등록해 둔 호스트네임에 도착합니다. 등록하면 site id 가 나오고, Blogger 에 넣는 값은 그 하나입니다. 위젯은 location.hostname을 등록 목록과 맞춰 보고, 목록에 없는 곳에서는 아무것도 그리지 않습니다.

2. HTML/JavaScript 가젯을 추가한다

   Blogger 에 로그인해 고칠 블로그를 고릅니다. 왼쪽 메뉴에서 레이아웃(Layout) 을 클릭하고, 넣으려는 영역에서 가젯 추가를 클릭합니다. 창이 열리면 HTML/JavaScript를 골라 추가합니다. 이 가젯에는 제목과 내용, 두 칸만 있습니다. 댓글창 위에 제목을 달 생각이 없다면 제목은 비워 두고, 아래 두 줄을 콘텐츠 칸에 붙여넣은 다음 왼쪽 아래 저장을 클릭합니다.

   코드복사

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>
   <div data-bootsignal="comments" data-thread-id="blogger-sidebar"></div>

3. 라이브 블로그를 열어 눈으로 확인한다

   가젯은 자기 레이아웃 영역에 그려집니다. 사이드바에 넣으면 댓글창도 사이드바에, 그것도 모든 페이지에 뜹니다. 글마다 대화가 하나씩 생기는 것이 아니라 블로그 전체가 한 대화가 됩니다. 붙여넣은 data-thread-id가 고정된 키 하나이기 때문입니다. 이 길의 분명한 한계가 거기 있습니다. 방명록 성격의 댓글창에는 맞지만, 독자가 이 글에 댓글을 단다고 할 때 떠올리는 모습과는 다릅니다.

B 안: 모든 글 아래에 진짜 댓글창

1. 테마 편집기를 연다

   Blogger 에 로그인해 고칠 블로그를 고르고, 왼쪽 메뉴에서 테마를 클릭합니다. 지금 쓰는 테마 카드의 더보기를 누르고 HTML 수정을 고릅니다. 이제 텍스트 상자 하나에 템플릿 전체가 들어 있습니다. 이 화면 때문에 백업을 먼저 내려받은 것입니다.

2. Blog 위젯과 본문 태그를 찾는다

   type='Blog'인 b:widget 태그를 찾습니다. 관례상 id='Blog1'입니다. Blogger 위젯에는 id='main'인 includable 이 하나씩 있고, 공식 테마는 글 마크업을 두 번째 includable(보통 id='post') 로 떼어 내 b:include로 불러옵니다. 그 사슬을 따라갈 필요는 없습니다. 파일에서 <data:post.body/>를 검색하세요. 문서에 게시물의 콘텐츠라고 적힌 태그이며, 그것이 기준점입니다.

3. 본문 태그 바로 뒤에 마운트를 붙여넣는다

   b:if 사이에 놓인 것은 개별 글 페이지에서만 그려집니다. data:blog.pageType이 item, archive, index 중 하나라고 문서에 적혀 있기 때문입니다. Blogger 는 속성 따옴표를 XML 이스케이프해서 쓰므로 조건이 "item"로 보이는데, 우회가 아니라 Blogger 자신의 예시가 그렇습니다. expr: 접두는 데이터 태그를 글자로 출력하지 않고 속성 값으로 넣는 방법이며, data:post.id가 글마다 다른 스레드 키를 줍니다. data:post.url도 되지만 대가가 하나 따릅니다. 나중에 고유주소를 바꾸면 대화는 옛 키 아래에 남습니다.

   코드복사

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div data-bootsignal='comments' expr:data-thread-id='data:post.id'></div>
   </b:if>

4. 로더는 템플릿 끝에 한 번만 넣는다

   로더는 모든 페이지에서 실행되는 자리라면 어디든 되고, 같은 파일의 </body> 바로 앞이 가장 무난한 자리입니다. 내년에 마운트를 다섯 개 더 붙여도 템플릿의 스크립트 태그는 계속 이것 하나입니다. 파일이 XML 형식이니 defer에 값을 명시하고, 여는 태그는 모두 닫아 줍니다.

   코드복사

   <script src='https://bootsignal.com/bootsignal.js'
           data-site-id='YOUR_SITE_ID' data-lang='ko' defer='defer'></script>

5. 저장하고 발행된 글에서 확인한다

   저장을 클릭하고 라이브 블로그에서 실제 글을 열어 본문 아래로 내려가 봅니다. 테마 미리보기로 판단하지 마세요. 그 화면은 Blogger 가 자기 편집기 안에서 그린 것이지 독자가 받는 페이지가 아니며, 서드파티 스크립트가 거기서 어떻게 실행되는지는 고객센터 문서에 없습니다.

Blogger 기본 댓글 양식은 끈다

둘을 함께 돌리면 글 끝마다 댓글 칸이 두 개 놓입니다. 독자는 아무거나 하나를 고르고, 대화는 갈라지며, 답은 두 곳에서 하게 됩니다. 새 위젯을 올리기 전에 어느 쪽을 쓸지 정하세요.

스위치는 둘입니다. 블로그 전체용은 Blogger 설정 화면에서 댓글 항목이 모인 자리에 있습니다. 고객센터의 글 작성 문서가 그 라벨을 적어 두지 않았으니, 이 글을 포함해 어디선가 베낀 라벨 대신 지금 내 화면에 뜬 말을 믿으세요. 확실한 쪽은 테마입니다. 그리고 그 파일은 이미 열려 있습니다. Blog 위젯 안에서 기본 댓글 영역은 b:include로 불려 오므로, 그 include 를 절대 참이 되지 않는 b:if로 감싸거나 줄을 지우면 양식이 페이지에서 빠집니다.

글 단위로는 테마들이 보통 data:post.allowComments를 보고 기본 양식을 켜거나 끕니다. 그래서 한 글에서 댓글을 끄면 그 글에서만 양식이 사라집니다. 어느 스위치를 쓰든, 걷어 내는 영역은 지금까지 내 댓글을 그려 온 곳입니다. 댓글은 Blogger 에 저장된 채로 남고 페이지에서만 보이지 않게 됩니다.

Blogger 설치가 실제로 어긋나는 자리

혼합 콘텐츠, Google 이 실패로 못 박아 둔 것

표현은 Google 의 것입니다. 처음 HTML 은 HTTPS 로 안전하게 받아 오고 뒤따르는 콘텐츠는 안전하지 않은 HTTP 로 불러올 때 혼합 콘텐츠 오류가 난다고 적혀 있으며, 그 결과를 "will degrade both HTTPS security and the user experience of your blog"라고 표현합니다. HTTPS 보안과 블로그 사용자 경험을 모두 떨어뜨린다는 뜻입니다. 해결법은 반씩 갈라 찾는 것입니다. Google 것이 아닌 가젯을 떼고 블로그를 확인한 다음, 범인이 드러날 때까지 하나씩 다시 붙입니다. BootSignal 로더와 그것이 받아 오는 것은 모두 HTTPS뿐이니, 블로그가 이미 이 경고를 내고 있다면 그것부터 정리하세요. 그러지 않으면 새로 붙인 위젯을 탓하며 오후를 보내게 됩니다.

저장이 안 되는 저장

Blogger 테마는 고유한 XML풍 태그 언어를 씁니다. b:section, b:widget, b:includable, b:include, b:if, b:loop에 XML 이스케이프된 속성 값이 붙습니다. 실무적으로는 붙여넣은 스크립트가 <, &, &&를 그대로 담고 있으면 파일이 저장되지 않을 수 있다는 뜻입니다. 고객센터는 이 실패도, CDATA 요구도 적어 두지 않았으니 규칙이 아니라 용의자로 다루세요. 저장이 거절되고 편집기가 붙여넣은 자리 근처를 가리키면 그 문자들부터 살펴봅니다. 이 글의 스니펫 둘에는 그런 문자가 없습니다.

위젯이 맞춰 보는 호스트네임

마운트는 그려졌는데 댓글이 올라오지 않거나 로그인이 튕긴다면 도메인부터 살펴봅니다. 위젯은 내 site id 에 등록된 호스트네임에서만 응답하고 Google 로그인은 페이지 출처를 확인하므로, yourname.blogspot.com과 yourname.com은 이름만 둘인 한 블로그가 아니라 등록 항목 둘입니다. 휴대폰에서도 확인하세요. b:widget에는 pageType 옆에 mobile 속성이 있고, 테마가 데스크톱에서는 위젯을 보여 주고 작은 화면에서는 숨기는 일이 있습니다.

글 하나가 터져도 청구서가 움직이지 않는 이유

BootSignal 은 등록 도메인 단위로 월 $20 또는 연 $200, 모든 위젯 포함입니다. 내년에 나오는 위젯도 들어가고, 가격에 페이지뷰나 댓글 수에 따른 항목이 없습니다. 이 사실은 다른 어느 곳보다 Blogger 에서 크게 작용합니다. 어딘가에 걸린 blogspot 글 하나가 하루 40명이 읽던 글에서 한 주 내내 4 만 명이 읽는 글로 뛰는 일이 있고, 트래픽으로 값을 매기는 댓글 도구는 하필 그 주에 비싸집니다. 다른 주소를 쓰는 두 번째 블로그는 등록이 하나 더 필요하며, 대시보드에서 추가합니다.

카탈로그에는 유료 위젯 34개와 무료 브라우저 도구 33개가 있고, 어느 쪽이 어느 쪽인지는 요금 지면 에 적혀 있습니다. 다른 호스팅형 댓글 서비스와 가격을 나란히 놓은 비교는 비교 지면 에 두었습니다. 그 숫자들은 바뀌고, 낡은 숫자는 없는 것보다 나쁩니다.

테마 파일을 열어 둔 김에 한 줄 더

방금 붙인 로더는 나머지 BootSignal 위젯도 함께 실행합니다. 그래서 두 번째 위젯은 div 하나로 끝납니다. Blogger 글에서 가장 자연스러운 짝은 조회수이고, 스레드 키를 같은 방식으로 받아 글 키를 그대로 나눠 쓸 수 있습니다.

<div data-bootsignal='viewcount' expr:data-thread-id='data:post.id'></div>

편집기를 닫기 전에 내 수정이 담긴 테마 백업을 한 번 더 내려받고, 스니펫 둘과 site id 를 블로그 메모와 같은 곳에 두는 텍스트 파일에 적어 두세요. 다음에 테마를 바꾸면 Blogger 가 HTML 을 교체하고 마운트 둘도 함께 사라집니다. 그 파일이 있으면 되돌리는 데 2분이면 되고, 없으면 이 글을 다시 읽느라 저녁을 보내게 됩니다.