블로그에 별점평가 위젯을 달아보자.[Js-Kit]!!!

2007/04/24 13:34
사용자 삽입 이미지
별점 평가 위젯을 제공해주는 외국 누리집 [Js-Kit]입니다. 별점평가 말고도 설문지 위젯과 별점과 함께 달린 코멘트 등을 제공해주는데요, 한글 지원이 안되서 그다지별 쓸모가 없습니다. 별점 위젯, 이거 하나로도 꽤 쓸모있어 보입니다.


이 글을 평가해 주세요

별점 위젯입니다. 더 많은 것을 보실려면 [여기로].

사용하는 방법은 아래 코드를 블로그에 삽입하면 되는데요,
<div class="js-kit-rating"></div>
<script src="http://js-kit.com/ratings.js"></script>

위 코드 중 script 코드는 테터나 티스토리 경우는 skin.html 화일 맨 아랫부분에 있는 </body> 위에 넣으시면 됩니다. 그 외 블로그나 홈페이지도 고치셔야 할 파일이름만 틀릴 뿐 아래처럼 body 태그 위에 넣어주시면 됩니다. 고럼 이렇게 되겠죠.
........
<script src="http://js-kit.com/ratings.js"></script>
</body>
</html>

div 코드는  포스팅하시는 글에 html 모드로 들어가셔서 요렇게 작성하시면 됩니다.
<div class="js-kit-rating">적어도 되고 안적어도 되고.</div>

여기서 별점 평가 위젯 하나당 이름을 설정해줘야 합니다. 그래야지 위젯별로 각각 따로 별점을 매긴 값이 따로따로 합산이 됩니다. 그리고 나중에 js-kit 위젯 누리집에서 추적해 볼 수 있습니다.
<div class="js-kit-rating" path="/1" ></div>
<div class="js-kit-rating" path="/2" ></div>
<div class="js-kit-rating" path="/3" ></div>
슬래쉬(/)는 꼭 들어가야 하구요, 뒤에 경로와 이름은 아무거나 적으셔도 됩니다. 몇개 예를 들면  path="/apple/juce/1" 요렇게 만들 수도 있고 path="/love/peace" 요렇게도 만들 수 있겠죠. 한글 주소를 입력하면 어떻게 될지 모르니 영어로 하위주소를 만드시길 바랍니다.

위에처럼 이름을 각각 지어줘서 여러개의 별점위젯을 한페이지에 나타낼수가 있구요, 반대로 여러 페이지에 하나의 위젯을 심어 놓으면 각각의 페이지에서 클릭할 때마다 이 하나의 별점 위젯에 합산이 되어 나타납니다.

색깔도 정할 수 있는데요. 요렇게,
<div class="js-kit-rating" path="/1" starColor="Golden" >
</div>
대소문자는 구분안해도 되구요,  golden 외에도 ruby, blue, red, green, indigo, emerald, violet 이 있습니다. 글 서두에 걸어놓은 링크 타시면 이름별로 색이 연결될 것입니다. 색 설정을 안하면 기본 상태가 루비인 것 같습니다.

위젯 종류도 두가지가 있습니다. 링크타셨으면 보셨을텐데요, 별점평가를 매긴 합산된 값을 자신이 매긴 별점평가와 함께 한 곳에 모아서 보여주는 것과 두개로 쪼개서 보여주는 것, 이렇게 두가지 모습이죠. 이것도  다음과 같이 코드를 삽입해 주시면 됩니다. 요것은 쪼개서 보여주는 것입니다.
<div class="js-kit-rating" path="/1" starColor="Golden"
view="split">
</div>
요것도 설정 안해놓으면 기본설정이 모아놓은 모습인 view="combo" 로 되어 있습니다. 모아져 있는 모습은 아무것도 설정안해주셔도 되고 굳이 설정하시자면 view="combo"를 넣으시면 됩니다.

