다음뷰 구독자 수 위젯 공개합니다. V2.0 (자동 갱신 버전)

다음뷰 구독자 수 위젯 버전업 Ver 2.0


다음뷰 구독자 수 위젯을 만들었던이 있습니다. 다음뷰 구독자 수 위젯 Ver 1.0 은 처음에 시도한것은 다음 구독자 수 를 작은 위젯으로 나타내 주려는데 목적을 가지고 만들었지만, 크로스브라우징 문제로 값을 가져오지 못하는 한계가 있어서 수동으로 업데이트 하는데 그쳤습니다. 이번에 다음 구독자 수 위젯 버전업 Ver 2.0 을 만들면서 자동으로 업데이트가 되도록 수정을 했습니다. 티스토리에서 댓글이나 사이드바에 트위터나 다음구독자 값을 가져올 수 있게 하는 부분이 생기면서 그 주소의 값을 참조하면서 크로스브라우징 문제가 해결 된 것이죠. 다음 구독자 위젯 버전업 Ver 2.0 를 적용하면 작은 위젯으로 자신의 다음 구독자 수 를 나타낼 수 있으며 보다 쉽게 구독하는데 도움을 줄 수 있습니다.


다음뷰 구독자 수 위젯 Ver 2.0 특징

작은 크기의 다음뷰 구독자 수 를 나타낼 수 있는 유일한 위젯 (80 x 26 픽셀)
간단한 코드로 빠른 속도
구독자 수를 XML 에서 불러와서 자동으로 갱신
간단히 클릭 하여 다음 구독 할 수 있음
파이어폭스, IE6 , IE7 , IE8 , 구글 크롬, 사파리 , 오페라 에서 정상 작동



다음뷰 구독자 수 위젯 활용


다음, 다음뷰, 구독자, 다음구독자, 다음뷰구독자, 다음뷰 구독자 위젯, 위젯, 다운로드, 위젯 생성, 다음뷰구독자수, 블로그, 블로그팁, blog, blog tip, IT, 다음 구독자 수 위젯, Ver 2.0


씨디맨의 컴퓨터이야기 제 블로그에는 사이드바 상단에 피드버너와 다음뷰 구독자 수 나타내는 위젯을 넣었습니다. 다음 구독자 수 가 이번에는 자동으로 업데이트가 됩니다. 클릭을 하면 다음뷰 구독을 자동으로 신청하게 됩니다. 꽁수로 자신의 다음뷰로 들어갈 때도 들어갈 수 있습니다.



다음뷰 구독자 수 위젯 설치 방법


1. daumcount.rar 파일을 다운로드 후 압축을 해제 합니다.




다음, 다음뷰, 구독자, 다음구독자, 다음뷰구독자, 다음뷰 구독자 위젯, 위젯, 다운로드, 위젯 생성, 다음뷰구독자수, 블로그, 블로그팁, blog, blog tip, IT, 다음 구독자 수 위젯, Ver 2.0


2. 압축을 해제해서 생긴 2개의 파일(daumcount.js , daumcountbg.gif) 을 스킨에 업로드 합니다.
(관리자페이지 > 스킨 > 파일업로드 > 파일업로드 버튼 > 파일선택 > 확인)



