티스토리 블로그 댓글에서 'URL 링크' 입력하는 방법 (Autolinker.min.js)

Blog - 티스토리 댓글·답글 입력할 때 URL 링크 삽입하는 방법

 블로그 방문자가 댓글로 남긴 질문 중 이전에 작성한 포스팅 중 적합한 내용이 있을 때 해당 주소를 안내하는 경우가 많습니다. 중복된 내용을 답변으로 작성하는 것보다 관련 글을 직접 확인하는 것이 더 도움이 될 수도 있기 때문이죠.

 

 그러나 댓글 또는 답글은 HTML 코드 작성 및 링크 삽입 기능을 사용할 수 없어, 답변에 남겨진 주소를 방문자가 클릭하여 바로 이동할 수 없는 탓에 불편함을 느끼는 경우가 많았습니다.

 

 이러한 불편함을 해소하고자 티스토리 댓글에 URL 링크를 삽입할 수 있는 방법을 살펴보겠습니다. 방문자가 해당 글을 읽기 위해 직접 주소를 입력하는 수고스러움 없이 편리하게 사용할 수 있습니다.

블로그 방문자 댓글에 답변 작성 시 관련 URL 링크를 삽입하는 방법

 티스토리 댓글 및 답글에 남겨진 URL을 자동 링크할 수 있도록 'Autolinker.js' 스크립트를 블로그 스킨에 적용하는 방법이며, 댓글에 입력한 주소는 프로토콜(https://)로 시작하는지 여부에 상관없이 URL을 자동으로 링크할 수 있습니다.

 

 예를 들어 https://forbes.tistory.com 을 입력하지 않고, 단순히 forbes.tistory.com 주소만 입력해도 자동으로 연결됩니다. 스크립트는 블로그에 직접 업로드하여 사용하거나, 이미 등록된 주소를 사용하여 댓글에 URL 링크를 사용할 수 있는 자동 링크 코드를 삽입할 수 있습니다.

 

 티스토리 관리 페이지에서 꾸미기 섹션의 [스킨 편집] 메뉴를 클릭합니다.

 

 

 새 탭에서 '스킨 편집' 페이지가 열리면, [html 편집] 버튼을 클릭하여 댓글 URL 자동 링크 기능을 추가하도록 합니다.

 

 

 블로그 스킨 이미지 폴더(경로)에 스크립트 파일을 직접 업로드하고 사용하고 싶다면, 먼저 스킨 편집 창에서 [파일업로드] 탭을 선택하고 [+ 추가] 버튼을 클릭하여, 다운로드한 "Autolinker.min.js" 파일 선택 후 [열기(O)] 버튼을 클릭합니다.

 

Autolinker.min.zip

0.02MB

 

 참고로 스킨 편집 모드에서 업로드한 파일의 경로는 '/images/Autolinker.min.js'가 됩니다. 해당 주소를 복사하여 상대 경로로 삽입하거나, 절대 경로로도 이용할 수 있습니다.

 

 

 자동 링크 스크립트 파일을 업로드했다면, [HTML] 탭을 선택하고 Ctrl + F 키를 눌러 "</s_t3>" 코드를 검색합니다.

 

 </s_t3> 코드를 찾았다면 </div> 코드 사이에 다음 스크립트를 삽입합니다.

 

<script src="./images/Autolinker.min.js"></script>	
<script>
  ( function( $ ) {
    $( 'div[id^="entry"]' ).html( Autolinker.link( $( 'div[id^="entry"]' ).html(), { stripPrefix: false } ) );
  } )( tjQuery );
</script>

 

 

 만약 스크립트 파일을 직접 업로드하지 않을 경우 "./images/Autolinker.min.js" 대신 다음 주소를 입력합니다.

 

https://cdnjs.cloudflare.com/ajax/libs/autolinker/3.15.0/Autolinker.min.js

 

 

 자동 링크 스크립트 삽입 후 [적용] 버튼을 클릭하여 변경 사항을 블로그에 적용합니다.

 

 

 스킨 편집 후 F5 키를 눌러 페이지 새로고침한 뒤 댓글을 입력하면 URL을 자동으로 인식하여 연결합니다. 참고로 댓글 자동 링크 적용 전/후 무관하게 작성한 모든 댓글에서 URL 주소에 대해 자동 링크가 적용됩니다.