보시다시피, 티스토리에서는 이상하게 별점 위젯을 여러개 올려 놓으면 꼭 하나가 제 모양대로 안나옵니다. 합쳐놓은 모습에서는 별하나가 밑으로 내려가든가 아니면 쪼개놓은 모습에서는 두 줄 중 한 줄이 밑으로 내려옵니다. 원인을 모르겠습니다. 다른 계정에서는 잘되는 것 보면, 티스토리나 테터의 어느 부분에서 이 별점 위젯과 상충되서 css 가 깨지는 것이 아닐까 싶습니다. 한페이지에 여러개를 사용하실 생각이시라면 이 부분이 문제가 되겠지만 페이지 당 하나만 사용하실 의향이시라면 한개는 제대로 나오니 문제될 게 없겠습니다.

사용자 삽입 이미지
이렇게 블로그나 홈페이지에 위젯을 넣으시고 고유주소(path="/")를 설정해 주셨으면 js-kit 누리집에서 추적해 볼 수 있습니다. 오른쪽 이미지와 같이 js-kit 누리집에서 오른 쪽 상단 user setting 을 누르시고 들어가시면 이미 설정해 놓은 고유주소의 위젯들이 보일 겁니다. 안보이시면 그 페이지 중간의 주소창에 자신의 블로그나 홈페이지 주소를 입력하시면 보이게 될겁니다.

누리꾼들에게 뭔가 평가를 받고 싶은 게 있으시다면 이 별점 위젯을 블로그에 삽입해 보세요. 많은 누리꾼들의 별점평가를 받아보시고 확인해 보실 수 있으실 겁니다.

지인우인 누리집 소개 , , , , , , , , , , ,

2007/04/24 13:34 2007/04/24 13:34
Trackback Address:http://leegh.com/trackback/2693667
  1. 2007/04/30 01:38
    별점평정 위젯 - JS-Kit Tracked from FireJune´s Blog
  2. 2007/06/23 19:28
    블로그에 별점 달기.. Tracked from 일상 ∪ 감상
  3. 2008/12/20 16:32
  1. 태터툴즈에 별점 기능이 있으면 좋겠다고 오랫동안 생각했는데, 이렇게 위젯이 나왔군요. 좋은 정보 감사합니다. :)

  2. 감사합니다. 유명하신 써머즈님께서 유용하게 느끼셨다니 저도 기쁩니다. ^_^

  3. 재미있고 유용한 프로그램이네요. 한 번 써보고 싶은데 단순 코드 복사 & 붙이기가 아니라서 조금 고민스럽네요. 그래도 해보고 싶은..

  4. 1. <script src="http://js-kit.com/ratings.js"></script>
    위 코드를 복사하셔서 skin.html 젤 하단부분 </body> 위에 넣으세요.

    2. <div class="js-kit-rating" path="/1" ></div>
    이 코드를 복사하셔서 티스토리 글 쓰실때 html 모드로 들어가셔서 붙여넣으시면 됩니다. 대신에 path 를 넣는 위젯수만큼 다르게 해줘야 겠죠? 간단하게 "/1", "/2", "/3"....... 이렇게 위젯수만큼 path 를 적어주시면 됩니다. path 를 각각의 위젯 이름을 정해주는 거라고 생각하시면 됩니다.

    천천히 해보시길 권유합니다. ^_^

  5. 좋은 정보 감사합니다. 이올린은 내리고 별점이나 달아봐야 겠습니다.

  6. ^_^ 기능은 물론이고 디자인 또한 깔끔해서 좋더군요.

  7. 한번 써볼깨요 ^^

    음악 올리는데 좋갯내요 ^^

  8. 그래요 유용하게 사용하세요. ^_^

  9. path="/<##_article_rep_title_##>"

    패치를 이렇게 스킨에 넣으면...(<> 는 [] 로 바꿔야 치환자 ->글 재목입니다 ~)

    각 글마다 따로따로 적용가능 하내요 ^^


    추신 : Top Rated가 적용이 안되내요 ..;

  10. top rated 가 무엇을 의미하는 건가요?

  11. 좋은 글 잘 읽었습니다.
    js-kit 에 가입안해도 되는거죠?

[로그인][오픈아이디란?]