무료 배포 소셜 댓글창 라이브리(LiveRe) 자세한 설치 방법

반응형
얼마전부터 이웃 블로그에 방문을 하다 보면 일반적으로 우리가 볼수 있는 댓글창이 아닌 소셜 네트워크와 연결된 댓글창을 볼수 있었습니다. 

제가 트위터나 페이스북을 그렇게 열심히 하는 편은 아니지만 요즘 대세가 소셜이기 때문에 댓글창을 트위터나 페이스북과 같은 소셜 네트웍과 연결 시켜 놓으면 좋겠다고 생각을 했었는데 이 댓글창을 서비스하는 곳에 가보니 무료가 아니더군요. ㅜ.ㅜ

그래서 급 실망하고 있었는데 좀 알아 보니 조만간 개인에게는 무료로 배포 한다고 공지를 해놔서 무료로 풀릴때까지 기다리고 있었는데 몇일전 기쁘게도 무료로 풀렸더군요. 그래서 저도 얼른 설치를 했습니다. 하지만 설치하는 방법이 좀 애매 하더군요. html 을 잘 모르는 분들은 설치 하기가 힘들거란 생각이 들었습니다. 저도 설치 하면서 설정값을 다 이해가 되지 않아 어리버리 됐거든요. ㅋ


그럼 설치 하는 방법에 대해서 예시와 함께 자세히 알아 보도록 하겠습니다. 먼저 라이브리 댓글창을 달수 있는 코드를 가져와야 겠죠. 아래의 사이트에 가셔서 체크 박스에 체크만 하시면 코드를 쉽게 얻을수 있습니다. 굳이 사이트에 가지 않더라도 제가 아래에 설명하면서 코드를 넣어 놨으니 그 부분을 복사 하셔서 쓰셔도 됩니다. 



코드를 먼저 복사 하셔서 메모장 같은 곳에 붙여 넣기를 하신 다음 제일 윗부분에 있는 1번 설치코드인 script 코드 두줄을 블로그 html 코드에 </head> 앞 부분에 넣어 주시기 바랍니다.

1번 설치 코드
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livere.co.kr/ver5/livere.jsp" charset="utf-8" ></script>


여기까지는 그렇게 어려운 부분이 없는데 다음 2번 설치 코드 부분의 엘리먼트 값을 설정하는 부분에 어떤걸 넣어야 할지가 어렵더군요. 먼저 2번 설치 코드를 복사 하셔서 블로그 html 코드에 라이브리 댓글창이 삽입될 위치에 넣어 주시기 바랍니다. 저 같은 경우 티스토리 댓글창 바로 위에 삽입을 했습니다.

2번 설치 코드
<div id='layer' style='width: 원하시는 폭px;'> 
<script language="javascript">
/* 아래의 두개의 변수 var rep와 var title은 티스토리(에서 제공하는 참조자) 유저용으로 만들어진 값입니다. */
        var rep = document.domain+"/[샵샵_article_rep_id_샵샵]";
        var title = "[[샵샵_article_rep_title_샵샵]]";

livereReply = new Livere( rep , "layer" , title , "태그", "트위터아이디", "default" , "openwhite" , 15);
livereReply.init();
</script>


첫번째는 rep 부분으로 http:// 를 제외한 해당 게시물의 url을 작성하여 주시면 됩니다. 
티스토리의 경우 기본값을 그대로 놔두면 되고 다른 블로그의 경우 해당 url을 적어 주시면 됩니다.
예) "mastmanban.tistoyr.com[샵샵_article_rep_id_샵샵]" 
[샵샵_article_rep_id_샵샵]의 경우는 티스토리의 코드인데 다른 블로그인 경우 해당 포스트에 대한 값을 가져오는 코드가 있을 것입니다. 그 코드를 입력 하시면 됩니다.

두번째는 targetDIV 부분으로 라이브리 플랫폼이 삽입될 영역의 엘레먼트의 ID이름을 적어주시면 됩니다.
기본값으로 그대로 놔둬도 되는데 저 같은 경우 livereo 로 변경 하였습니다.


세번째는 타이틀 부분으로 포스팅 시 해당 댓글에 첨부되는 타이틀 입니다.
티스토리의 경우 기본값을 그대로 놔두면 되고 다른 블로그의 경우 해당 포스트 제목을 가져 오는 코드를 넣어 주시면 됩니다. 아니면 사용자 임의의 문자(블로그 대화명, ID 등)를 넣으셔도 됩니다. 
예) "MastmanBAN(대화명)" 또는 "세상과 만나는 프로그램 이야기(블로그 이름)"


네번째는 태그 부분으로 포스팅 시 해당 댓글에 첨부되는 태그 입니다.
이 부분은 트위터의 경우 해시태그와 같은 부분입니다. 하나만 입력 할 경우 그냥 입력 하시면 되고 두가지 이상일 경우 #과 함께 넣으셔야 합니다.
예) "IT #무료소프트웨어 #블로그 #윈도우"

다섯번째는 관리자 트위터 계정 파라메터입니다. 라이브리 댓글을 관리하시는 트위터 계정을 적어주시면 됩니다.
사용자 트위터 아이디를 입력 하시면 됩니다. 입력시 @는 빼고 입력 하시기 바랍니다. 
예) 상단 이미지 참조(5)

여섯번째일곱번째는 기본값을 그대로 놔 두시면 됩니다. 임의의 값을 넣을 경우 댓글창이 제대로 나오지 않을 수가 있으니 기본값을 유지해 주시기 바랍니다. 

여덟번째는 더보기 개수 파라메터입니다. 한번에 표시할 리스트 개수를 적어주시면 됩니다.
기본값으로 15개가 되어 있는데 저 같은 경우 기본값 15개가 가장 적당할거 같아 그냥 놔두고 사용하고 있습니다. 만약 더 늘리고 싶다면 원하는 숫자를 넣어 주시면 됩니다. 주의 하실점은 너무 큰 숫자로 설정하면 페이지 로딩시 느려 질수 있다는 점을 알려 드립니다. 

그리고 div 코드 부분에 원하시는 폭 부분은 사용자 블로그 폭 넓이를 넣어 주시면 됩니다. 저 같은 경우 블로그 폭 넓이인 650 을 넣었습니다. 

이상과 같이 설치를 하시면 소셜 네트워크 댓글창인 라이브리가 정상적으로 보일 것입니다. 설치시 어려움을 겪는 분들이 계시다면 제 설명이 조금이나마 도움이 되었으면 좋겠습니다. 그리고 소셜 네트워크 댓글창을 무료로 배포해 주신 라이브리 관계자분께 감사의 마을을 전합니다.