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만 명이 읽는 글로 뛰는 일이 있고, 트래픽으로 값을 매기는 댓글 도구는 하필 그 주에 비싸집니다. 다른 주소를 쓰는 두 번째 블로그는 등록이 하나 더 필요하고, 대시보드에서 추가합니다.

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

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

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

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

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