소셜 SNS 댓글 라이브리 OneRoom 스킨에 적용하기

얼마 전 OneRoom 스킨 이용자분께서 요청 하셔서 처음으로 소셜댓글 라이브리(LiveRe) 서비스를 알게 되었습니다.

라이브리는 웹페이지 내에서만 머무는 댓글을 트위터, 미투데이, 페이스북, 다음요즘 등의 SNS로 보내 더욱 풍성한 소통을 만들어낼 수 있는 소셜댓글 플랫폼입니다.
HTML/CSS 편집이 가능한 블로그에는 모두 삽입할 수가 있고, 개인은 무료이지만 사업자 및 단체는 별도 협의가 필요한 것 같습니다.

최근 페이스북에서도 비슷한 댓글 서비스를 하겠다고 들었는데, 국내에서도 좋은 서비스가 나온 것 같아서 OneRoom 스킨과 잘 어울릴 수 있게 삽입하는 방법을 소개하겠습니다.

※ 티스토리의 타 스킨에 적용하는 방법은 라이브리 홈페이지에 잘 설명되어 있으니 해당 페이지를 먼저 읽어 보시면 도움이 되실 겁니다. <아래 이미지 참고>


라이브리 코드 발급받기
우선 라이브리 홈페이지를 방문해서 코드를 발급받습니다.<위 이미지 참고>
우측의 라이브리 발급받기 아이콘을 클릭하시면 됩니다.

그럼 설치코드가 아래에 표시되는데, 크게 두 부분입니다.
</head>앞에 삽입하는 2줄과 실제 블로그에서 보여질 부분에 삽입하는 표시 부분 8줄입니다.

위 2줄은 삽입하는데 큰 문제가 없어 보이는데, 아래 삽입 부분은 자신이 이용하는 스킨에 맞게 약간 수정이 필요할 수 있습니다.

HTML/CSS 편집에서 라이브리 코드 삽입하기
OneRoom 스킨의 경우는 사용하는 폭에 따라 배경 이미지 자체가 변경되어야 하기 때문에 폭 크기에 따른 다양한 버전을 배포하고 있습니다.
비슷한 이유로 깔끔하게 라이브리 서비스를 추가하기 위해서 OneRoom 스킨의 skin.html 파일을 직접 열거나 혹은 티스토리 관리자 <HTML/CSS 편집> 창에서 skin.html 부분을 아래와 같이 수정합니다.

1. 상단 코드 삽입
소스의 대략 130번째 줄 이후 부분에서 </head>앞에 아래의 코드를 삽입합니다.


2. 본문 코드 삽입
소스의 대략 510번째 줄 부근에서 트랙백 영역을 찾아 그 앞 부분에 아래의 코드를 삽입합니다.

주의 하실 부분은 ①, ② 두 곳입니다.
① 라이브리 폭(width)
- OneRoom 스킨의 width 폭보다 10px 작게 잡아주시면 보기 좋게 삽입됩니다.
현재 저는 550px 크기로 사용 중이라 10px 작은 540으로 잡았습니다.
② 라이브리 파라메터
- 도메인과 타이틀을 자바스크립트로 자동으로 잡아주는데, 타이틀 부분은 라이브리의 공식배포 코드에서는 대괄호("[")가 이중으로 들어가서인지 댓글 영역에 대괄호가 쓸데없이 남아 있게 됩니다.
따라서 위와 같이 하나의 대괄호만 남겨 두세요.
- 다른 파라메터는 그대로 사용하시면 되고, <해시태그>, <트위터아이디>, <더보기 개수> 부분은 사용자 환경에 맞게 수정하세요.
<해시태그>: 저는 트위터 해시태그로 "LiveRe"로 뒀습니다.
<트위터아이디>: 본인의 트위터 아이디를 입력하세요.
<더보기 개수>: 기본값은 15개입니다.


최종 결과물은 아래와 같습니다.



저작자 표시 비영리 변경 금지
신고

  • 공지공간에 넣었습니다.
    도움주셔서 감사합니다.........

  • 안그래도 이것을 설치하고 싶었는데 이렇게 올려 주셔서 감사합니다...
    이 포스팅 때문에 무사히 설치를 잘 마쳤습니다....^^

  • 스킨 테스트중에 있습니다 ㅠㅠ
    라이브리 시스템 달려고하는데

    소스도 그대로 따라하면 정상출력은 되오나
    </s_rp> 끝에 이부분을 넣게 되면 코멘트와 같이 사라지고 그렇지않습니까?

    이것을 알려주신것과 같이 위치시키면 라이브리가 출력안됩니다 ㅠㅠ
    </div> <!-- / respond --></s_rp> 이렇게 연속으로 놔두고
    다음에 라이브리 소스 놔두면 숨겨지지는 않으나 출력은 되고요

    같이 숨기고 싶은데 어떻게해야할까요 ㅠㅠ

    그대로 다따라했는데 그러네요 ㅎㅎ

  • <!-- 라이브리 댓글시스템 시작 -->
    <div class="clear"/></div>
    <div class="left-sidebar-bottom"></div>
    <div class="nav-bottom"></div>
    <div class="left-sidebar-top"></div>
    <div class="nav-top" style="backgorund:#FFF">
    <div id='layer' style='width: 540px;'>
    <script language="javascript">
    var rep = document.domain+"/";
    var title = "[]";
    livereReply = new Livere( rep , "layer" , title , "태그", "트위터", "default" , "openwhite" , 15);
    livereReply.init();
    </script>
    </div>
    </div>
    <div class="clear"/></div>
    <div class="left-sidebar-bottom"></div>
    <div class="nav-bottom"></div>
    <!-- 라이브리 댓글영역 종료 -->

    아닌가요?...

  • 안그래도 이것을 설치하고 싶었는데 이렇게 올려 주셔서 감사합니다...
    이 포스팅 때문에 무사히 설치를 잘 마쳤습니다....^^

Write your message and submit