반응형
소셜 댓글 메뉴를 블로그에 달아보자
자신의 블로그에 소셜 네트워크 아이디로 접속하여 댓글 남길 수 있는 새로운 소셜 댓글 서비스인 시지온의 '라이브리'가 공개되었습니다. 그동안 일부 기업에서 유료로 운영되던 시지온이 베이직 버전으로 무료공개되어 일반인도 이용할 수 있는 서비스가 된 것인데요. 블로그에도 소셜 바람이 불고 있는 이 시점에, 적절한 타이밍으로 서비스를 시작한 듯 합니다. 주요 포털들의 블로그+소셜 서비스는 글 보내기나 공감하기 같은 기능 외에 댓글을 지원하지는 않고 있었는데, 적절한 타이밍에 공개되지 않았나 싶네요.
☞ 개인블로그에도 '소셜 댓글' 달아보세요. by 이희욱, 블로터닷넷 (클릭)
라이브리는 라이브리 공식 블로그를 통해서 코드를 가져오실 수 있습니다. 약관 동의만 하면 간단하구요. 아시겠지만 기업 블로거는 무료로 사용하시면 안되겠습니다.
☞ 소셜 댓글 라이브리 코드받으러 가기 (클릭)
그런데, 라이브리 공식 블로거의 설치 가이드는 조금 명확하지가 않습니다. 설치 안내에서 skin.html의 </head> 태그 위에 1번 코드를 삽입하고 나머지 2번 코드를 댓글 넣기 원하는 위치에 붙여넣기 하라고 설명되어 있지만, 가져온 코드에서 어디까지가 1번이고 2번인지 모르시는 분들이 있으실 수 있습니다. 물론 이 정도야 HTML 태그를 좀 만져보신 분들이라면 감으로 분리가 가능하지만, 라이브리 코드에 명시된 '해당페이지 URL'이나 '타이틀'에 대해서도 설치 안내 페이지에 설명된 그림의 부분을 뿌옇게 해버려서 어떻게 해야할지 감이 안올 수도 있겠습니다. 물론, 이 부분 역시 skin.html과 css를 많이 다루어보신 분이라면, 뿌연 글씨만으로도 감을 잡으실 수는 있지만요.
라이브리 블로그의 가이드 만으로 어떻게 설치할지 막막하신 분들은 가메톡 메이플님의 포스트를 참고하시면 보다 쉽게 설치하실 수가 있습니다.
☞ 라이브리 설치 완료 + 설치 가이드 by 가메톡메이플 (클릭)
요약하면 라이브리 댓글은 이런 형식으로 작성되는 것인데요.
<!DOCTYPE html (중략)>
<html xmlns=(중략)>
<head>
(중략)...
<!-- 라이브리용 코드 -->
<script type="text/javascript" src="(중략)"></script>
<script type="text/javascript" src="(중략)"></script>
<!-- 라이브리용 코드 끝 -->
</head>
(중략)...
<!-- 포스트 본문 내용 -->
<div class="article">
[ ##_article_rep_desc_## ]
<!-- 라이브리 소셜댓글 by Elros -->
<div id="{임의로 아이디를 정할 것(예.livre)}" style="width: {포스트 폭보다 작은 값으로 설정할 것}px;">
<!--라이브리 코드 삽입위치-->
</div>
<!-- 라이브리 소셜댓글 끝 by Elros -->
</div>
<div class="author">
(중략)...
<html xmlns=(중략)>
<head>
(중략)...
<!-- 라이브리용 코드 -->
<script type="text/javascript" src="(중략)"></script>
<script type="text/javascript" src="(중략)"></script>
<!-- 라이브리용 코드 끝 -->
</head>
(중략)...
<!-- 포스트 본문 내용 -->
<div class="article">
[ ##_article_rep_desc_## ]
<!-- 라이브리 소셜댓글 by Elros -->
<div id="{임의로 아이디를 정할 것(예.livre)}" style="width: {포스트 폭보다 작은 값으로 설정할 것}px;">
<!--라이브리 코드 삽입위치-->
</div>
<!-- 라이브리 소셜댓글 끝 by Elros -->
</div>
<div class="author">
(중략)...
여기서 주의하실 것은 div 태그에 입력한 아이디가 라이브리 자비스크립트 코드 내에 입력하는 아이디와 일치해야 한다는 것입니다. 위에 링크로 소개한 가메톡메이플님의 포스트를 반드시 참고하시기 바랍니다. 제 경우는 포스트 분문 최하단에 일단 댓글을 위치시켰습니다. 아마 보편적으로 여기에 많이들 넣게 되실 듯 합니다. 이미 다른 코드나 위젯들이 들어가 있을 경우에는 먼저 들어간 코드와의 조화를 고려해서 위치 조정을 하시면 될 듯 하네요.
적용된 제 소셜 댓글의 모습입니다.
최초에는 소셜 시스템에 연결이 안되어 있어 소셜 아이콘이 비활성화 되어 있는데요. 각 소셜 아이콘을 클릭하여 라이브리의 연결을 동의하셔야 합니다. 다음과 같이 라이브리의 액세스를 허용할 것인가를 묻는 창이 나타나게 되구요.
이를 허용하면 트위터 아이콘이 활성화되고, 자신의 프로필 사진이 댓글 영역에 나타나게 됩니다. 페이스북이나 미투데이, 요즘도 마찬가지 과정을 거치면 됩니다.
이제는 댓글도 소셜 시스템으로 그 영역을 넓히는 듯 싶습니다. 특히, 이 라이브리의 소셜 댓글은 댓글을 달면 해당 블로그의 포스트 링크와 자신이 적은 댓글이 자신의 소셜 네트워크 페이지에 동시에 기록이 되는 장점이 있는데요. 소셜 네트워크의 폭발적인 성장을 감안할 때 라이브리의 이 댓글 시스템은 분명 시의적절한 타이밍이라 생각되는군요.
※ 포스트에 사용된 이미지는 인용의 목적으로 사용되었으며 해당권리는 ⓒ 각 저작권자에게 있습니다.
반응형
'Others > Blog Howto' 카테고리의 다른 글
| 티스토리 블로그 댓글 영역과 방명록 부분의 포스트 폭 조정하기 (9) | 2010.07.08 |
|---|---|
| 티스토리 블로그 검색바에 블로그 메뉴 구성하기 (15) | 2010.07.04 |
| 티스토리 블로그의 검색창을 사이드바로 옮기기 (15) | 2010.07.02 |
| 사이드바 프로필 영역 조정하기 (7) | 2010.06.30 |
| 티스토리 블로그 레이아웃 수정, Footer 레이아웃 변경시 트러블슈팅 (6) | 2010.06.10 |