<head>
    <script src="./images/daumcount.js" type="text/javascript"></script>
    <title>[##_page_title_##] <s_page_title> : [##_title_##]</s_page_title></title>
</head>

3. skin.html 의 <head></head> 사이에 위 코드 중 노란색 줄 부분을 위 코드와 같이 넣습니다.




/* 블로그 카운트 */
#blogfeedcount { width: 172px; }
#blogfeedcount #feedburnercount { float: left; width: 80px; height: 26px; }
#blogfeedcount #daumcount { float: right; width: 80px; height: 26px; background: url(./images/daumcountbg.gif) no-repeat 0 0; cursor: pointer;}
#blogfeedcount .daumcountnum { font-size: 11px; font-family: 굴림; float: right; margin: -1.5px 3px 0 0;}

4. 위 코드를 모두 복사 후 style.css 의 가장 아래 부분에 추가합니다.




<div id="blogfeedcount">
    <div id="feedburnercount">
        <a href="http://feeds.feedburner.com/cdmanii" title="피드버너카운터수" onclick="window.open(this.href); return false"><img src="http://feeds.feedburner.com/~fc/cdmanii?bg=F0F0F0&amp;fg=444444&amp;anim=0" height="26" width="88" alt="feedburner" /></a>
    </div>
    <div id="daumcount" onclick="window.open('http://v.daum.net/user/plus?blogurl=http://cdmanii.com')">-1</div>
</div>
<script type="text/javascript">
    var daumid = "yakisound";
    startRequest();
</script>

5. 사이드바에 태그입력기를 추가 후 위 코드를 입력합니다.

노란색 줄 부분은 피드버너 배너 부분입니다. 자신의 피드버너 코드를 대체해서 넣어도 되며, 또는 한RSS 등의 코드로 대체해도 됩니다. 아래쪽 붉은 색 부분은 차례대로 자신의 블로그 주소 와 다음아이디 입니다. 해당 부분을 맞게 고쳐주셔야 재대로 동작 합니다.


6. 모두 적용 후 브라우저에서 블로그를 띄운 후 Ctrl + F5 를 눌러서 재갱신합니다. (재갱신해야 CSS 내용을 다시 불러들여 재대로 적용 됩니다.)


다음 구독자 수 위젯 설치 방법 설명 동영상




720p 로 크게 해서 보시면 잘 보입니다. 8분까지는 설치 동영상이고 이후는 응용편입니다. 유튜브가 느린분은 http://cdmanii.com/1535  를 참조해주세요


다음 구독자 수 위젯 Ver 2.0 뒷 이야기


다음 구독자 수 위젯을 Ver 1.0 를 만든 뒤 최대의 난제는 도메인이 다른곳에의 값을 여러 브라우저에 맞게 가져오는 문제였습니다. 지금 저는 다음 구독자 수 위젯 Ver 2.0 이 적용 되어있습니다. 구독 해주시면 수가 자동으로 늘어 날겁니다. 다만 뭔개 재대로 안보인다면 Ctrl + F5 를 눌러주세요. 예전에 CSS 가 적용되어서 잘못되어 보일 수 있습니다. 일시적인 문제일 뿐이죠.

다음 댓글 프로필 부분이 생기면서 티스토리내에서 XML 를 따로 만들었더군요. 저는 이부분의 값을 가져오도록 수정했습니다. 같은 티스토리 도메인 내에서 값을 가져오게 되어있어서 크로스브라이징 문제가 해결되버렸습니다. 그리고 파이어폭스, IE6 , IE7 , IE8 , 구글 크롬, 사파리 , 오페라 등 모든 브라우저에서 모두 재대로 된 값이 뜨도록 해결 했습니다. 지금까지 여러번 테스트를 해보았는데 잘 되는군요. js 파일은 그래도 제가 임의로 만든것이기 때문에 위에 주석부분은 지우지 마시기 바랍니다. 문제가 생겼을 때 제가 해결 하기 위해서 입니다.

그동안 최대 난재였던 자동 업데이트 부분을 해결해버리고 나니 기분이 뿌듯하네요. 그리고 코드를 수정하다보니 저도 이렇게 해도 되는지 좀 애매하긴 하지만 블로그가 뜨는 속도가 있기에 div 에 id 값이 불러들여지기 전에 innerHTML 으로 값을 넣으면 에러가 나버리네요. 당연 없는것에 내용을 넣을 수 없기에 에러가 난것같은데, 그래서 타임셋도 걸어보고 했는데 제일 정확한건 div 불러지고 난뒤에 값을 호출하는게 정확하더군요. 실수로 값이 안불러와지지도 않고, 그래서 코드가 위와 같이 되버렸습니다. 당연 페이징이 모두 로드 되었는지 구분할 수 있지만, IE 에서만 돌아가는 구문이 많고, 여러 브라우저에서 해결 하려니 코드가 괜히 더 길어지더군요. 그래서 웹표준에 최대한 맞추면서 문제를 해결해버렸습니다.

궁금하신점은 문의 주시고 , 위와 같이 동일하게 적용해도 문제가 생긴다면 알려주세요. (뭐 아직까진 문제는 없지만요)
신고

이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 이전 댓글 더보기
  2. 티비의 세상구경 2010.08.03 08:45 신고

    씨디맨님 블로그 올때마다 궁금했었는데요~
    잘 배우고 갑니다.~!
    더운날씨지만.. 시원한 하루되세요~!

    perm. |  mod/del. |  reply.
  3. 유똥 2010.08.03 09:15 신고

    이야 참좋은정보들이 많아요!!

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.08.03 09:35 신고

      감사합니다. ㅋ 이거 근데 실제 코드 부분은 js 파일에 다 들었어요. 이 부분 만드느라 약간 애를 먹었다는 ㅠ

      perm. |  mod/del. | 
  4. 돌이아빠 2010.08.03 10:14 신고

    씨디맨님 고생하셨습니다~~!
    이제 자동갱신까지 되는거군요~! 와웅!

    perm. |  mod/del. |  reply.
  5. 윤뽀 2010.08.03 10:26 신고

    능력자 씨디맨님 ^^
    제 블로그 어디다가 넣어야 하나 고민하고 있어요 ㅎㅎㅎㅎ

    perm. |  mod/del. |  reply.
  6. 체리쉬닷컴 2010.08.03 10:48 신고

    좋은 정보 너무 감사합니다.
    언제 달게요!

    크롬이나 파이어폭스에서 스킨 깨지는 것 때문에,
    스킨을 바꿔야 할 것 같습니다.

    행복한 하루 되세요~

    perm. |  mod/del. |  reply.
  7. 이바구™ 2010.08.03 10:59 신고

    저는 다음뷰 구독자가 많지 않아서 달지 못하겠네요.
    실력이 너무 좋습니다.^^

    perm. |  mod/del. |  reply.
  8. 초록누리 2010.08.03 11:19 신고

    저도 마음 바뀌면 참고해서 바꿔보겠습니다.
    컴을 잘 다루지를 못해서 새로운 것은 늘 겁이 나더라고요.
    예전에 한 번 심하게 꼬인 일이 있은 다음부터는 손을 아예 안댄답니다.

    perm. |  mod/del. |  reply.
  9. 별군 2010.08.03 11:56 신고

    와우~ 대단하십니다!!!ㅋ
    저도 한번 적용해봐야겠어요!!!

    perm. |  mod/del. |  reply.
  10. 블로군 2010.08.03 13:16 신고

    이런걸 만드시다니..ㅡ.ㅡ;;
    대단하신데요..ㅎㅎ
    시간내서 한번 적용해봐야 겠습니다.

    perm. |  mod/del. |  reply.
  11. 구차니 2010.08.03 13:39 신고

    아 javascript 배우는것도 어려운데 도대체 이런거 어떻게 하시나요 ㅠ.ㅠ

    perm. |  mod/del. |  reply.
  12. 닉쑤 2010.08.03 15:54 신고

    당장 달아봐야겠군요. ㅋ
    감사합니다~

    perm. |  mod/del. |  reply.
  13. 닉쑤 2010.08.03 15:55 신고

    참~ 스킨 바꿨어요. ㅋ

    perm. |  mod/del. |  reply.
  14. LiveREX 2010.08.03 16:33 신고

    요고 좋은데? ㅎㅎ 슬슬 적용해 봐야지~

    perm. |  mod/del. |  reply.
  15. 라라윈 2010.08.04 02:32 신고

    자동갱신까지 되니 더 좋은데요~ +_+
    얼른 스킨에 삽입해야겠습니다~ ^^

    perm. |  mod/del. |  reply.
  16. 무한 2010.08.05 10:54 신고

    1.0 사용하고 있다가 2.0으로 업 했습니다. ^^
    친절히 공지도 해주시고, 사용법도 자세히 적어주셔서 무리없이 적용했답니다.
    깔끔하고 가볍고 참 좋은 것 같습니다.
    고생하셨어요~ 오늘 엄청 덥다는데 더위 조심하시구요!
    좋은 하루 되시길 ^^

    perm. |  mod/del. |  reply.
  17. 아이엠피터 2010.08.06 16:50 신고

    아 처음 알았습니다.조만간 시간을 내서 해봐야겠습니다.
    일단 되든 안되든 멋있는 것은 따라해보는
    따라쟁이 스타일이라서 ㅎㅎㅎ
    좋은 정보 고맙습니다.

    perm. |  mod/del. |  reply.
  18. 하노비 2010.11.06 04:14 신고

    우왕~ 너무 감사해요~ 스킨은 조금 수정할게요~
    블로그 고치고 있는데 꼭 달아보겠습니다.

    perm. |  mod/del. |  reply.
  19. Renirt 2010.11.14 23:37 신고

    피드버너로 피드주소까지 획득은 했는데 그 구독한 사람 수 나오는 이미지가 제 주소로 변경하니 안나오네요.. 어떻게 해야되나요

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.11.15 00:14 신고

      블로그 잘 봤어요. IT 소년이라 기대 되네요. 그런데 피드버너는 구글에서 서비스하는 피드카운터의 개념이고 제가 지금 이글에 공개한건 다음뷰 구독자 카운트 즉 xml 값의 내용을 가져와서 카운터로 보여주고 거기 배경을 넣어서 꾸며놓은 제가 만든 자작 위젯이예요. 피드버너랑 다음뷰구독자수는 서로 다른개념인거구요. 피드버너 코드는 임의로 수정하시면 안되요. 임의로 그림 부분을 수정하는 바람에 지금 아마 안나올거예요. 피드버너 카운터글은 제가 적어둔게 있으니 보시는게 좋을거예요. 제 블로그에서 피드버너라고 검색하면 나옵니다. ^^

      perm. |  mod/del. | 
    • Renirt 2010.11.15 17:49 신고

      답변감사드립니다!

      perm. |  mod/del. | 
  20. 음탕한오빠 2011.08.21 15:15 신고

    :x 완전 신기하네요^^ 잘 쓸게요;

    perm. |  mod/del. |  reply.
  21. 쥬기 2014.04.24 10:14 신고

    적용 잘 했습니다.~ :)

    perm. |  mod/del. |  reply.