출처 - http://blog.naver.com/hyunkh4097?Redirect=Log&logNo=40154019431
1. 설명
ㄱ. SNS(Social Networking Service) 링크기능
ㄴ. 요런녀석 ->
2. 사용법
ㄱ. SNS 링크 각각의 이미지파일을 서버에 등록 및 소스상의 이미지 URL변경
ㄴ. 웹페이지 소스에 SNS 링크를 추가할 HTML 추가 및 id값 지정
ㄷ. 아래소스를 웹페이지에 추가
ㄹ. 이쁘게 css정리
ㅁ. 끝!
function init_sns(container){ //container : SNS링크를 추가 할 객체ID
if(!document.getElementById(container)) return;
var HOST = location.protocol+"//"+location.host;
var HREF = location.href;
if(document.getElementsByTagName("title")[0]){
var TITLE = encodeURIComponent(document.getElementsByTagName("title")[0].innerHTML);
}else TITLE = ""; var FACEBOOK = "http://www.facebook.com/sharer.php?u="+HREF;
var TWITTER = "http://twitter.com/share?text="+TITLE+"&url="+HREF;
var ME2DAY = "http://me2day.net/posts/new?new_post[body]="+TITLE+":"+HREF+"&new_post[tags]="+HOST;
var MSN = "http://profile.live.com/badge?url="+HREF+"&text="+TITLE;
var CYGONGAM = "http://csp.cyworld.com/bi/bi_recommend_pop.php?url="+HREF+"&title_nobase64="+TITLE; var html = [];
html.push('<ul>');
html.push(' <li><img id="sns_facebook" src="img/facebook.gif" alt="facebook" /></li>');
html.push(' <li><img id="sns_twitter" src="img/twitter.gif" alt="twitter" /></li>');
html.push(' <li><img id="sns_me2day" src="img/me2day.gif" alt="me2day" /></li>');
html.push(' <li><img id="sns_msn" src="img/msn.gif" alt="msn" /></li>');
html.push(' <li><img id="sns_cygongam" src="img/cygongam.gif" alt="cyworld" /></li>');
html.push('</ul>');
document.getElementById(container).innerHTML = html.join("\n");
var sns = document.getElementById(container).getElementsByTagName("img");
for(var i=0; i<sns.length; i++){
sns[i].style.cursor = "pointer";
sns[i].onclick = function(){
switch(this.id){
case "sns_facebook" :
window.open(FACEBOOK, "facebookWindow");
break;
case "sns_twitter" :
window.open(TWITTER, "twitterWindow");
break;
case "sns_me2day" :
window.open(ME2DAY, "facebookWindow");
break;
case "sns_msn" :
window.open(MSN, "facebookWindow");
break;
case "sns_cygongam" :
window.open(CYGONGAM, "cygongamWindow", "width=400,height=364,scrollbars=no,resizable=no");
break;
}
}
}
}
|
3. 사용예
<body>
...
<div id="sns_main"></div>
<script type="text/javascript">
init_sns("sns_main"); </script>
...
</body> |