이전 된 블로그 http://alones.kr

Alones world :: [Blog Tips] 블로그 포스트에 Rating 위젯을 달아보자

outbrain에서 심플하고 멋진 Blog Rating 위젯을 만들었다.

outbrain

이 블로그의 포스트 하단에 있는 위젯처럼 포스트에 아래 그림과 같이 평점을 줄 수 있다.

outbrain blog ratings

Blogger나 TypePad, WordPress를 사용하는 경우는 단 한번의 클릭으로 바로 설치할 수 있다.

그외 웹 사이트에서는 자바 스크립트를 복사해서 사용할 수 있다.

설치는 이 페이지에서 할 수 있다.


TextCube 계열에 설치하기

웹 페이지나 블로그 스킨에 outbrain에서 제공되는 자바 스크립트를 복사하면 되지만 문제는 각 포스트의 주소를 입력해주어야 한다.

TextCube 계열은 (일반적인 설치 블로그에서 다 제공되겠지만) 현재 포스트 주소를 치환자로 제공한다.

바로 [##_article_rep_link_##] 이다.

하지만 위 치환자는 블로그 상위 주소를 포함하지 않기 때문에 아래와 같이 표기해야 각 포스트의 절대 주소를 얻을 수 있다.

<블로그 상위 주소>[##_article_rep_link_##]

※ 이 블로그는 http://alones.kr 이 블로그 상위 주소이기 때문에 다음과 같다. 블로그 상위 주소 뒤에 '/' 을 쓸 필요는 없다.
http://alones.kr[##_article_rep_link_##]

즉 아래와 같이 제공되는 자바스크립트에서 DROP_PERMALINK_HERE을 위와 같은 포스트 절대 주소로 변경해주면 된다.


<SCRIPT LANGUAGE='JavaScript'>
var OutbrainPermaLink='DROP_PERMALINK_HERE';
var OB_demoMode = false;
if ( typeof(OB_Script)!='undefined' )
    OutbrainStart();
else
{
var OB_Script = true;
var str = "<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'></"+"script>";
document.write(str);
}
</SCRIPT>


아래는 이 블로그의 스킨에 적용한 예이다.

<script language="JavaScript">
var OutbrainPermaLink='http://alones.kr[##_article_rep_link_##]';
var OB_demoMode = false;
if ( typeof(OB_Script)!='undefined' )
    OutbrainStart();
else
{
var OB_Script = true;
var str = "<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'></"+"script>";
document.write(str);
}
</script>


조금 아쉬운 점이 있다면 평가된 글들의 목록을 한 번에 볼 수 없는 것이다.

평가가 높은 글 순이나 낮은 순 또는 투표자가 많은 순으로 글 목록을 정렬해서 본다면 좋을 것인데 ...


2007/11/08 08:28 2007/11/08 08:28
이 포스트가 유용하셨다면 구독하세요~

Save This Page AddThis Social Bookmark Button

Trackback Address :: http://alones.kr/blog/trackback/827

  1. Subject: 블로그에 Rating/북마킹/구독/MyBlogLog 등 개성화 코드 삽입하기

    Tracked from 복잡한 머리의 심플 블로깅 실험 2007/12/30 19:23  삭제

    심심하면 가끔 블로그의 HTML/CSS편집을 조금씩 바꿔 보군 하는데 이것도 블로그를 하는 일종의 재미인것 같습니다. 오늘은 저와 블로그의 독자들과의 연동성을 좀 더 증진 시킬수 있는 일부 코드를 블로그 포스트 하단에 삽입해봤습니다. 설치완료 하고나니 과거보다 WEB2.0의 맛이 블로그에 좀 더 추가된것 같기도 합니다. 저의 티스토리 블로그에서는 코드를 하단의 광고코드 아래에 삽입했습니다. 아래는 블로그에 삽입한 실지 코드입니다. 붉은색으로 표기된..

댓글을 달아 주세요

  1. Zet 2007/11/08 09:02  댓글주소  수정/삭제  댓글쓰기

    저는 이 위젯에 5점 줬는데 4.67로 올라갔네용!ㅋ

    • alones 2007/11/08 13:03  댓글주소  수정/삭제

      Zet님 말고 다른사람이 이미 평점 준 것과 합쳐져서 그럴 것입니다~

  2. yundream 2007/11/08 10:33  댓글주소  수정/삭제  댓글쓰기

    오옷 페이지 단위군요.
    당장 사용해봐야 겄네요 ㅎㅎ

  3. YUZI 2007/11/08 11:06  댓글주소  수정/삭제  댓글쓰기

    C언어밖에 안써서, 자바스크립트가 무섭네요. ^^;
    한번 달아보고 싶지만... 나중으로 미뤄야 겠습니다. ^^)a

    • alones 2007/11/08 13:04  댓글주소  수정/삭제

      저도 잘 몰라서.. 책을 한 번 빌려봤습니다... 볼지는 아직 모르겠지만.. ^^

  4. yundream 2007/11/09 19:01  댓글주소  수정/삭제  댓글쓰기

    이 포스트 보고, 팀블로그에 스타 레이팅 기능을 추가했다는.. ㅎㅎ

  5. 정의의소 2007/11/09 23:53  댓글주소  수정/삭제  댓글쓰기

    캬... alones님 따라하는 재미도 솔솔해요... ㅋㅋ

    • alones 2007/11/10 00:45  댓글주소  수정/삭제

      관심들을 가져주시고, 포스트의 내용을 적용해보시고 더 좋은 feedback과 의견을 저 또한 좋습니다~

  6. ㅎㅇㅎㅇ 2008/11/08 16:28  댓글주소  수정/삭제  댓글쓰기

    이 스크립트 제로보드에서 사용할 방법은 없을까요?
    제로보드에선 [##_article_rep_link_##] 가 안통하는 것 같아요

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