Tip&Tech/Tistory2009.04.11 15:29
알림!!! 이 글과 관련된 최신 정보http://blog.missflash.com/543 를 참고하시기 바랍니다.

먼저 이 팁은 다음의 여러 게시물을 참고로 작성한 것임을 밝힙니다.
아래 글들을 읽어보시면 추천 위젯 통합이 어떤 식으로 돌아가는지 쉽게 파악할 수 있으리라 생각합니다.


위 게시물들이 좋은 정보를 제공하고 있음에도 불구하고...
  1. 티스토리 환경에서
  2. 믹시 추천 위젯
  3. 다음 블로거뉴스 추천 위젯을 동시에 통합하는 방법은 아직 소개되지 않아...
오랫동안 탐내왔던 추천 위젯 통합작업을 수행했습니다.



믹시 추천 위젯의 경우, muid, guid만 알면 쉽게 편집할 수 있지만... 다음 블로거뉴스 추천 위젯의 경우 이전에 소개한 글(2009/04/11 - [팁] 티스토리에서 카테고리 글 더보기 플러그인 위치 바꾸기!!!)에서와 같이 플러그인 형식으로 자동 삽입되기 때문에 사용자가 임의로 편집하기가 쉽지 않습니다.

하지만, 위에 소개한 chatii님께서 좋은 방법을 제안해 주셔서 이걸 기초로 조금 수정해봤습니다. 이 자리를 빌어 chatii님께 감사드립니다. :)



그럼, 본격적으로 티스토리에서의 추천 위젯 통합방법을 설명해 보겠습니다.
1. 믹시 추천 위젯 편집하기
<div class="MF_Left_Float" style="height:70px; margin-left:5px;">
    <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='73' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=47189&guid=http://blog.missflash.com/<##_article_rep_id_##>&rdate=<##_article_rep_date_##>&showhitcnt=1&platform=2'/>
    <param name='quality' value='high'/>
    <param name='wmode' value='window'/>
    <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=47189&guid=http://blog.missflash.com/<##_article_rep_id_##>&rdate=<##_article_rep_date_##>&showhitcnt=1&platform=2' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
</div>

위 소스에서 muidguid를 자신의 블로그에 맞는 정보로 편집하시면 됩니다.
자신의 정보를 모르시는 분은 이 곳(http://mixsh.com/widget/mixup/index.html)을 참고하시면 됩니다.

(1) 위 링크에서 티스토리에 해당하는 스크립트를 가져오면, muid=숫자에 해당하는 부분이 있습니다. muid에 해당하는 숫자만 복사하신 후, 위 소스의 47189대신 쓰시면 됩니다. 그리고, guid의 http://blog.missflash.com/ 대신 자신의 블로그 주소를 쓰시면 됩니다.

(2) <##_article_rep_id_##>, <##_article_rep_date_##>에서 초록색으로 표시한 <>는 각각 []로 바꾸셔야 합니다. 이 부분은 티스토리 치환자로 HTML 코드를 그대로 보여주는 <pre>태그보다 우선하기 때문에 문제를 제대로 파악하지 못했네요... 도움주신 fivelove님께 깊은 감사말씀드립니다.



2. 다음 블로거뉴스 추천 위젯 편집하기
<div id="MF_Recommend" class="MF_Right_Float" style="margin-right:5px;">다음블로거뉴스 추천위젯의 위치</div>
<script type="text/javascript">
//<![CDATA[
// by chatii - http://chatii.tistory.com/52
// last updated at 09/03/15

// Modified by MissFlash(http://blog.missflash.com)
var recombox = document.getElementsByTagName("embed");
for (var i=0; i<recombox.length; i++) {
    if (recombox[i].getAttribute("src") && recombox[i].getAttribute("src").indexOf("http://api.v.daum.net/static/recombox1.swf") != "-1") {
        var recomdiv = recombox[i].parentNode;
        recomdiv.innerHTML = recomdiv.innerHTML.replace("recombox1.swf", "recombox3.swf").replace("400", "67");
        var param = recomdiv.parentNode.getElementsByTagName("param");
        for(var j=0; j<param.length; j++) {
        if (param[j].getAttribute("value").indexOf("mixup") != "-1") {
            param[j].parentNode.removeAttribute("align");
                recomdiv.appendChild(param[j].parentNode);
            }
        }
        document.getElementById("MF_Recommend").innerHTML = recomdiv.innerHTML + document.getElementById("MF_Recommend").innerHTML;
        recomdiv.style.display = "none";
    }
}
//]]>
</script>

위 소스에서 "MF_Recommend"란 ID의 div가 다음 블로거뉴스 추천 위젯이 삽입될 위치입니다. 이 div는 아래에 있는 <script type="text/javascript"> 태그보다 반드시 위에 있어야 하므로, 순서는 수정하지 않는 것이 좋습니다.


3. 스타일시트 편집하기
.MF_Left_Float {float:left; margin-bottom:5px; }
.MF_Right_Float {float:right; margin-bottom:5px; }

믹시와 다음 블로거뉴스 추천 위젯은 둘 다 플래시로 이뤄져있어 같은 줄에 넣기 위해서는 스타일시트 수정이 필요합니다.
제 경우, float 명령을 이용해 각각 왼쪽과 오른쪽에 배치했습니다. 위 명령을 참고하셔서 본인의 취향에 맞게 수정하시면 될 것 같습니다.

그 외, 궁금하신 점은 댓글로 알려주시면 감사하겠습니다. :)

