믹시업 통합

블로그에 글을 쓰다 보면 가끔 믹시업 위젯을 달지 않는 이유를 물어 보는 분이 있다. 믹시가 나름대로 편하고 또 인기를 끈 것도 사실이다. 그러나 트래픽 유입에 도움이 되는 믹시업 위젯을 달지 않는 이유는 아주 간단하다. 블로거뉴스 추천 위젯과 믹시업 위젯을 함께 달면 배치가 상당히 어긋나기 때문이다.

깔끔하고 정렬된 것을 좋아하는 나로서는 두개의 위젯이 떨어져 표시되는 것이 마음에 들지 않았다. 누에고치님의 제안처럼 두개의 위젯이 통합된다면 믹시업 위젯을 바로 달 생각도 있었다. 그러나 세상 일이라는 것이 뜻대로 되는 것은 아니기 때문에 블로거뉴스 추천 위젯만 달아 두고 있었다.

오늘 올린 글은 얼마 되지 않는다. 그 이유는 오전에는 태그 아래에 지역로그를 출력해 주는 플러그인^[1]을 만들었고 오후에는 믹시업 위젯과 다음 위젯을 통합하는 작업을 했기 때문이다. 일종의 꼼수이기는 하지만 현재 이 블로그에서는 믹시업 위젯과 다음 블로거뉴스 위젯을 다음 그림처럼 깔끔하게 통합했다.

통합된 추천 위젯

왼쪽이 '믹시업 위젯'이고 오른쪽이 '블로거뉴스 추천 위젯'이다. 공간이 조금 남아서 추천 유도 문구도 넣었다. TAG 아래에 LOG는 지역로그가 있는 경우 자동으로 지역로그를 출력해 주는 플러그인이다. 클릭하면 해당 단어를 검색한 결과를 보여준다. 또 ADD는 내가 예전에 개발해서 배포한 책갈피 플러그인이다.

믹시업 위젯을 단추로 변형

이렇게 통합이 가능한 이유는 두 가지이다. 먼저 "'믹시업 위젯'도 따지고 보면 플래시라는 점", 두번째는 "블로거뉴스 플러그인을 임의의 위치에 달 수 있도록 이미 패치했다"는 점때문에 가능했다. 믹시업 위젯은 스크립트로 배포되지만 그 스크립트는 OBJECT 태그를 이용해서 플래시 파일을 호출하는 스크립트에 불과하다. 따라서 OBJECT 태그를 직접 사용해서 스킨의 임의의 위치에 붙일 수 있다. 사용한 코드는 다음과 같다.

<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=92&guid=https://offree.net/[##_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=92&guid=https://offree.net/[##_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>

위의 코드를 보면 알 수 있지만 이 코드를 이용할 사람은 guid=https://offree.net/[##_article_rep_id_##]에서 블로그 주소(https://offree.net/)만 바꿔주면 된다. 이렇게 하면 위의 그림과 같은 단추형 믹시업 위젯이 만들어진다. 위의 그림에서는 믹시업 위젯과 블로거뉴스 위젯을 합치고 오른쪽 선을 다음 블로거뉴스 추천 위젯의 선을 사용했다. 따라서 실제 적용한 코드에는 'border-right: 1px solid #CFD4DA;'가 빠진다.

블로거뉴스 플러그인 패치

블로거뉴스 플러그인은 'ViewPostContent' 이벤트를 이용해서 블로거뉴스 추천 위젯을 붙인다. 이 방법은 "스킨을 편집할 필요가 없다"는 장점이 있지만 "위젯의 위치를 바꿀 수 없다"는 단점이 있다. 그래서 예전부터 블로거뉴스 위젯을 스킨 임의의 위치에 삽입할 수 있도록 패치해서 사용하고 있었다. 즉 이 패치와 위에서 믹시업 단추 위젯을 통합해서 블로거뉴스 플러그인을 패치했다.

다만 이 블로거뉴스 플러그인은 내가 개발한 것이 아니라 엽기민원님이 개발한 것이다. 따라서 텍스트큐브 공식 플러그인으로 등록하지 않았다. 또 두 개의 추천 위젯을 통합하다 보니 부가적으로 추가할 기능이 있어서 임시판만 공개하기로 했다. 따라서 이 플러그인에 대한 질문은 일체 받지 않는다. 동작하지 않으면 포기하면 된다.

이 플러그인은 엽기민원님이 만든 블로거뉴스 플러그인과 사용하는 방법은 거의 똑 같다. 한 가지 차이가 있다면 본문 끝에 자동으로 추천 위젯을 붙이는 것이 아니라 스킨의 원하는 위치에 [##_bloggernews_##]라는 치환자를 삽입해야 한다는 차이가 있다. 현재 사용된 추천 위젯 통합 플러그인은 다음과 같은 코드를 스킨에 삽입한 것이다.

<div style="margin-top: 10px;">[##_bloggernews_##]
<div class="recommand">왼쪽은 <a href="http://mixsh.com/media/92">믹시</a>  
오른쪽은 <a href="http://bloggernews.media.daum.net/reporter/doax">블로거뉴스</a>  <span style="color: #cc3300; font-weight: bold;">
추천은 필수!</span></div></div>

추천문구에 사용된 CSS 정의는 다음과 같다. CSS에서 'width'는 스킨에 따라 달라질 수 있다.

.recommand {
    float: right; 
    width: 142px; 
    font-size: 13px; 
    border-top: 1px solid #C3C9E0; 
    border-right: 1px solid #C3C9E0; 
    border-bottom: 1px solid #C3C9E0; 
    height: 75px; 
    padding: 3px 2px 0 2px;
}

'통합 플러그인'은 텍스크큐브 1.7 이상에서만 사용할 수 있다. 사실 이 이하의 판에서는 시험해 보지 않았다. 잘 동작한다면 댓글로 알려주기 바란다. 또 당연한 이야기지만 텍스트큐브의 형제 - 티스토리, 텍스트큐브닷컴 - 에서는 사용할 수 없다. 마지막으로 이 플러그인이 고마운 사람은 가차없이 믹시업과 블로거뉴스 추천을 해주기 바란다.

티스토리와 워드프레스

나는 티스토리 사용자가 아니기 때문^[2]에 티스토리용은 티스토리를 사용하는 분이 만들어 주기를 바랬다. 그리고 염원대로 Missflash님이 티스토리에서 사용할 수 있는 방법을 올려 주셨다. 따라서 티스토리에서 사용하려면 Missflash님의 글, [팁] 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯 통합하기!!!을 읽어 보기 바란다.

또 워드프레스용은 블로그인님과 정태영님이 만들어 주셨다. 따라서 워드프레스에서 사용할 사람은 포스팅시 믹시 버튼을 이쁘게 – For 워드프레스이나 워드프레스용 블로거 위젯 플러그인를 읽어 보기 바란다.