[팁] 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯 통합하기!!!

알림!!! 이 글과 관련된 최신 정보는 http://blog.missflash.com/543 를 참고하시기 바랍니다.

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

• 도아님의 믹시업과 블로거뉴스 대통합 플러그인
• 블로그진님의 포스팅시 믹시 버튼을 이쁘게 – For 워드프레스
• chatii님의 (티스토리) 블로거뉴스 추천 버튼 작게 바꾸기

위 게시물들이 좋은 정보를 제공하고 있음에도 불구하고...

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>

위 소스에서 muid와 guid를 자신의 블로그에 맞는 정보로 편집하시면 됩니다.
자신의 정보를 모르시는 분은 이 곳(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 위젯 표시안함"으로 설정하셔야 합니다.