라이브리 소셜댓글 LiveRe(신버전) 설치하기 2탄(tab버튼)

오늘은 새로워진 라이브리 소셜 댓글 신버전을 설치를 해볼 건데요.

조금 새롭게 토글 형식을 사용해서 설치를 해보겠습니다.

우선 기본 플러그인 손쉽게 설치를 하고 싶으신 분들은

아래 링크를 참고해주세요.

http://cocosoft.kr/380 - 새로워진 라이브리 소셜댓글 LiveRe(신버전) 설치 방법 및 후기(장단점)

사실 라이브리 댓글을 사용하면 가장 큰 문제점이 기존 티스토리 댓글과 동시에 사용하기 매우 힘들다는 점입니다.

그래서 저는 탭형식으로 댓글을 만들었습니다.

tab content 를 사용하는 이런식으로 만드는 방법을 소개하겠습니다.

초기 해당 CSS 디자인은 봄나무 스킨을 참고해서 떠올렸습니다.

http://allthatcode.com/entry/티스토리-스킨-봄나무를-배포합니다

그리고 CSS디자인을 수정을 했습니다! 봄나무스킨의 코드를 사용알려드리는 것은 제작이신 구름강아지님께

예의가 아니기 때문에 원하시면 사용자 본인이! 제작자분께 미리 말씀드려 허락을 구하고 적용을 하면 좋을 것 같습니다.!!

아래는 새롭게 CSS코드를 수정하면서 참고한 소스코드 입니다.

See the Pen Pure CSS3 - Tabbed Content by Eric (@nauerster) on CodePen.

이 소스 코드를 가지고 탭버튼을 만들어 라이브러리 소셜 댓글을 설치 해보도록하겠습니다.

인트로 - 사전 구조

저는 지금 제가 사용하고 있는 CCZ-CROSS 스킨을 위주로 예시를 작성하기 때문에

타스킨을 사용하시는 분들이라면 본인 스킨의 댓글 영역을 미리 찾으셔야합니다.

CCZ-CROSS 스킨의 댓글 영역은 이부분 입니다.

<div class="post-reply">...</div> 이부분 코드가 엄청 길어서 잘보고 태그를 넣어야합니다.

사실 오늘 수정할 댓글창은 어렵지는 않지만 굉장히 소스코드가 깁니다.

그래서 잘보고 따라오셔야됩니다.

저부분을 찾아서 수정을 할 것입니다.

html 구조 입니다. 이렇게 만들어 주셔야합니다.


<div class="container">
  <div class="tabContainer">
    <input checked type="radio" name="tab" id="tab-A">
    <input type="radio" name="tab" id="tab-B">
    <label class="tab-link" for="tab-A"><span>티스토리댓글</span></label>
    <label class="tab-link" for="tab-B"><span>라이브리댓글</span></label>

    <div class="tab-content">
      <div class="post-reply">...</div>티스토리 댓글 원래 소스코드 넣어야할 곳
    </div>
    
    <div class="tab-content">
      라이브리 시티 설치 소스코드 넣어야할 곳
   </div>
    
  </div>
</div>

구조를 보니 생각보다 어렵지 않죠???

<div class="post-reply">...</div>을 저렇게 싹 감싸야합니다. 코드가 기니 잘부착하셨을거라 믿습니다. ㅠ.

줄수로 따지면 150줄 정도되니 잘확인하시고

HTML 구조 처럼 만들어서 넣어 주시면 됩니다.

라이브러리 시티 코드는

https://livere.com/insight/myCode

접속하시면 본인의 설치 코드를 확인 할 수 있습니다.

CSS 코드입니다. CSS편집에 붙여넣기 해줍니다.


.container {
  width: 100%;
  max-width: 960px;
  margin: 20px auto;
  position: relative;
}

.tabContainer {
  width: 100%;
}

input {
  display: none;
}

.tab-link {
  width: 50%;
  height:48px;
  padding-top:10px;
  position: relative;
  cursor: pointer;
  color: #666666;
  font-weight: bold;
  display: block;
  float: left;
  text-align: center;
  background: #ececec;
  border-top: 7px solid #9EA3BD;
  border-bottom: 1px solid #FFFFFF;
  border-radius:10px 10px 0 0;
}
.tab-link:nth-child(n) {
  margin-right: 0%;
  margin-bottom: 0%;
}
.tab-link:nth-child(2n) {
  margin-right: 0;
  margin-bottom: 0;
}
.tab-link:hover {
  background: #fff;
}

.tab-link:nth-of-type(2) > span {
  border-left: solid 1px #FFFFFF;
}

.tab-link:nth-of-type(1) > span {
  border-right: solid 1px transparent;
}

.tabContainer .tab-content {
  width: 100%;
  height: auto;
  clear: both;
  display: none;
  overflow: hidden;
}

#tab-B:checked ~ .tab-link:nth-of-type(2),
#tab-B:not(:checked) ~ .tab-link:nth-of-type(1) {
  background: #F9F9F9;
  border-top-color: #2EB0EE;
  border-bottom-color: #F9F9F9;
}

#tab-B:not(:checked) ~ .tab-link:nth-of-type(2) > span {
  border-left: solid 1px #E0E0E0;
}

#tab-B:not(:checked) ~ .tab-link:nth-of-type(1) > span {
  border-right: solid 1px #FFFFFF;
}

.tabContainer input:nth-of-type(2):not(:checked) ~ .tab-content:nth-of-type(1),
.tabContainer input:nth-of-type(2):checked ~ .tab-content:nth-of-type(2) {
  display: block;
}

만약 소스코드가 제대로 입력되었다면

아래와 같이 나와야 합니다.

만들고 나서보니 지금 제가 사용하는 디자인보다 더예쁜거 같다는..-ㅠ-

마지막 작업!! 라이브리 댓글 버튼을 누를때만 스크립트 불러오기

이게 사실 가장 중요하다고 생각되네요. 저는 페이지로딩속도 덕후라..ㅠ 이작업한다고 시간이 가장오래걸렸습니다. ㅠ_ㅠ

라이브리도 외부스크립트이기 때문에 사용을 하지않으면 굳이 불러올 필요가 없다고 생각해서

댓글을 입력하려는 사람만 로드를 하는 방식으로 만들어 보려고 했습니다.

라이브리 댓글 버튼을 클릭 해야지 스크립트를 로드합니다.

이렇게 하면 라이브리를 설치해도 기존페이지 로딩속도에 전혀 문제가 되지 않습니다.

(신버전 라이브리는 비동기식이라 굳이 이렇게 안해도 되지만.. 조금이라도 페이지 요청을 줄이기 위해..)

※ 이건 해도되고 안해도 되는 작업입니다. 어차피 비동기식이라 페이지로드후에 불러오고 가벼워서

크게 차이는 없을 수도 있지만 그래도 조금이나마 리퀘스트를 줄이고싶다면!!

다시 HTML 편집으로 가서 label tab-B를 봐줍니다.


이부분을
    <label class="tab-link" for="tab-B"><span>라이브리댓글</span></label>
아래처럼 고쳐줍니다.
    <label class="tab-link" for="tab-B" onclick="loadLiveRe();this.onclick=null;"><span>라이브리댓글</span></label>

로드라이브리 함수를 실행하는데 한번만 온클릭을 하는 것 입니다.

그리고는 라이브리 설치코드를 function loadLiveRe() 로 감싸주시면 됩니다.