php 서버로 Blogger 댓글 인용 시스템 구축하기

※블로거 기본 템플릿의 구조를 토대로 만들었기 때문에 다른 템플릿이거나 수정된 경우 작동하지 않을 수 있습니다. 또 jQuery 설치가 필요합니다.


1. 블로거에 위젯으로 CSS와 스크립트 추가(댓글이 로드된 다음에 삽입해야 함)

<style>
.cmtfl{
background-color:#ccddf6;
border:2px solid #1c447b;
}
#quote_id{
border:1px solid #555;
}
</style>
</script>
(function(){
function iafter(p,c){
if (p.nextSibling!=null) {
p.parentNode.insertBefore(c, p.nextSibling);
}else{
p.parentNode.appendChild(c);
}
}
if($('#comments').length!=0){
$('.comment-block').each(function(a,b){
var e=document.createElement('span');
e.className="cmtid";
$(e).html("댓글 ID : "+b.id);
iafter(b,e);
});
var cc=$('.comment-content');
for(var i=0;i!=cc.length;i++){
var t=cc.eq(i).html();
var ct=[];
while(t.indexOf('@!')!=-1){
var ii=t.indexOf('@!');
t=t.replace("@!","<a>");
if(t.indexOf('!@')>ii){
ct.push(t.substring(ii+3,t.indexOf('!@')));
t=t.substring(0,ii+3)+"!!temp!!"+t.substr(t.indexOf('!@'));
t=t.replace("!@","</a>");
}else{
ct.push(t.substr(ii+3));
t=t.substring(0,ii+3)+"!!temp!!";
t=t+"";
}
}
for(var i2=0;i2!=ct.length;i2++){
t=t.replace("!!temp!!",ct[i2]);
}
t=t.replace(/\+@\+!\+/g,"@!");
t=t.replace(/\+!\+@\+/g,"!@");
cc.eq(i).html(t);
}
cc.find('a').each(function(a,b){
b.onmouseover=function(){
var t=$(this).html();
var e=$(document.getElementById(t));
if(e.length==0){
alert('잘못된 인용이거나 삭제된 댓글입니다.');
}else{
var e2=e.parent()[0].cloneNode(true);
$(e2).attr('class','comment cmtfl');
iafter($(this).parent().parent()[0],e2);
}
};
b.onmouseout=function(){
$('.cmtfl').remove();
};
});
}
var urlq=window.location.href;
urlq=urlq.split('blogspot.')[1];
urlq=urlq.substring(0,urlq.indexOf('/'));
var urlcom=window.location.href;
urlcom=urlcom.split('.'+urlq+'/');
urlcom=urlcom[0]+'.com/'+urlcom[1];
urlcom=urlcom.split('?')[0];
urlcom=urlcom.split('#')[0];
var cq="u="+urlcom;
var i=0;
function send_cmt(){
var s=ce('script');
s.async=true;
s.src="http://domain.name/path/to/save_cmt.php?"+cq;
document.body.appendChild(s);
i=0;
cq="u="+urlcom;
}
$('.comment-block').each(function(a,b){
cq=cq+"&c"+i+"="+b.id+"&a"+i+"=true";
i++;
if(i==10){send_cmt();}
});
$('.comment-content a').each(function(a,b){
var t2=$('#'+$(b).text());
if(t2.length!=0){
t2=$(b).text();
var t1=$(b).parent().parent()[0].id;
cq=cq+"&c"+i+"="+t1+"cmtdv"+t2;
i++;
if(i==10){send_cmt();}
}
});
})();
</script>

강조표시한 부분은 save_cmt.php파일 위치로 변경해야 한다.
설명:블로그의 포스트가 로드될 때 댓글에 @!c3532432...!@와 같은 형식으로 쓴 텍스트를 인용 링크로 바꾼다.(@!와 !@를 쓰고 싶다면 +@+!+, +!+@+ 와 같이 쓰도록 했다.) 인용 링크에 마우스를 올리면 인용된 댓글이 아래에 나타난다. 또 댓글 정보를 정리해 save_cmt.php에 쿼리로 전송한다.

2. 서버에 다음과 같은 save_cmt.php 파일 추가

