IE8] 싸이월드 공감아이콘을 공감버튼으로 바꿔봅니다.

1)
싸이월드 공감의 "아이콘" 버튼을 이용해서 "공감수"를 확인하고 싶다는 얘기가
http://club.cyworld.com/53489290155/58008893 나와서,

즉석해서 만들어본 방법입니다.

*참고*
http://devsquare.nate.com/openApi/empathyButton 

..

2)

아이콘이 <span id=clickButton130522_1></span>&nbsp; 공감처리하면 디테일해지죠.
<script>
// http://club.cyworld.com/53489290155/58008893

var
  buttonReceiver
  ;

(function (){

  var
    cb=document.getElementById('clickButton130522_1')
, cc=0
, wReceived
    ;

  buttonReceiver=function(wReceiver) {

    if (wReceiver) wReceived=wReceiver; else wReceiver=wReceived;
    try {
      if (wReceiver) {
        if (wReceiver.closed) {
          cb.innerHTML='<iframe src="http://csp.cyworld.com/ac/external_sp.php?U=http://www.cyworld.com&B=H" title=\'싸이월드 공감 버튼\' frameBorder=\'0\' scrolling=\'no\' allowTransparency=\'true\' width=\'100\' height=\'20\'></iframe>';
          return;
          }
        cb.innerHTML='processing.. '+(cc++);
        setTimeout(buttonReceiver, 1000);
        } else {
        cb.innerHTML='what\'s matter..? '+(cc++);
        setTimeout(buttonReceiver, 1000);
        }
      } catch(err) {
      cb.innerHTML='sorry.. error..';
      }
   
    }

  cb.innerHTML='<a onclick="buttonReceiver(window.open(\'http://csp.cyworld.com/bi/bi_recommend_pop.php?url=http://www.cyworld.com\', \'recom_icon_pop\', \'width=400,height=364,scrollbars=no,resizable=no\')); return false;" href="#" alt="싸이월드 공감" title="싸이월드 공감" target="_blank" ><img border="0" src="http://csp.cyworld.com/images/ico_clog.gif" alt="싸이월드 공감" title="싸이월드 공감" ></a>';

  })();

</script>

-- 새 창에 샘플 띄우기.. --

..

3)

아이콘이   공감처리하면 디테일해지죠.

..

4)
원리(?)는, 띄워지는 팝업창을 변수로 잡아두고(?)있다가,

setTimeout 으로 해당 창이 닫힐때까지 모니터링 하고, (setTimeout의 존재는 cc++ 로 확인됩니다)
닫히면(wReceiver.closed) 공감수를 띄워 종료하는 방식입니다.

..

5)
API 설명에 있는 샘플에, buttonReceiver130522_1 이라는 함수값으로 넘긴 거라고 보시면 됩니다.
.. 리턴값을 적용하는 형식이 더 좋겠습니다만, 함수적용을 위해서 var 를 넣자니 너무 길어져서요.. 

window.prototype[] 을 적용해서 기차놀이하는 것도 좋겠습니다만, 
window Element 에 접근하는건 조금더 확실해진 후에 하는게 좋겠죠 ^^;..
(output target 이라든지, .. 함수의 무결성이 아직은 부족하거든요..)

..

증가될 메모리 갯수나, 팝업 여러개를 띄울 경우를 생각 못해서(= =;..)
wReceived 한개만 적용했습니다.

DOM 공유는 그냥 넘어가(?)도, 팝업창 선택, 포커스 등의 문제를 해결해야 하니까요..
.. 팝업창 여러개..의 관리는 몰라도

여러개의 공감버튼을 적용하려 한다면

buttonReceiver=function(wReceived){ var wReceived, loofF; loofF=function(){ .. ; setTimeout(loofF, 1000); }; loofF(); };

요런 형식이 될 것 같네요.
(스크립트 공부하실(?) 분들을 위해 적용은 남겨둡니다 ㅎㅎ..)

..

wantHate killofki@.