추가 #1.
믹시 추천 위젯의 경우, 2개가 중복해서 표시되는 것을 막기 위해 플러그인 설정에서 "mixUP 위젯 표시안함"으로 설정하셔야 합니다.
저작자 표시 비영리 변경 금지
신고

이 글은 새로운 정보가 추가될 때마다 업데이트됩니다. 추천으로 아래 숫자에 1을 더해보세요. :)
RSS구독을 하시면 포스트를 배달해 드립니다. ▷ 한RSS 구독하기, 구글리더 구독하기

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 감사합니다. 아마 제가 그전에 뭔가를 잘못만졌나 봅니다. MissFlash님하고 같은 스킨인 것 같은데... 여전히 않되네요. 그냥 현재 상태로 쓰려고요. 그래도 많이 알려 주셔서 정말 감사합니다.

    2009.04.18 20:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 헌책방IC님도 제 도움이 필요하시면 말씀해주세요...

      그리 오래 걸리는 작업이 아니기 때문에 간단히 도와드릴 수 있습니다. 다만, 그렇게하려면 로그인 정보를 저에게 알려주셔야 합니다. ^^;

      2009.04.18 20:15 신고 [ ADDR : EDIT/ DEL ]
  3. 자꾸 답을 해주시니... 귀찮게 해드리는 것 같네요... 현재 상태로 쓰는 것도 괜찮습니다. 그저 티스토리도 처음이고 html도 처음이라 이런저런 것들을 해보고자 하는 것입니다. 친절히 알려 주셔서 감사합니다. 다른 글들을 보며 또 궁금한 사항이 있으면 편히 여쭈어 볼 수 있을 것 같습니다.

    2009.04.18 20:35 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 네, 알겠습니다. ^^;

      돌이켜보니 제가 너무 제 생각만하고 설명을 줄여서 문제가 생기는 것 같아 죄송하네요...

      사실, 이 글을 쓸때... 저도 엄청난 삽질을 끝낸 후라 좀 지쳤었거든요...(비겁한 변명입니다. ㅋㅋ;)

      혹시 더 궁금한 점 있으시면 언제든지 문의해 주세요 :)

      2009.04.18 20:45 신고 [ ADDR : EDIT/ DEL ]
  4. 낙타의꿈

    죄송한데.. 정말 안되는데요.. ㅡ,.ㅡ;;

    - <- 이렇게 나옵니다. 발행했던 것 갱신해도 이렇게 나오고 다시 써서 발행해봐도 이렇게 나옵니다.
    muid 제 숫자 5자리로 분명히 바꾸었고, guid도 빨간글자로 해주신 부분에 제 주소로 바꿔넣었는데도 그렇습니다.

    혹시 도메인의 문제는 아닙니까? 현재 MissFlash 님의 블로그는 닷컴도메인을 쓰고 계시지 않습니까.. 그런데 티스토리는 닷컴도메인이 아니니까 (물론 매우 개인적 추측에 불과합니다.. )

    신경 많이 써주는데 이렇게 댓글달려니 정말 죄송하네요..
    근데 안되는걸 어떠합니까 ㅜ 댓글보니 안되시는 분들도 많은 것 같은데 답답해서 그럽니다.. 흑.
    하루 종일 티스토리에서 믹시버튼 줄이기만 찾아보는데 찾아도 찾아도 다른 글은 없네요.. ㅠ

    2009.04.18 21:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 낙타의꿈님// 이메일 주소를 비밀글로 남겨주시면 제가 메일 드리도록 하겠습니다. 댓글로는 태그가 깨져서 알아보기 힘드니 낙타의 꿈님이 사용한 스크립트를 메일로 보내주세요~

      제가 확인해 보도록 하겠습니다.

      2009.04.18 21:49 신고 [ ADDR : EDIT/ DEL ]
    • 낙타의꿈님// 제가 방금 테스트 해봤는데... 제 티스토리 고유주소(http://kaist.tistory.com)로 바꿔도 정상작동 합니다.

      추천도 되구요... ^^; 덕분에 자추 2개 했네요 ㅋ;

      본문 내용 수정했습니다. 다시 확인해 보세요!!!

      2009.04.18 22:11 신고 [ ADDR : EDIT/ DEL ]
  5. 전 해결을 했어요 ㅋㅋ
    &rdate=

    <##_article_rep_id_##>&rdate=<##_article_rep_date_##>
    로 바꾸니 되는구요..ㅋㅋ
    (<는 [로 바꿔서)
    한참 헤맸네요.
    그래도 좋은 글 감사합니다.

    2009.04.18 21:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 흐미;;; 제가 실수해버렸네요... 스크립트를 드대로 복사했다고 생각했는데... 티스토리 치환자가 제대로 출력되지 않았네요 ㅜㅜ;

      저 때문에 실패하신 분들 모두 죄송합니다. 후다닥 수정해 놓겠습니다.

      저의 무지를 깨우쳐주신 fivelove님 정말 감사합니다. :)

      2009.04.18 21:58 신고 [ ADDR : EDIT/ DEL ]
  6. 본문에 제 얘기가 있으니 은근 기분 좋네요 ㅋㅋ
    제가 한건 없는데 말이죠.
    좀더 다듬어야하겠지만
    덕분에 포스팅 밑에가 한결 깔끔해졌네요.
    좋은 주말 되시고 자주 들러 좋은거 업어갈게요 ㅋ

    2009.04.19 14:36 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 아닙니다. 분명히 fivelove님이 도움을 주신건데요... ^^;

      제가 좀 더 세심하게 글을 썼어야 하는데... 치환자는 생각지도 못했네요 ㅎㅎ;

      자주 들러주신다니 감사합니다. :)

      2009.04.19 18:41 신고 [ ADDR : EDIT/ DEL ]
  7. 비밀댓글입니다

    2009.04.19 21:11 [ ADDR : EDIT/ DEL : REPLY ]
  8. 비밀댓글입니다

    2009.04.19 21:14 [ ADDR : EDIT/ DEL : REPLY ]
    • 그게 바로 티스토리가 플러그인 설정을 사용자가 편집할 수 없게해서 발생한 문제입니다.

      그럴 줄 알고 관련 글을 이 글 바로 전에 작성했었는데... ^^;

      http://blog.missflash.com/530

      아, 그리고 저는 대학원04 학번입니다. 대충 제가 7년은 위일 것 같네요 :)

      아무튼 반갑습니다.

      2009.04.19 21:26 신고 [ ADDR : EDIT/ DEL ]
  9. 덕분에 잘 활용할 수 있을꺼 같습니다 ^^
    고맙습니다~~

    2009.05.11 00:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 오늘 많은 정보을 얻었네요 제 블로그도 적용했답니다 감사합니다..

    2009.05.11 20:31 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 위젯 플로그인 끄고, 위에 박스에 있는거 복사해서 스킨편집의 HTML/CSS편집에서 Skin/html 에 붙여넣기 하면 되나요?? 잘 안되네요.. 몇몇 윗분들께서 말씀하셨듯이... "-" 표시뜨고 맨 밑에 그냥 붙여넣었더니..
    블로그 맨 왼쪽 아래에 혼자 바보처럼 붙어 있네요.

    컴맹들 한테는 조금 ㅡ,.ㅡ;;

    2009.05.12 21:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 해당 글을 아직 발행(공개)하지 않았거나... 과거 몇 달 전에 발행한 글일때 "-"표시가 뜰 수 있습니다.

      추천 위젯의 위치는 유토피아건님이 원하시는 곳에 붙여넣으시면 되며, 위치를 잘 못 찾으시겠으면 그냥 이곳저곳에 넣으시면서 테스트 해보시면 됩니다. ㅎㅎ;

      2009.05.12 22:00 신고 [ ADDR : EDIT/ DEL ]
  12. 하하... 빠른 답변 크크...
    전부 최신 발행글입니다. 7일정도..그리고 공개 발행 되었습니다. 위치는 Html 을 좀 알아야 되겠네요.^^
    그리고 혹시 다음 뷰 추천 버튼은 어떻게 다는지 아시나요.?? 님 블로그에서 지금 찾고 있는데, 잘몰라서요.

    2009.05.12 22:27 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 다음 뷰는 기본적으로 플러그인을 설정하시면 됩니다.

      그 후에 이 글 본문에 소개한 "2. 다음 블로거뉴스 추천 위젯 편집하기" 부분의 소스코드를 출력되기 원하는 위치에 붙여넣으시면 됩니다.

      2009.05.12 22:55 신고 [ ADDR : EDIT/ DEL ]
  13. 비밀댓글입니다

    2009.05.12 23:16 [ ADDR : EDIT/ DEL : REPLY ]
  14. 안녕하세요 글 보고 도움을 많이 받고 있습니다.
    그런데 궁금한 것이 있어서요

    이 글대로 하면 다음뷰추천버튼을

    작게 변경해서 가지고 오잖아요

    1번파일을 3번파일로 변경하는 방식으로 식을 이해했는데요

    보니까 자바스크립트식이라서 변경을 하는 법을 제가 몰라서요

    제가 원하는건 간단한데요

    다음추천버튼을 변경하지 않고

    그모양 그대로 원하는 위치에 넣는 것입니다.

    믹스버튼의 경우 사이즈를 조절해서 해결햇는데

    다음의 경우 사이즈를 손댄것이 아니라 1번을 3번으로 변경한 것이여서 방법을 찾지 못하겠어서요

    도움주시면 감사하겠습니다.

    2009.05.15 15:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • recomdiv.innerHTML = recomdiv.innerHTML.replace("recombox1.swf", "recombox3.swf";).replace("400", "67";);

      말씀하신 기능을 위해서는 위 소스를 삭제해 주시면 됩니다. ^_^;

      2009.05.15 15:34 신고 [ ADDR : EDIT/ DEL ]
  15. 수고하십니다.
    님이 알려주신데로... 워낙 초보인지라... 맨땅에 머릴 박아가면서 했습니다.
    익스플로러에서는 두개의 추천버튼을 예쁘게 붙여서 잘나오는데
    파이어폭스에서는 두개의 추천버튼이 뚝 떨어져 보기가 싫게 나오는군요.

    어떻게 해야할까요?

    2009.05.15 17:27 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 양쪽 배분이 되었는데 다른 내용이 없어서 그런 것 같습니다.

      [div class="MF_Left_Float" style="height:70px; margin-left:5px;"]

      위 소스를 아래와 같이 고쳐보세요...

      [div class="MF_Left_Float" style="height:70px; width:76px; margin-left:5px;"]

      여기에서 [, ]는 <, >로 바꾸셔야 합니다. :)

      2009.05.15 20:51 신고 [ ADDR : EDIT/ DEL ]
    • 믹시 버튼은 익스플로러와 파폭 모두에서 정상적입니다.
      다음 추천 버튼이 익스플로러에서는 믹시 버튼 옆 2mm정도 떨어져서 예쁘게 붙어 있습니다만 파이어폭스에서는 대략 6~7cm정도 떨어져 보입니다.

      2009.05.15 22:30 신고 [ ADDR : EDIT/ DEL ]
    • 그럼, 기존의 소스는 그대로 두고... 스타일에서

      .MF_Left_Float {float:left; margin-bottom:5px; }
      .MF_Right_Float {float:right; margin-bottom:5px; }

      위 소스를 아래와 같이 바꿔보시기 바랍니다.

      .MF_Left_Float {float:left; width:76px; margin-bottom:5px; }
      .MF_Right_Float {float:right; margin-bottom:5px; }

      2009.05.15 22:35 신고 [ ADDR : EDIT/ DEL ]
    • 스킨 자체에 문제가 있는걸까요? ^^;;;;

      2009.05.15 22:41 신고 [ ADDR : EDIT/ DEL ]
    • .MF_Left_Float {float:left; width:76px; margin-bottom:5px; }
      .MF_Right_Float {float:right; margin-bottom:5px; }

      위 소스가 안되면... 아래와 같이 수정해 보세요...
      .MF_Left_Float {float:left; width:76px; margin-bottom:5px; }
      .MF_Right_Float {float:left; margin-bottom:5px; }

      제가 직접 테스트하는게 아니라 확실하게 말씀드리지를 못하겠네요... float로 띄우면 기본적으로 5:5, 그러니까 딱 절반으로 나누기 때문에 생기는 현상입니다.

      해보시고 결과 좀 알려주시길 ㅎㅎ;

      2009.05.15 22:44 신고 [ ADDR : EDIT/ DEL ]
    • 드디어 익스와 파폭 모두에서 똑같이 예쁘게 나오는군요.
      바쁘신데 신경써주셔서 고맙습니다.
      감사X200

      자주올것을약속! (물론필요해서지만 ^^;;)
      rss구독必

      2009.05.15 22:53 신고 [ ADDR : EDIT/ DEL ]
    • 축하드립니다. :)

      2009.05.15 22:57 신고 [ ADDR : EDIT/ DEL ]
    • MissFlash님께 드리는 제안 한가지...(솔직히 부탁, 청부, 기타등등)

      다음의 view는 공개만하고 발행을 하지 않으면 아예 추천 버튼이 보이지 않습니다.

      믹시업의 경우 공개만 하고 발행을 하지 않거나 포스트가 믹시에 가입하기 전에 등록된 글일 경우 보기 싫은 모양(-)을 보여주고 있습니다.

      제 생각인데 그닥보기좋지않은 버튼을 보이는것 보다는 다음view처럼 요건이 안되면 버튼 자체를 보이지 않도록하는게 디자인상 좋지 않을까하는 생각에 건의 합니다만.... ^^;;;

      함... 생각해보심이 어떨런지.... 기대가 큼니다!
      물에 빠진놈 건져놓으니 보따리 달라고 큰소리는... d:)

      2009.05.15 23:35 신고 [ ADDR : EDIT/ DEL ]
    • 이건 믹시에서 제공해야 할 기능같네요...

      PHP를 쓸수 있다면 가능할 것 같긴합니다만... 어차피 티스토리에서는 제한되어서...

      아쉽지만 제가 하기에는 여러모로 제약이 많네요 ㅎㅎ;

      2009.05.17 23:28 신고 [ ADDR : EDIT/ DEL ]
    • 하.하. 그렇습니까?
      그럼 Endless9님께 부탁을 드려볼까나... ^^

      2009.05.18 11:45 신고 [ ADDR : EDIT/ DEL ]
  16. 도아님 블로그에서 타고 들어온 한 찌질이 디벨로퍼입니다 ㅋㅋ.
    오오.. 이거 예쁜데요? 텍스트큐브닷컴용으로 옮겨봐도 괜찮을까요? :)

    2009.05.17 21:07 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 굳굳굳!!

    2009.06.24 00:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 플래쉬님이랑 같게 넣으려고 하는데... 잘 안되네용.... ㅡㅜ
    아후... 어후....

    2009.07.24 00:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 글을 한줄한줄 꼼꼼하게 읽으신뒤 해보시면 금방 따라하실 수 있을 겁니다.

      2009.07.24 10:34 신고 [ ADDR : EDIT/ DEL ]
  19. 설치형 텍스트큐브 사용하는 사람들에게는 안되는 건가요?
    다음뷰 버튼이 위치도 안바뀌고.. 박스형으로 나오네요. --?

    2009.09.04 18:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 설치형 텍스트큐브는 도아님이 작성하신 글을 참고하시면 될 것 같네요...

      아마 플러그인을 이용해 간단하게 설치하실 수 있을 겁니다. :)

      2009.09.04 18:40 신고 [ ADDR : EDIT/ DEL ]
  20. 와우 감사합니다. 잘쓰겠습니다 ^^

    2010.03.16 10:19 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 알려주신 방법 덕분에 생각하던대로 배치를 할 수 있었습니다. 감사합니다^^

    2012.05.25 19:02 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바