<?php
$ci=0;
$u=$_GET["u"];
while(isset($_GET["c".$ci])){
if(!isset($_GET["a".$ci])){
$c=explode("cmtdv",$_GET["c".$ci]);
if(!file_exists($c[1].".txt")){
$fo=fopen($c[1].".txt","w");
fclose($fo);
}
$f=fopen($c[1].".txt","r");
$s=fread($f,9999);
fclose($f);
if($s===false){exit();}
if($s===""){
if(file_exists($c[1]."_temp.txt")){
$f=fopen($c[1]."_temp.txt","r");
$s=fread($f,9999);
fclose($f);
}else{
$s=$u."0!0".$c[0]."1!1";
}
}else{
$sc=explode("0!0",$s);
$sc=$sc[1];
if($sc===""){
$s.=$c[0]."1!1";
}else{
$sc=explode("1!1",$sc);
$sc=array_splice($sc,0,count($sc)-1);
$i=0;
$sw=false;
while($i!==count($sc)){
if($sc[$i]===$c[0]){
$sw=true;
}
$i++;
}
if($sw===false){$s.=$c[0]."1!1";}
}
}
$f=fopen($c[1]."_temp.txt","w");
fwrite($f,$s);
fclose($f);
$f=fopen($c[1]."_temp.txt","r");
$st=fread($f,9999);
if($st!==false&&$st!==""){
$f=fopen($c[1].".txt","w");
fwrite($f,$s);
fclose($f);
}
}else{
$c=$_GET["c".$ci];
if(!file_exists($c.".txt")){
$fo=fopen($c.".txt","w");
fclose($fo);
}
$f=fopen($c.".txt","r");
$s=fread($f,9999);
fclose($f);
if($s===false){exit();}
if($s===""){
if(file_exists($c."_temp.txt")){
$f=fopen($c."_temp.txt","r");
$s=fread($f,9999);
fclose($f);
}else{
$s=$u."0!0";
}
$f=fopen($c."_temp.txt","w");
fwrite($f,$s);
fclose($f);
$f=fopen($c."_temp.txt","r");
$st=fread($f,9999);
if($st!==false&&$st!==""){
$f=fopen($c.".txt","w");
fwrite($f,$s);
fclose($f);
}
}
}
$ci++;
}
?>

설명:save_cmt.php파일이 있는 디렉토리에 댓글 ID별로 파일을 만들어 댓글이 달린 URL과 그 댓글을 인용한 다른 댓글들의 목록을 저장한다.

3. 서버에 alert_cmt.php 추가

(function(){
var s="<?php
$c=$_GET["c"];
if(!file_exists($c.".txt")){
exit();
}
$f=fopen($c.".txt","r");
$s=fread($f,9999);
$s=explode("0!0",$s);
if(count($s)===1){exit();}else{
$s=$s[1];
}
if($s!==""){
$s=explode("1!1",$s);
$s=array_splice($s,0,count($s)-1);
$i=0;
while($i!==count($s)){
echo "id: ".$s[$i];
if(file_exists($s[$i].".txt")){
$fo=fopen($s[$i].".txt","r");
$for=fread($fo,9999);
$for=explode("0!0",$for);
$for=$for[0];
echo " url: <a target='_blank' href='".$for."#".$s[$i]."'>".$for."</a><br/>";
}
echo "0!0";
$i++;
}
}
?>";
parse_cmtfind(s);
})();

설명:요청한 댓글 ID에 해당하는 파일을 찾아 그 댓글을 인용한 댓글들의 ID를 찾아 URL과 함께 반환한다.

4. 블로거에 위젯으로 인용 기록 찾는 장치 추가

<div>댓글 인용기록 찾기</div>
ID:<input id='quote_id'/><button id='quote_bt'>찾기</button>
<br/>
<img border='0' id='quote_img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tjtj_dFWVJIMlDralMr6X2Z2BavjAci55-V-1S3cEnxmry6wK-rJahVpjs6a0s_TkMvtzuj7i6Wi7vMMB5fwv_hmH0eWhGph9OLvmrPWuTrcYO5YLrHouOslWO_Zsf6znEMi7sLS0vA/s1600/ajax-loader.gif' style='display: none;'/>
<span id='quote_info'></span>
<script>
function parse_cmtfind(s){
if(s==""){alert("인용 기록이 없거나 에러가 발생했습니다.");}else{
var q=s.split("0!0");
q=q.slice(0,q.length-1);
var qt="";
for(var i=0;i!=q.length;i++){
qt=qt+q[i];
}
$('#quote_info').html(qt);
}
$('#quote_img').css('display','none');
}
$('#quote_bt')[0].onclick=function(){
$('.quote_script').remove();
$('#quote_img').css('display','inline');
var s=document.createElement('script');
s.async=true;
s.className='quote_script';
s.src="http://domain.name/path/to/alert_cmt.php?c="+$('#quote_id')[0].value;
document.body.appendChild(s);
};
</script>

강조표시한 부분은 1번처럼 수정해준다.


위 과정을 마치면 설치가 완료된다. 아래는 적용 예시다.

댓글에 @![댓글 ID]!@와 같이 적으면 위와 같이 인용 링크가 만들어지며, 링크에 마우스를 올리면 아래에 파란색 박스로 인용된 댓글이 불러진다.

댓글 ID를 입력하면 해당 댓글을 인용한 댓글과 포스트 주소가 나온다.

이 인용 시스템을 사용하려면 댓글 id를 저장해두었다가 인용을 확인할 때 입력하면 된다.
다만 이 시스템은 로그인이나 가입 개념이 없고 보안에 취약한 매우 간단한 구조임을 알린다. 누구나 save_cmt.php에 접근할 수 있기 때문이다. 때문에 만약 공격을 받는다면 서버 파일을 재정비해주어야 하는 수고가 따른다. 그럼에도 필자가 이 시스템을 만든 이유는 블로거의 댓글 알림 기능이 빈약하기 때문이다. 누구나 가입하지 않고도 답글 알림을 받을 수 있도록 하는 이용자 편의 중심의 개방적 시스템이다.

이런 방식 외에 댓글을 달 때 이메일을 강제로 기재(이메일이 없으면 댓글을 나타내지 않는다거나)하도록 해서 다른 사용자가 답글을 달 때 원댓글 사용자에게 메일을 보내길 추천하는 방식도 고려중이다.