티스토리 댓글과 라이브리를 효과적으로 사용하는 방법

평소 티스토리 계정이 없는 사람들도 제 블로그에서 자유롭게 댓글을 남길 수 있는 방법을 찾고 있었습니다. 그때 나타난 것이 라이브리(LiveRe)였습니다. 간단하게 클릭 한 번으로 트위터나 페이스북 계정으로 댓글을 남길 수 있으니 무척이나 편리해서 한동안 잘 사용했었습니다. 그런데 라이브리는 현재 유료계정에만 신경쓰는 듯 하고 무료계정은 왠지 홀대하는 것 같더군요. 처음에는 내 블로그에 들어와 코드까지 봐 주는 친절을 베풀더니 요새는 오류가 생겨 문의를 해도 그냥 죄송하다고만 합니다.ㅜㅜ

 

 

글쎄요.. 라이브리 항상 잘 나갈 수 있을까요? 한 방에 훅 갈 수 있는 곳이 이 바닥인데....

어느 좋은 티스토리 블로거께서 코드를 제공해 주셔서 아래와 같이 라이브리를 일단 살려 놓긴 했습니다.

마지막으로 한번만 더 참아 보려고요. 현재 많은 사람들이 이용하고 있는 디스커스로 갈아 탈려고 했더니 디스커스는 왠지 좀 혼란스럽더군요.

 

 티스토리 댓글과 라이브리 댓글을 같이 사용할 수 있는 팁을 아래에 기록으로 남깁니다.

이 코드는 "뭐하라"님과 "A TearDrop"님께서 제공해 주셨습니다.

 

 

 

제 블로그 본문 아래의 댓글창입니다.

티스토리 댓글창과 라이브리 댓글창, 트랙백을 3개의 탭으로 나누어서 기록할 수 있게 했습니다.

코드는 아래와 같습니다.

 

1. Skin.html에서 고쳐야 할 부분

 

<!-- tab_comment -->

<ul class="tabs">

  <li class="active" rel="tab1">티스토리 댓글:[$$_article_rep_rp_cnt_$$]</li>

  <li rel="tab2">라이브리 </li>

  <li rel="tab3">트랙백:[$$_article_rep_tb_cnt_$$] </li>

</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">

여기에 티스토리 댓글에 해당되는 코드 <s_rp>부터 </s_rp>까지를 잘라내어 붙여넣습니다.

(티스토리 관리자 화면에서  "화면설정 - 화면출력" 에서 반드시 '댓글펼침'으로 설정 해두셔야 합니다)

</div>

  <!-- #tab1 -->

<div id="tab2" class="tab_content">

여기에 자신의 LiveRe 코드를 넣습니다.

</div>

  <!-- #tab2 -->

<div id="tab3" class="tab_content">

여기에 티스토리 트랙백에 해당되는 코드 <s_tb>부터 </s_tb>까지를 잘라내어 붙여넣습니다.

(티스토리 관리자 화면에서  "화면설정 - 화면출력" 에서 반드시 '트랙백 펼침'으로 설정해 두셔야 합니다)

</div>

  <!-- #tab3 -->

</div>

 

<script type="text/javascript">

$(document).ready(function() {

$(".tab_content").hide();

$(".tab_content:first").show(); 

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active");

$(this).addClass("active");

$(".tab_content").hide();

var activeTab = $(this).attr("rel"); 

$("#"+activeTab).fadeIn(); 

});

});

</script> 

 

---

 

 

※ 위에서 파란 글씨의 코드 <script>...</script>부분은 그대로 넣어셨다가 작동이 안되시는 분들은 <script>의 위치를 </body>바로 위쪽으로 옮겨보세요. 그래도 안되면 jQuery가 로딩되지 않은 것이니, 윗줄에 < SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 를 붙여넣으세요.
※ [$$_article_rep_rp_cnt_$$]는 댓글 갯수 치환자입니다. $$를 ##으로 바꿔주어야 작동합니다.
※ 코멘트와 트랙백은 "티스토리 관리자 화면 - 화면설정 - 화면출력" 에서 반드시 '펼침설정'으로 해두셔야 하고, 기존의 코멘트 접고 펼치는 단추는 없애는게 좋습니다.

 

 

 

 

2. CSS에 추가할 부분

 

ul.tabs {

    float: left;

    height: 51px;

    list-style: none;

    margin: 1em 0;

    padding: 0;

    width: 100%;

}

ul.tabs li {

    background-color: #eee;

    border-radius: 1em 1em 0 0;

    color: #999;

    cursor: pointer;

    float: left;

    height: 50px;

    line-height: 50px;

    margin: 0;

    overflow: hidden;

    padding: 0 21px;

    position: relative;

    width: 50%;

}

ul.tabs li:hover {

    background-color: #ccc;

    color: #333;

}

ul.tabs li.active {

    background-color: #2a677e;

    border-bottom: 3px solid #3bafda;

    color: #fff;

    display: block;

}

.tab_container {

    clear: both;

    overflow: auto;

    width: 33%;

}

.tab_content {

    display: none;

    padding: 5px;

}

안내가 잘 되어 있어서 코드 적용이 크게 어렵지는 않았는데

관리자 모드에서 트랙백 펼침을 해 놓지 않아서 많이 헤맸습니다.

적용하실 분은 위 글에서 빨간색으로 된 글을 잘 읽어 보시고 적용하시기 바랍니다.

코드를 제공해 주신 아래 두 분께 감사를 드립니다.

 

이상 이바구의 댓글창을 정리하는 블로그팁이었습니다.

 

참고 Link

• 뭐하라님 블로그 바로가기
• A TearDrop님 블로그 바로가기

 

• 카카오스토리
• 트위터
• 페이스북