소셜 댓글 라이브리 블로그에 설치해보자


소셜 댓글 서비스 라이브리가 그 동안 기업 고객에게 유료로 제공하던 서비스를 일반 블로거에게 무료로 제공한다고 합니다. 소셜 댓글이란 댓글이 그 포스트나 글, 기사에만 속하지 않고 댓글을 단 댓글러의 SNS 로 연결이 되어서 자신의 친구나 이웃들과 해당 글에 대한 댓글을 공유 할 수 있게 하는 서비스를 말합니다.



이런 소셜댓글이 블로그 환경에 적용되면서 댓글러에게는 자신이 쓴 댓글을 자신의 이웃과 공유할 수 있다는 장점이 있고, 블로거에겐 자신의 블로그 포스트가 SNS를 통해 홍보가 될 수 있다는 장점이 있습니다. ( 댓글을 달면 해당 SNS에 글의 주소와 제목, 그리고 댓글 내용이 함께 포함되어 발행되는 식입니다. )


소셜 댓글 서비스 라이브리를 자신의 블로그에 적용시키는 방법은 간단히 라이브리 홈페이지를 방문해서 라이브리 위젯에 해당하는 HTML 코드를 받아서 여러분 블로그 스킨에 편집해 넣으면 됩니다.

여기에서 약간 어려울 수도 있는데요. ( 순순히 설치되어주지 않더군요.. 게다가 몇 가지 추가 기능들이 있어서 그것들을 좀 설명해 드리겠습니다. ) 오늘 포스트는 어제 약속드렸던 "라이브리 설치하기"에 대해서 다뤄 보겠습니다.


소셜 댓글 서비스 '라이브리'



내 블로그에 소셜 댓글 '라이브리 설치하기'

라이브리의 홈페이지를 방문하시면 현재 블로거들에게 무료로 배포하고 있는 라이브리 베이직에 대한 안내를 볼 수 있습니다. 라이브리 댓글창은 블로그의 스킨이 편집 가능한 플랫폼에서만 적용이 가능합니다. 네이버나 다음 블로그는 아마 아직 적용이 안 되는 것으로 알고 있습니다.



대부분의 공개 소프트웨어가 그렇듯 개인 사용자( 개인 블로거 )에게는 무료로 공개하고 있지만 영리를 목적으로 하는 기업이 자사의 서비스에 이용하다가 걸리면 무거운 책임을 묻는다고 하네요. 뭐 알약이나 알집 같은 소프트웨어도 개인에겐 무료로 공개하지만 기업에는 유료 라이센스를 요구하지요. 마찬가지입니다. 만일 여러분이 기업이 아니라면 약관을 잘 읽어보시고 약관에 동의하시면 됩니다. ^^



약관에 동의를 하시면 밑에 라이브리 댓글창에 해당하는 코드가 나타납니다. 이 소스코드를 복사해서 이제 여러분의 블로그 스킨에 적용을 하시면 됩니다.

이 소스코드는 2개의 부분으로 나뉘어 있는데, 맨처음 두개의 <script>태그가 1번 코드이고 그 다음 <div>로 시작하는 코드 부분이 2번 코드입니다.




관리자 페이지에서 [스킨] -> [HTML/CSS 편집] 메뉴를 선택해서 스킨 편집 창을 띄웁니다.



아까 복사해 놓은 소스코드 중에 1번 소스코드에 해당하는 소스코드를 </head> 바로 윗 부분에 붙여 넣습니다. 1번 소스코드는 위와 같이 처음 두개의 <script>태그 입니다. ( 나중에 헷갈리지 않게, <!-- 라이브리 인클루드 --> 라는 주석을 써 넣었습니다. )

1번 소스코드는 여러부느이 블로그에 라이브리 댓글 창이 적용되기 위한 준비 소스라고 보시면 됩니다. 정확히 뭘 하는 애들인지는 잘 모르겠네요. 뒤져보자니 귀찮고 그냥 설치하겠습니다.




나머지 2번 소스코드를 적절한 위치에 붙여 넣습니다. 2번 소스코드는 실제로 댓글창이 보여질 위치에 붙여 넣으시면 되는데요. <div class="actionTrail"> 이라는 태그 윗 부분에 많이 붙여 넣는다고 하니 저도 그곳에 붙여 넣어 봤습니다. ( 다른 좋은 곳에 붙여 넣으시려면 그곳에 붙여 넣으시면 됩니다. )




여기서 세팅을 조금 해야 합니다. 2번 소스코드 중에 위 사진과 같은 부분이 있는데요. 거기서 빨간색 네모를 친 부분을 수정해야 합니다. 첫 번째 박스에 꼬마낙타라고 쓴 부분은 댓글이 트위터로 보내질 때 추가되는 해시태그입니다. 여기에는 "#" 문자를 추가할 필요가 없습니다. 두 번째 박스는 여러분의 트위터 계정을 쓰시면 됩니다. @계정 형태로 추가가 되어서 멘션이 보내지는 형태입니다. 마찬가지로 "@" 문자는 쓸 필요가 없습니다.




다음으로  윗 쪽에 "/*" 와  "*/" 로 시작하는 줄을 지워버립니다. ( 저게 주석처리 되어서 중간에 rep 과 title을 정의하는 2줄이 무시되어 적용이 안 되더라구요. )

/* 2번 설치코드 - 원하는 위치에 넣어주세요 */
<div id='layer' style='width: 원하시는 폭px;'>

그리고 '원하시는 폭' 이라는 곳에 여러분의 본문 사이즈를 넣어주시면 됩니다. 제 경우에는 650 정도로 했었는데, 조금씩 바꾸면서 폭을 조절하시면 됩니다. ^^




그리고 [미리보기] 버튼을 이용해서 적용이 되었는지 봅니다.
적용이 잘 된 모습이군요. 이제 잘 사용하시면 됩니다. ^^ ( 위치가 마음에 안드시면 적절한 위치를 찾아서 2번 코드를 배치 시키면 됩니다. )


소셜 댓글, 공짜로 주는건데 한번 적용해 봐야죠 ㅎㅎ

+ Recent posts