Dear ____
[티스토리 스킨 수정] LiveRe 소셜댓글 플러그인 사용 후 위치 변경하는 방법 본문
티스토리는 설치형 블로그가 아님에도 스킨 수정 자유도가 높아서 코드만 좀 알면 꾸며나가는 재미가 있어요~
금일 제가 티스토리 LiveRe 플러그인과 티스토리/LiveRe 코맨트 토글 창을 적용하였는데, 이에 대해 포스팅을 해봅니다!
[ 티스토리 LiveRe 플러그인 설정 ]
먼저 티스토리 블로그 관리 페이지 -> 플러그인 에서 LiveRe를 설정해주세요.
저는 티스토리 댓글도 나오고, LiveRe 댓글도 나오게 하고 싶으니 "티스토리 댓글을 표시합니다"로 설정하였습니다.
라이브리 사이트에가서 계정을 만들고 사이트를 등록하면 설치코드 및 Data-uid를 받아올수 있죠.
이것에 대한 가이드는 티스토리와 다른 블로그에서도 충분히 설명하고 있으니 패스할게요~
사실 이렇게 적용만 하면 LiveRe는 설치가 완료됩니다.
그런데 뭐가 문제냐..
바로 티스토리 기본 댓글창 아래에 LiveRe 리플 영역이 붙어서 나온다는게 문제에요.
이렇게 되어버리는데 영 디자인적으로 구린 것 같아요..
사실 LiveRe는 단점이 있어서 적용 해야되나 말아야되나 살짝 고민이 되긴 합니다.
단점1. 티스토리 DB와 연동되는 것이 아니라서 댓글 알림이 되지 않아요.
단점2. 최근 댓글 집계도 안되구요.
단점3. iframe element가 삽입되는 방식이라서 티스토리 댓글과 섞어 나타나는 이쁜 구조가 될 수 없어요...
그래도 안하자니 아쉬워서, 토글 UI를 구성해서 티스토리 댓글과 분리시켜볼까 했어요.
[ Comment Tab 적용 ]
無에서 새로운 코드 몇 줄 만들어내는건 생각보다 아주 귀찮습니다..ㅋㅋ
근데 아주 멋진 블로거님께서 해당 토글 코드를 공개해 놓으셨더라구요!
코코소프트 - http://cocosoft.kr/384
저는 코코소프트 님이 공개하신 Tab 형태의 Tistory/LiveRe Tab comment UI 코드를 적용했습니다.
시간 절약 굿!
그런데 코코소프트님의 방법은 티스토리가 제공하는 "LiveRe 플러그인" 을 설정한 것이 아니었어요.
티스토리 플러그인 설정은 off 하고 LiveRe에서 직접 스킨 html 수정페이지에서 삽입하는 방법이었죠.
물론 이 방법만 적용해도 아주 잘 동작합니다. PC view에서는.
하지만, 이러한 스킨 직접 수정 설치는 한가지 문제점이 있습니다.
티스토리에서 반응형 스킨을 사용하지 않는 경우, 티스토리의 기본 모바일 페이지 ( blablabla.tistory.com/m ) 를 사용하게 되는데,
모바일 페이지에는 스킨 html 수정 내용이 적용되지 않기 때문에 티스토리 모바일 페이지에서 LiveRe가 보이지 않아요!
티스토리의 기본 모바일 페이지에도 LiveRe 를 적용하려면 반드시 티스토리가 제공하는 플러그인을 설정 ON 해야합니다.
만약 스킨 html에 직접 설치하고, 티스토리 플러그인 설정도 ON 한다면, LiveRe 댓글창이 2개가 나타는 현상을 볼 수 있습니다ㅋㅋ
그래서.
티스토리 플러그인 설정 ON 하고,
스킨 html 수정으로 원하는 곳에 LiveRe를 배치하는 방법을 소개합니다
[ 티스토리 LiveRe 플러그인 설정 후, 스킨 html 수정 ]
LiveRe 사이트 받아오는 설치코드는 아래와같이 생겼습니다. 이를 그대로 쓰면 안됩니다.
이 코드는 티스토리 플러그인을 설정하면 자동으로 티스토리 댓글 영역 아래에 삽입이 되는 코드랑 동일해요.
따라서 중복 삽입되면 안됩니다.
먼저 삽입하고자 하는 element에 자신만의 class를 추가합니다. 저는 코코소프트님의 코드를 기반으로 수정하는 것이라서 아래와같이 tab-content 클래스 옆에 livere_area 라는 클래스를 추가해주었어요.
...
<div class="tab-content livere_area">
</div>
...다음은 아래 스크립트를 </body> 태그 바로 위에 추가합니다. 로딩 중간에 하는 것보다 가장 마지막에 해주는게 좋겠죠.
<script type="text/javascript">
(function() {
$('.livere_area').append($('#lv-container'));
})();
</script>
요로케 해주시면 적용 완료~~~
적용 원리를 간단히 설명드리면,
티스토리 플러그인에 의해 자동 삽입되는 script 는, html 문서 로딩하면서 <header> 내에 새로운 <script>를 삽입하게됩니다.
이로인해 LiveRe 서버에있는 스크립트는 비동기적으로 실행되구요.
html body 로딩의 마지막에 제가 추가한 script가 실행됩니다.
Jquery로 livere_area class를 가진 element를 찾아서, 그 안으로 lv-container 아이디를 가진 element를 이동시키는거죠.
즉 티스토리 플러그인에 의해 자동으로 추가된 <div id="lv-container" ~~~~> 태그가 이동되는겁니다.
사실 여기서 header에 삽입된 비동기식 script 실행과 body 내의 제 script 실행 흐름이 어떤 순서가 되는지 디테일하게는 잘모르겠어요 ㅋㅋㅋ.. 그래도 element를 이동시키는거니깐 문제없겠죠.
뭐 암튼 해보니까 잘됩니다.
잘되면 장땡이죠!
[ 결과 ]
PC 버전에서 코코소프트 님의 코드까지 제대로 적용된 모습입니다.
모바일 티스토리에서도 적용 되었어요~
음 사실 별거아닌데 거창하게 써보았네요!
이로써 첫 Tip 게시물 작성을 완료하였습니다.
끝!