How to Add a Comment Widget to Tistory

What Tistory asks of you before you start

This is the unusual part for anyone arriving from a site builder. Squarespace runs third-party scripts only from a certain plan up, Wix wants a connected domain, and both send you looking for a checkout page. Tistory has no plans at all. The service front page sells nothing, and the help articles that describe skin editing describe it as a feature of the blog rather than of a subscription.

So the two conditions worth knowing are not financial. First, you need a blog on the account, and Tistory's help says an account runs up to 5 of them while the address itself is fixed once created: "이미 개설한 티스토리 주소(URL)는 변경할 수 없습니다." An address, once opened, cannot be changed. Second, and this is the one that bites months later, swapping the skin wipes what you did in HTML/CSS 편집 and the files you uploaded next to it. The install below takes ten minutes. Recovering it after a skin change takes ten minutes too, but only if you kept the snippets somewhere.

Three tabs, and only one of them is the file you want

Tistory describes the screen plainly in its own guide: "현재 사용중인 스킨을 직접 편집하거나, 스킨에 포함된 파일을 관리할 수 있습니다." You edit the skin in use directly, or manage the files inside it. Which is to say the tab strip is the whole map, and it is short.

That last line answers the question people actually arrive with, which is whether a third-party script is allowed to run at all. The vendor's own guidance treats added scripts as normal and asks for care rather than forbidding them: "맞춤법 오류, 태그를 닫지 않은 경우, 무리하게 스크립트를 추가하는 경우 블로그가 정상적으로 보이지 않을 수 있으니 주의해주세요." Typos, unclosed tags and reckless script additions can leave the blog rendering wrong. The official Tistory theme published by the vendor loads a script from an external CDN in its own skin.html, and a live Tistory blog served today runs scripts from domains that are not Tistory's, with no Content-Security-Policy header in the response to stand in the way.

Both of your addresses have to be registered

A Tistory blog answers on the address it was created with. Attach a domain of your own under 관리 > 블로그 (blog management) after buying it and pointing DNS, and the blog answers there too, which means the widget has two hostnames to recognize rather than one. Register both. Tistory covers the certificate side either way: "티스토리는 서비스 도메인과 외부 도메인 모두에 https를 지원합니다." Both the service domain and an external domain get https, which is what the sign-in popup requires.

The install

1. Put both addresses on the same site id

   Open a published post, read what the address bar says, and add that hostname in your BootSignal site settings. If a domain of your own is attached, add the tistory.com address next to it rather than instead of it: the admin screens still live there, and old links keep arriving. What comes back is a site id, and that string is the only value you type into Tistory. The widget compares location.hostname against the list behind that id and draws nothing on a hostname that is not on it.

2. Open 꾸미기 > HTML/CSS 편집 and copy skin.html out first

   In the blog admin, the skin editing screen opens on the skin.html tab, which is the whole file in one editor. Before you type anything, select all of it and paste it into a text file on your own machine. Tistory offers no restore button on this screen, and the reset that arrives with a skin change is the reason this guide exists. Name the file with today's date and keep it wherever you keep the blog's other notes.

3. Paste the mount beside the comment region

   Search the file for <s_rp>. The skin guide describes that block as the one whose substitution tags are printed when the page is reached as a comment view, so it marks where Tistory already draws its own comment area. Leave the block intact for now and put the mount just before it. The second element is an inline script rather than an attribute, and the reason is in the next step.

   SnippetCopy

   <div data-bootsignal="comments" id="bs-thread"></div>
   <script>
     document.getElementById('bs-thread')
       .setAttribute('data-thread-id', location.pathname);
   </script>

4. Let the post address decide the thread key

   A Tistory post lives at a numbered path, and skin.html is one file shared by every post on the blog. Type a fixed key into the mount and all of them share one conversation. Reading location.pathname gives each post its own, and the timing works because the loader scans for mounts once the document is parsed while that inline script runs during parsing. Add the loader before the closing body tag, once, no matter how many widgets you end up with.

   SnippetCopy

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

5. Preview, save, then open a real post

   The screen has 미리보기 (preview) and 저장 (save) side by side, and Tistory is explicit that the edit reaches the blog only once saved. Preview first to confirm the page still draws, save, then open a published post on the live address. Judge it there rather than in the preview pane, and open your list page too: if your skin renders the post area on more than one kind of page, each of those pages gets its own key from its own path.

What you just pasted

Tistory already draws a comment area, so decide which one stays

You now have two comment areas on the same post, and readers will use whichever one they see first. Split conversations are worse than either choice on its own, so pick before you tell anyone the blog has comments.

Keeping Tistory's own area means readers write with the identity Tistory gives them and the thread you added sits underneath as a second box, which only makes sense while you are testing. Removing it means editing the <s_rp> block out of skin.html, and the consequence is worth stating plainly: those comments are stored on Tistory's side and do not travel. They stop being drawn on the page and nothing more. If there is a thread on an old post you would miss, copy it into the post body before you delete the block.

The skin swap is what undoes this

Every other failure in this guide announces itself. This one does not. Tistory states that applying a skin resets both the HTML/CSS edits and the uploaded files, so the day you try a new design for an afternoon, the widget leaves with the old skin and the page looks fine without it. Nobody files a bug against a comment box that is simply absent.

• The full skin.html you copied out in step 2, dated.
• The two snippets, with your real site id already filled in rather than the placeholder.
• One line saying where in the file they went, for instance immediately before the s_rp block.

Three items in one text file, kept with the blog's other notes. Reapplying them after a skin change is a search and two pastes. Reconstructing them from memory is an evening.

When the thread does not appear

The address is not the one on your site id

This is the first thing to check and the most common cause. The widget answers only on registered hostnames, and sign-in checks the page origin, so a blog reachable at both its tistory.com address and a domain of your own needs both of them registered. Tistory's help also notes that a personal domain can show you as signed out even while you are signed in, thanks to browser cookie policy. That is about Tistory's own session rather than the widget, whose sign-in lives in the browser storage of the page origin, but it is a confusing thing to hit on the same afternoon, so name it before it names itself.

Preview looked right, the live post did not

Preview and save are separate buttons for a reason, and an edit that was only previewed is not on the blog. If you did save and the post still shows nothing, view source on the live post and search for your mount element. Present but empty points at the hostname; absent entirely points at the wrong file position, most often a paste that landed inside a block the current page does not render.

The whole skin looks broken after saving

Undo the paste and reload before debugging anything else, which is the fastest reason to have that copy of skin.html. Tistory's own warning names unclosed tags and heavy-handed script additions in the same breath, so start with the shape of what you pasted rather than with the widget. The two snippets here are one div, one inline script and one script tag, all closed.

What the widget costs, and what it does not scale with

Comments are part of the BootSignal subscription: $20 per month or $200 per year per registered domain, with all 38 paid widgets included and nothing that scales with traffic. That last clause matters more on Tistory than on most platforms, because a Korean blog can sit at a few hundred readers a day for a year and then meet an aggregator, and a comment tool priced by pageviews gets expensive in exactly the week you least want to think about it. A second blog on a different address is a second registration, added from the dashboard. The pricing page lists what is free next to what is not, and the alternatives section puts hosted comment systems side by side.

While the file is open

The loader line you added runs the rest of the catalog too, so a second widget is one div and no more script tags. On a long Tistory post the natural companion is a table of contents, built from the headings already in the article.

<div data-bootsignal="toc"></div>

Add that line to the text file with the others before you close the editor. The next skin you try will take it away with everything else, and the file is what makes that a five minute problem instead of a lost afternoon.