믹시업과 블로거뉴스 대통합 플러그인

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

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

오늘 올린 글은 얼마 되지 않는다. 그 이유는 오전에는 태그 아래에 지역로그를 출력해 주는 플러그인[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=http://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=http://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=http://offree.net/[##_article_rep_id_##]에서 블로그 주소(http://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 워드프레스이나 워드프레스용 블로거 위젯 플러그인를 읽어 보기 바란다.

관련 글타래


  1. 이런 플러그인이나 치환자가 이미 있을 수도 있다. 그러나 찾지 못해서 그냥 만들었다. 다만 이 플러그인도 설정 부분을 만드는 것이 귀찮아 공개하지 않을 생각이다. 
  2. 정확히는 백업용으로만 티스토리를 사용한다. 
2009/03/06 22:30 2009/03/06 22:30
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: http://offree.net/trackback/2363

  1. Subject : 포스팅시 믹시 버튼을 이쁘게 – For 워드프레스

    Tracked from Blogine 2009/04/05 13:43 del.

    가끔 제 블로그에 방문하시어 믹시 버튼과 다음추천 버튼을 어떻게 작게 했는지 물어보는 분들이 계십니다. 믹시 버튼과 아울러 다음추천 버튼과 기타 메타 사이트 추천버튼을 배치하다 보...

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

    Tracked from [ MissFlash - Digital Life ] 2009/04/11 15:52 del.

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

  3. Subject : 워드프레스용 블로거 위젯 플러그인

    Tracked from 내 맘대로 보는 세상 2009/04/12 05:31 del.

    오늘 아침 믹시를 돌아다니다가 MissFlash님이 올리신 통합 위젯 플러그인 포스트를 보게 되었습니다. (Miss면 여자분이신건가 -_-a) 조금 아쉬운 점이라면 javascript를 사용하셨다는 것 정도? 웹기...

  4. Subject : [팁] 티스토리에서 믹시&amp;블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!!

    Tracked from [ MissFlash - Digital Life ] 2009/04/22 00:18 del.

    * 이 포스트는 티스토리에서 믹시와 다음 블로거뉴스 추천 위젯의 크기나 위치를 임의로 조절하는 것과 관련된 팁입니다. * 이전 글을 참고하시면 설치와 관련된 팁이나 노하우를 쉽게 이해하?

  5. Subject : 제 블로그 하단 정리 이쁘지 않나요?

    Tracked from 관심꺼리.log 2009/05/16 04:00 del.

    도아님의 믹시업과 블로거뉴스 대통합 플러그인 포스트를 읽고 동하여 포스트 하단을 정리해보기로 했어요. 새벽 3시까지 삽질많이 했네요. Missflash님의 글, [팁] 티스토리에서 믹시와 다음 블?

  6. Subject : 텍스트큐브닷컴용 메타사이트 대통합 플러그인을 공개합니다 [컨버터 포함]

    Tracked from KLOG - 삽질로그 2009/05/18 00:08 del.

    나 참, 오늘 하루종일 블로그만 하고 앉아 있네요. 너무 계획한게 많아서 이거이거 (...) 어쨌거나 개발한건 배포한다는 저의 멋지고 아름다운 정신에 따라[헐] 오늘 또 하나 부족한 플러그인 공?

  7. Subject : 다음뷰와 믹시,메타사이트 추천버튼 통합하기

    Tracked from 필넷의 블로그라이프 2009/09/07 12:39 del.

    이번에는 다음뷰, 믹시 그리고 메타사이트 추천버튼을 한줄로 통합하는 작업을 위해 또다시 삽질을 했습니다. 티스토리의 블로그에서는 missflash님 께서 공개한 자바스크립트로 비교적 쉽게 적?

  8. Subject : 메타 사이트 추천 버튼 통합 , 깔끔하게 디자인 하기.(포토샵 이용)

    Tracked from happynori Blog 1.0.0 2010/08/02 19:38 del.

    해피노리 블로그 새단장을 하면서 디자인 하려구 오늘낮시간동안은 이리저리 헤맷던거 같습니다. 아직 허접하지만 혹시나 깔끔한거 좋아하시는 분들께 조금이나마 도움이 되고자 버튼을 만들

Facebook

Comments

  1. 역전의용사 2009/03/06 22:53

    항상 방문하다보면 믹시추천버튼도 없고 믹시에서 도아님 글이 안보이길래 믹시는 사용안하시는 줄 알았네요 ^^;

    perm. |  mod/del. reply.
    • 도아 2009/03/06 23:03

      오늘 가입했습니다. 그전에도 제 글을 수집해 가는 것은 알았지만 위젯이 어울리지 않아서 가입도 하지 않고 위젯도 달지 않았습니다. 오늘 가입해 보니 올블로그 보다 기능도 다양하고,,, 괜찮더군요. 무엇보다 블로거뉴스와 믹시업을 깔끔하게 통합할 수 있다는 것이 가장 큰 성과였던 것 같습니다.

  2. 베쯔니 2009/03/06 22:57

    저도 대통합 한번 해야할것 같네요

    깔끔해서 좋습니다!!

    perm. |  mod/del. reply.
    • 도아 2009/03/06 23:04

      티스토리도 블로거뉴스 위젯을 태그 형태로 달 수 있다면 얼마든지 가능합니다. 이렇게 하니 훨씬 보기가 좋더군요.

  3. 백마탄 초인 2009/03/06 23:10

    오, 깔쌈하군요!!
    베리 나이습니다,,하하

    perm. |  mod/del. reply.
    • 도아 2009/03/06 23:15

      감사합니다. 이렇게 하니 조금 볼만하더군요.

  4. 비트손 2009/03/07 00:18

    워프용으로 누가 플러그인 하나 만들어 줬으면 좋겠다라는 생각이 들정도네요. 개발하시는 분들한테 한번 졸라봐야겠어요.^^

    perm. |  mod/del. reply.
  5. 비젼테크 2009/03/07 00:25

    <embed src="http://api.bloggernews.media.daum.net/static/recombox1.swf?nid=2670966" quality="high" bgcolor="#ffffff" width="400" height="80" type="application/x-shockwave-flash"></embed>

    perm. |  mod/del. reply.
  6. nooe 2009/03/07 00:56

    우와~ 곧 방 빼!라고 할라고 그랬는데.. 일단 두 살림을 통합해주셨군요.^^; 믹시업이 불만인지 추천해도 뺑글뺑글 돌아가기만하네요. 그냥 말로 추천 세번 땅땅땅입니다.

    추천버튼이 크기를 4분의1로만 줄여줘도 참 좋을텐데요...

    perm. |  mod/del. reply.
    • 도아 2009/03/07 01:23

      위젯을 조금 다양한 형태로 제공하면 좋을 텐데 위젯이 너무 크고 단추형을 제공하지 안아 불편하더군요. 이 플러그인을 설치하고 블로거뉴스 플러그인에서 버튼을 선택하면 둘다 깔끔하게 단추로 나옵니다.

  7. elemen 2009/03/07 01:16

    http://chatii.tistory.com/52 이런 방법도 있어요

    perm. |  mod/del. reply.
    • 도아 2009/03/07 01:21

      그건 방법이 아닙니다. 원래 블로거뉴스는 추천 단추를 네가지 형식으로 제공합니다. 블로거뉴스 플러그인이 있다면 환경설정에서 버튼형을 선택하면 바로 바뀝니다.

  8. odlinuf 2009/03/07 01:38

    이런 불만이 있다는 것을 서비스 업체들도 알고 있을텐데, 저마다 크게 보이고 싶은 욕심때문일까요? 사용자가 직접 해결해야하는 현실이 참 거시기합니다. 블로거뉴스가 작은 버튼을 제공하긴 하지만 티스토리에선 일일이 수동으로 삽입해야 하기 때문에 여간 귀찮은게 아닙니다. 그래서 얼마전엔 자동으로 치환해주는 스크립트를 발견하고 그걸 사용하고 있지요. 아, 바로 위에 elemen님께서 적으셨군요.
    아무튼 적당한 크기로 모든 메타 사이트 추천 위젯이 '대'통합됐으면 하는 바람입니다. 추천 버튼이 아주 깔끔하고 좋네요. :-)

    perm. |  mod/del. reply.
    • 도아 2009/03/07 01:49

      블로거뉴스 플러그인이 티스토리에서 먼저 나와서 당연히 선택 가능한 것으로 알았는데 아니었군요. 원래 네가지 중 한가지를 선택할 수 있는데 왜 그 옵션도 제공 안하는 것인지 모르겠군요.

      저도 폭은 여러가지로 만들어도 높이는 통일을 시켜서 깨지지 않도록족 했으면 좋을 것 같더군요.

  9. JNine 2009/03/07 02:17

    티스토리에서도 지원했으면 좋겠군요.

    perm. |  mod/del. reply.
    • 도아 2009/03/07 09:08

      티스토리는 조금 힘들지 않을까 싶더군요. 원래 반응이 조금 늦은 곳이라서...

  10. 실비단안개 2009/03/07 04:03

    깔끔합니다.
    믹시에 추천인은 반영이 되지 않는군요.^^

    perm. |  mod/del. reply.
    • 도아 2009/03/07 09:09

      추천인에 표시되는군요. 위젯을 줄여 놨기 때문에 믹시 홈에서만 반영됩니다.

  11. 공상플러스 2009/03/07 12:53

    이것도 합체한다는 사실이 좀 대단한듯 하군요..ㅇㅂㅇ

    perm. |  mod/del. reply.
    • 도아 2009/03/07 14:00

      합체를 해야 깔끔해 지더군요. 다만 믹시에서 걸고 나오지 않을까 하는 생각도 듭니다.

  12. 하이컨셉 2009/03/07 17:04

    기막힌 합체를 하셨는데, 티스토리라 ...
    나중에 삼단합체할 일이 생기지는 않을까요? ㅎㅎ

    perm. |  mod/del. reply.
    • 도아 2009/03/08 09:01

      티스토리도 가능할 것 같더군요. 저는 티스토리를 사용하지 않아서 모릅니다만...

  13. 민노씨 2009/03/08 00:28

    이 글 직전에 엔들리스나인님으로부터 이런 답글을 받았는데요.
    ( http://aucrazy.com/54#comment72 )

    그래서 도아님 글 제목만 보고선, 이렇게 빨리!? 이랬습니다.
    도아님께서 텍스트큐브를 위해 손수 만든 플러그인이군요.
    정말 노고가 크셨습니다. : )

    추.
    저는 역시나 블로거뉴스에 대해선 여전히 블로그 상호간 교류나 대화의 확장에 도움을 주는 유통망이라기 보다는, 그러니 쌍방향 커뮤니케이션을 지향한다기 보다는 기존의 미디어들처럼 일방향 컨텐츠 제공을 목적하는 것 같아서... 좀 많이 아쉬움이 있습니다.

    perm. |  mod/del. reply.
    • 도아 2009/03/08 09:02

      블로거뉴스는 저도 비슷하게 생각합니다. 그래서 발행을 중지할까 하는 생각도 하고 있습니다.

  14. bonheur 2009/03/08 00:58

    깔끔하니 좋은 것 같습니다.

    메타 사이트들 추천단추가 모두 대통합되면 좋겠네요.

    perm. |  mod/del. reply.
    • 도아 2009/03/08 09:02

      예. 가장 좋은 방법이죠. 그런데 올블과 블코는 추천 위젯을 만들지 않는 이유를 모르겠더군요.

  15. 이노 2009/03/08 02:28

    이거 워드프레스 에서도 가능한가요?

    perm. |  mod/del. reply.
  16. MissFlash 2009/03/16 11:18

    ^^; 티스토리 쓰는 저로서는 군침만 흘려야 겠네요...

    조만간 티스토리에서도 쓸수 있기를 기대해 봅니다. ㅎㅎ;

    perm. |  mod/del. reply.
    • 도아 2009/03/16 11:29

      티스토리는 반영 속도가 느려서 어찌될지 모르겠더군요. 블로거뉴스 플러그인도 위젯 선택이 안된다는 이야기가 있더군요.

  17. yol 2009/04/01 13:33

    자료만 낼름 퍼 갈려다가..
    "이 플러그인이 고마운 사람은 가차없이 믹시업과 블로거뉴스 추천을 해주기 바란다."
    로그인 귀차니즘에 블로거뉴스만..

    제 글에는 내용도 별로 없고, 답글은 달지 안으셔도 된답니다....

    perm. |  mod/del. reply.
    • 도아 2009/04/01 15:18

      가끔 답글을 달러 순회하고 다닙니다. 방문 감사합니다.

  18. toice 2009/04/02 14:53

    글 보고 저도 믹시업 달았습니다. 그런데 저 소스에서 블로그 주소 뿐만 아니라 muid 값도 바꿔줘야 가능하더군요.

    perm. |  mod/del. reply.
    • 도아 2009/04/02 18:06

      예. 확인해 보니 mixsh 아이디도 바꿔야 하겠더군요. 본문을 수정해 두겠습니다.

  19. 블로그인 2009/04/05 13:42

    도아님, 본문을 약간 코드를 이용하여 포스팅을 하나 했는데요. 기본적으로 펌은 안되는 것은 알지만 아주 약간 코드 부분만 인용했는데, 이해해 주실런지요? ^^

    perm. |  mod/del. reply.
    • 도아 2009/04/05 13:47

      부분 인용은 허락을 받지 않으셔도 됩니다. 펌과 인용은 다르니까요. 제가 펌이라고 하는 것은 본문 전체를 가져가는 행위를 말합니다.

  20. goohwan 2009/04/10 11:55

    포스팅 내부의 소스보기 부분이 "ie8" "The world browser"에서 아래 캡쳐화면처럼 보여요.. 크롬에선 정상적으로 보입니다...

    http://farm4.static.flickr.com/3302/342 ··· 41_o.png
    http://farm4.static.flickr.com/3631/342 ··· fa_o.png
    http://farm4.static.flickr.com/3568/342 ··· ce_o.png

    perm. |  mod/del. reply.
    • 도아 2009/04/10 12:13

      알고 있습니다. adsmart때문에 발생하는 것이기 때문에 adsmart측에 버그 보고를 해둔 상태입니다.

  21. MissFlash 2009/04/11 15:51

    도아님을 비롯해 몇 분의 도움으로 티스토리에서도 완벽호환되게 수정했습니다. 관련글을 트랙백 남깁니다. ㅎㅎ;

    PS. 도아님, 가능하다면 티스토리에서도 가능하다고 본문수정해주시면 감사하겠습니다.

    perm. |  mod/del. reply.
    • 도아 2009/04/12 09:26

      예. 본문을 수정하는 것이 아니라 아래쪽에 추가해 두겠습니다.

    • MissFlash 2009/04/12 10:32

      네~ 감사합니다. ㅎㅎ; 즐거운 주말 보내세요 ㅎㅎ;

  22. 찰이 2009/04/15 15:05

    감사합니다. 정말 잘 활용할 수 있을듯 합니다. !!

    perm. |  mod/del. reply.
  23. 무진군 2009/04/17 15:28

    가차 없이 추천합니다.ㅋ

    perm. |  mod/del. reply.
  24. MissFlash 2009/04/22 00:18

    글목록 관련 수정 팁 작성하고 트랙백 보냅니다. ㅎㅎ;

    perm. |  mod/del. reply.
  25. 똥떵거리 2009/05/28 21:43

    좋은 플러그인 잘 쓰겠습니다~!
    감사합니다!^^

    perm. |  mod/del. reply.

댓글로 기쁨을 나눠요!

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.