요즘 다양한 블로그툴과 소셜 댓글 시스템이 많이 사용되어 지고 있는거 같습니다.
최근 워드프레스를 이용한 프로젝트 진행 중에 라이브리(Livere) 소셜댓글을 적용 건이 있어 적용 중에 막힌 부분들이 있어 찾아보았으나 잘 나와있지 않은거 같아 몇자 정리해 봅니다.
우선 라이브리가 플러그인 형태로 제공되는 티스토리와는 달리 워드프레스는 직접 소스 코드를 추가해야 하는데요...
워드프레스뿐만 아니라 일반적으로 코드를 추가하는 방법은 간단합니다.
우선 라이브리 사이트에 접속하여 상단의 메뉴 중 서비스 메뉴를 클릭합니다.
접속하면 무료버전인 Basic(베이직)과 유료버전인 Pro(프로) 버전이 있습니다. 우선 베이직 버전의 설치하기 버튼을 클릭합니다.
SNS를 이용하여 로그인하신 후 다음으로 버튼을 클릭합니다.
로그인 하신 후 새 라이브리 발급하기 버튼을 클릭하면 새로운 라이브리 라이선스 일련번호가 발급됩니다.
하단에는 발급받아 사용 중인 라이브리 목록이 나타나며, 코드를 확인하거나 설정을 변경할 수 있습니다.
사이트 유형을 워드프레스로 선택하면 하단에 생성되는 코드가 워드프레스 기반으로 제작되어 집니다.
코드의 이름과 라이브리를 사용할 사이트 URL을 입력하고 코드 생성하기 버튼을 클릭하면 하단에 라이브리키가 생성되며, 소스코드가 출력됩니다.
그럼 주석으로 설명되어 있는 것처럼 워드프레스의 테마파일의 head.php와 single.php, page.php 등 라이브리 소셜 댓글을 사용하고자하는 위치에 소스를 복사하여 붙여넣으시면 됩니다.
기타 설정을 변경하고자 할 경우엔 목록 페이지에서 코드확인/세부설정 버튼을 이용하면 코드를 다시 확인하거나 기타 환경 설정값들을 변경하여 사용하실 수 있습니다.
현재까지는 일반적인 라이브리 설치방법에 대한 안내를 드렸습니다.
그런데 저는 적용하는 과정에서 로그인은 되는데 입력 버튼이 클릭되지 않는 문제가 발생을 하더군요... 해결하기 위해 여러가지 방법으로 테스트하면서 해결한 방법이 있어 공유해 볼까합니다.
이유는 잘 모르겠으나, 처음엔 잘 되었습니다. 그런데 갑자기 입력 버튼이 클릭이 되지 않는 문제가 발생하여 새로운 키도 발급 받아보고 했으나 해결이 되지 않았으나, 해결은 URL 변경을 통해 되었습니다.
조금 전 소스코드에서 2번 항목에 보시면 게시물의 고유 주소를 변수로 받도록 되어 있습니다. 그런데 전 워드프레스의 고유주소를 게시물명으로 지정을 해두어 한글이 입력되어 있습니다. 정확히 이 원인이었는지는 모르겠으나 이 부분을 short URL을 활용한 주소 체계로 변경하였더니 입력 버튼이 정상적으로 작동을 하였습니다.
소스는 아래와 같습니다.
<!-- 2. 아래 코드는 single.php, page.php 페이지의 라이브리를 설치하시고자 하는 부분에 삽입하시기 바랍니다.--> <div id="livereContainer"> <script type="text/javascript"> var consumer_seq = "200"; var livere_seq = "라이브리 키 값"; var smartlogin_seq = "228"; var title = "<?=the_title();?>" //var refer = "<?=get_permalink($id);?>".replace("http://",""); var refer = "<?php echo wp_get_shortlink($id);?>".replace("http://",""); livereReply = new Livere( livere_seq , refer , title ); livereLib.start(); </script> </div>
즉, 9번 라인의 퍼머링크(고유주소) 체계를 10번 라인처럼 숫자와 영문조합으로 된 Short Url 형태로 변경을 하니 해결이 되었습니다. 물론 Short URL 을 생성하는 플러그인이 설치되어 있어야 가능한 부분입니다. 만약 Short Url을 사용하지 않는다면 고유조소를 워드프레스의 기본 형태로 바꾸어 사용하셔도 됩니다. 그러나 요즘 SEO 등의 요소를 생각한다면 기본값은 권장하고 싶지 않네요.
기타 라이브리 이용 팁 몇가지 알려드릴께요..
라이브리를 이용한 소셜 댓글의 폰트를 변경하고 싶다면 아래와 같이 CSS를 추가하세요.
#livereContainer * { font-size: 13px; color: #333333 !important; font-family: 'NanumGothicWeb' !important; border-color: #D0D0D0 !important; }
폰트의 종류나 사이즈, 컬러 등을 원하는 형태로 수정을 가능합니다.
그리고 라이브리의 카피라이터 문구를 없애고 싶다면 아래와 같은 CSS를 추가하시면 됩니다.
.powered_by { display: none; }
라이브리 이용에 작으나마 도움이 되었으면 좋겠네요..
감사합니다.
'IT > SNS' 카테고리의 다른 글
구글플러스(Google +) 초대장 배포합니다. (0) | 2011.08.09 |
---|---|
[twitterfeed] 네이버 블로그와 페이스북, 트위터 연동하기 (0) | 2011.07.05 |
국내 최초 링크드인[Linked in] 세미나를 다녀와서 (0) | 2011.06.30 |
관계를 이끌어내는 창의적 메시지는 어떻게 만들어지는가? (0) | 2011.06.24 |
진짜 소셜커머스의 6가지 특징 (0) | 2011.06.09 |