본 블로그는 까마귀가 사용하는 브라우저에서 가장 이쁘게 보입니다.
Permalink: http://pnpcrow.egloos.com/4866732
 가가 라이브라는 무료 온라인 채팅 프로그램이 있습니다. 플래시를 이용한 채팅방으로 블로그에도 쉽게 설치가 가능하며, 홈페이지의 경우에는 PHP만 조금 만질 수 있다면 쉽게 연동이 가능하죠.

 그런데 문제점은 PHP를 운용할 수 있어야 연동이 된다는 점 입니다. 홈페이지 내에 있는 API 설명에도 PHP에 연동하는 것 뿐이며, 제로보드XE나 그누보드 같은데에서 사용되는 스킨 PHP파일에 일부 코드를 삽입하는 것으로 연동을 하도록 되어 있습니다. PHP에 있는 MD5 생성 기능으로 보안 키값을 만들려는 의도로 인해서 제한이 생기는 것 같기는 합니다만 일반적으로 가장 많이 요구하는 것이 블로그에 삽입할 때 연동인 것을 감안하면 이글루스와 같은 데에서 연동하는 것에는 맞지 않는 설명이 됩니다.

 그래서 이글루스에서 사용할 수 있는 방법을 생각해 보다가 사용자 닉과 ID가 특정 키 값으로 제공된 다는 점을 응용해 보기로 했습니다. 관리자 권한은 획득하지 못하지만 그래도 사용하는데에는 큰 문제는 없을 것으로 생각되어집니다. 그저 대화만 하는 용도로 제한을 한다면 말입니다.

<div id="GagaLive"></div>
<img src="http://md.egloos.com/img/eg/ico_comment.gif" border="0" alt="까마귀의 둥지" style="position:absolute;top:0px;left:0px;width:0px;height:0px;" onload="try{nick=info.usernick+'('+info.blogid+')';}catch(err){nick='손님('+(new Date().getTime()%Math.pow(10,5)).toString(16)+')';};var _gaga=document.createElement('embed');_gaga.setAttribute('src','http://www.gagalive.kr/livechat1.swf?chatroom=@@@crows&user='+nick);_gaga.setAttribute('width','640');_gaga.setAttribute('height','300');_gaga.setAttribute('allowtransparency','true');document.getElementById('GagaLive').appendChild(_gaga);">

 위 소스에서 이텔릭체로 되어 있는 부분만 수정하시면 됩니다. @@@crows는 대화방 이름입니다. 대화방 이름이기 때문에 자신이 만든 대화방 이름을 넣거나 인스턴트로 만들어서 쓰시면 됩니다. 640과 300은 대화방의 크기로 블로그에 맞게 수정하면됩니다.

 이글루스에 로그인이 되어 있다면 이글루스의 닉과 ID가 표시됩니다. ID는 이글루에서 사용하는 내부 ID를 뜻 합니다. 자신의 ID를 알고자 하면 자신의 블로그에서 글쓰기나 관리 페이지로 들어갔을 때 eid의 값을 확인하면 됩니다. 만약 이글루 ID가 아닌 블로그 URL을 뒤에 넣고자 한다면 위에 밑줄 그은 info.blogid를 info.blogurl로 수정하시면 됩니다. - 블로그 주소는 얼마든지 변경이 가능하기 때문에 절대로 변하지 않는 블로그 ID를 그대로 사용하실 것을 권장합니다.
 로그인이 되어있지 않으면 페이지에 접속한 시간을 기준으로 컴퓨터에서 만들어지는 시간 값이 사용자 이름으로 자동으로 사용됩니다.


<div id="GagaLive"></div>
<script a="<>" language="javascript">
    gagaDIV = "GagaLive";
    chatroom = "@@@chatroom";
    gWidth = "640";
    gHeight = "480";
    gIDType = "1";
</script a="<>">
<script a="<>" language="javascript" src="http://blog.crows.pe.kr/gaga/chat.php"></script a="<>">

혹은
<div id="GagaLive"></div>
<imgsrc="http://md.egloos.com/img/eg/ico_comment.gif" alt="까마귀의둥지"style="position: absolute; top: 0px; left: 0px; width: 0px;height:0px;" onload="gagaDIV='GagaLive';chatroom='@@@chatroom';gWidth='640';gHeight='480';gIDType='1';vargs=document.createElement('script');gs.setAttribute('src','http://blog.crows.pe.kr/gaga/chat.php');document.getElementById(gagaDIV).appendChild(gs);"border="0">

 gagaDIV는 대화방이 삽입될 엘리먼트 ID입니다. 바로 위에 있는 DIV의 ID 부분을 마음대로 수정하되 같은 이름이 되도록 하면 됩니다. chatroom은 채팅방의 이름입니다. 자신이 만든 채팅방 이름으로 넣으면 됩니다. gWidth와 gHeight는 가로 크기와 세로 크기입니다. 수치 값을 넣어주면 됩니다. gIDType은 이글루에 로그인된 사람의 블로그 ID를 표시할지를 결정합니다. 1은 블로그 ID를 표시, 1 이외의 값은 블로그 URL 값이 들어갑니다. 예를 들어 1로 입력할 시에는 까마귀(c0000089)가 나오게되고 1이외의 값이면 까마귀(pnpcrow)가 나오게 됩니다. - 블로그 URL은 임의로 변경 가능하므로 블로그 ID 사용을 권장합니다.
 위 아래에 있는 스클립트는 IP를 확인하는 소스와 대화방 삽입 소스부분입니다. 접속자의 IP에 따라서 손님 뒤에 값이 고정되기 때문에 이전에 시간에 따른 변경에서오는 방문자 확인이 좀 더 용이하게 되었습니다.


까마귀의 둥지
알려진 문제
- 파이어폭스에서 레몬펜 사용시 드래그를 할 경우 대화창 복제 - script 소스로는 발생하지 않음
- IE 7 이하 버전에서 닉네임 연동 안됨 ─ 브라우저의 JAVASCRIPT 구문 미지원의 문제로 IE 7 이상으로 업데이트 필요 (IE 7, FF 3.0.6, Chrome 1.0.154.48에서 동작 확인 됨)
- IE에서 간혹 IP 확인 소스가 제때 실행되지 않아서 변수값이 없이 나머지 스크립트가 먼저 실행되는 문제 - 방법 변경으로 해결

추가.
 손님 뒤에 붙는 숫자의 길이가 너무 길어서 5자리의 16진수가 표시되게 수정
추가2.
 소스코드를 조금 더 직관적이도록 수정 및 접속자 IP를 확인하여 손님 뒤에 표시되도록 만듬. IP가 변동되지 않는 한 닉이 변동되지 않습니다.
| 2010/03/06 09:57 | 덧글(2) | Top

:         :

:

비공개 덧글

Commented by XXX at 2011/12/09 12:47
밑에다 글을올렸는데 볼수가없네요....ㅠㅠ답변은 여기에 달아주세요....
Commented at 2011/12/09 12:45
비공개 덧글입니다.