평소 티스토리 계정이 없는 사람들도 제 블로그에서 자유롭게 댓글을 남길 수 있는 방법을 찾고 있었습니다. 그때 나타난 것이 라이브리(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>...</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;
}
안내가 잘 되어 있어서 코드 적용이 크게 어렵지는 않았는데
관리자 모드에서 트랙백 펼침을 해 놓지 않아서 많이 헤맸습니다.
적용하실 분은 위 글에서 빨간색으로 된 글을 잘 읽어 보시고 적용하시기 바랍니다.
코드를 제공해 주신 아래 두 분께 감사를 드립니다.
이상 이바구의 댓글창을 정리하는 블로그팁이었습니다.
