다음 view 추천 버튼을 본문에 넣기 위하여 추천 버튼 소스를 매번 복사해서 넣거나 아니면 ID만 확인해서 본문에 넣는 분들이 있습니다. 이것을 좀 더 간단하게 자바스크립트를 통하여 다음 view 추천 버튼을 원하는 위치에 추출하여 넣어주는 코드를 소개해 드립니다. 실제로 제 블로그 왼쪽 사이드바에 적용되어 있습니다. 그처럼 소스의 원하는 곳에 넣어도 되고, 또는 본문 중간에 넣을 수도 있습니다. 단, 본문 중간에 넣는 것은 본문에도 일정 코드를 직접 삽입해 주어야 합니다. 물론, 매번 그 코드를 입력하기는 해야 합니다.
실제로 제 블로그를 보면 왼쪽 상단과 제목 아래에 다음 view 추천 버튼이 있습니다. 이것은 티스토리에서도 지원하지 않는 기능으로 자바스크립트를 통해 추가한 버튼입니다.
다음 view 추천 상자를 넣는 방법
다음 view 추천 상자를 본문에서 추출하는 자바스크립트를 스킨 HTML 가장 마지막에 </body> 앞에 추가합니다.
<![CDATA[<script language="JavaScript">
<!--
var i;
for(i=0;;i++) {
var emb_flashvars=document.getElementsByTagName('embed')[i].getAttribute('FlashVars');
if(emb_flashvars.split("=")[0]=="nid") {
document.getElementById("daumview_button").innerHTML='<embed src="http://api.v.daum.net/static/recombox3.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="67" height="80" type="application/x-shockwave-flash"></embed>';
}
}
//-->
</script>]]>
이 코드는 원하는 위치에 다음 view 추천 버튼을 넣어주는 기능을 합니다. 그 다음에는 본문에 view 추천 버튼이 들어갈 곳에 다음의 HTML 코드를 추가합니다.
<![CDATA[<div id="daumview_button"></div>]]>
이것은 스킨 또는 사이드바에 추가하여도 되고 본문에 추가하여도 됩니다. 단 본문에 추가할 경우 이 자바스크립트 코드가 모바일에서는 동작하지 않으므로 빈 칸으로 표시되게 됩니다.
데스크탑 모드에서 보시는 분들은 아래 이미지와 같은 다음 view 추천 버튼을 보실 수 있을 것입니다.
여러 곳에 넣고 싶다면?
제 경우에는 버튼을 여러 개 넣은 것을 볼 수 있습니다. 이 경우에는 방법은 간단합니다. 필요한 만큼 div 태그를 넣고 스크립트도 확장하면 됩니다. 이것은 예시입니다.
<![CDATA[<div id="daumview_button1"></div>]]>
<![CDATA[<div id="daumview_button2"></div>]]>
이와 같은 형태로 div 태그를 본문과 스킨 등에 추가하여 줍니다.
<![CDATA[<script language="JavaScript">
<!--
var i;
for(i=0;;i++) {
var emb_flashvars=document.getElementsByTagName('embed')[i].getAttribute('FlashVars');
if(emb_flashvars.split("=")[0]=="nid") {
document.getElementById("daumview_button1").innerHTML='<embed src="http://api.v.daum.net/static/recombox4.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="82" height="21" type="application/x-shockwave-flash"></embed>';
document.getElementById("daumview_button2").innerHTML='<embed src="http://api.v.daum.net/static/recombox3.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="67" height="80" type="application/x-shockwave-flash"></embed>';
}
}
//-->
</script>]]>
본문에는 div를 필요한만큼 넣고, id를 변경하여 추가하여 줍니다. 그 다음 스크립트 내부에 여러 개의 코드를 넣어주면 됩니다.
버튼의 모양을 바꾸고 싶다면?
버튼을 위와 같은 모양이 아니라 다른 버튼을 쓰고 싶다면 그에 맞는 코드를 쓰시면 됩니다. 각 버튼 모양을 필요한 곳에 바꾸면 됩니다. 바꿀 곳은 document.getElementById("daumview_button").innerHTML 부분입니다.
박스형
<![CDATA[document.getElementById('daumview_button').innerHTML='<embed src="http://api.v.daum.net/static/recombox1.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="400" height="80" type="application/x-shockwave-flash" /></embed>';]]>
얇은 박스형
<![CDATA[document.getElementById('daumview_button').innerHTML='<embed src="http://api.v.daum.net/static/recombox2.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="400" height="58" type="application/x-shockwave-flash" /></embed>';]]>
버튼형
<![CDATA[document.getElementById('daumview_button').innerHTML='<embed src="http://api.v.daum.net/static/recombox3.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="67" height="80" type="application/x-shockwave-flash" /></embed>';]]>
얇은 버튼형
<![CDATA[document.getElementById('daumview_button').innerHTML='<embed src="http://api.v.daum.net/static/recombox4.swf?'+emb_flashvars+'" quality="high" bgcolor="#ffffff" width="82" height="21" type="application/x-shockwave-flash" /></embed>';]]>
이상은 다음 view가 제공하는 4가지 모든 버튼입니다. 이 중에서 원하는 것을 골라 쓰실 수 있습니다.
