모바일홈페이지에 각 페이지마다 공유 버튼을 다는 도중 모듈식으로 묶어보면 어떨까 해서 만들어 봤다.
페이스북, 트위터, 미투데이만 작업했으며
구성방법은 다음과 같다.
1. 링크주소는 location.href로 받아오면 되므로 구지 href안에다가 넣지 않는다.
2. 링크 텍스트는 title태그 안에 명시한 내용을 그대로 사용한다.
(어짜피 해당 링크 설명은 타이틀에 잘 명시하면 추가적으로 손보지 않아도 되므로)
SNS 별 공유방법
1. facebook
http://www.facebook.com/share.php?u=[링크주소]&t=[텍스트]
2. twitter
http://twitter.com/share?url=[링크주소]&text=[텍스트]
3. me2day
http://me2day.net/posts/new?new_post[body]=[텍스트]:[링크주소]
태그도 넣고 싶을 시 &new_post[tags]=[테그명]
html파일
<!DOCTYPE html>
<html lang="ko">
<head>
...
<title>[홈페이지명] > [서브메뉴] > [서브페이지명]</title>
</head>
<body>
...
<div id="sns_wrap">
<ul class="sns_list">
<li><a target="blank" id="sns_facebook" href="http://www.facebook.com/share.php" title="페이스북에 이 페이지 공유하기"><img src="../../images/img_sns01.jpg" alt="페이스북" /></a></li>
<li><a target="blank" id="sns_twitter" href="http://twitter.com/share" title="트위터에 이 페이지 공유하기"><img src="../../images/img_sns02.jpg" alt="트위터" /></a></li>
<li><a target="blank" id="sns_me2day" href="http://me2day.net/posts/new" title="미투데이에 이 페이지 공유하기"><img src="../../images/img_sns03.jpg" alt="미투데이" /></a></li>
</ul>
</div>
..
</body>
새 페이지에서 공유해야 공유 후 해당 페이지로 돌아올 수 있으므로 target="blank"를 걸어주며 해당 SNS의 주소는 기본적인 내용만 기재한다.(이부분은 html에 기재하지 않고 자바스크립트에서 전역변수(?)로 저장해서 관리해도 무방하다. 어짜피 스크립트에서 컨버팅 할 것이기 때문에)
js파일
// SNS로 보내기
function sendSNS(){
var str_href;
var str_u = location.href;
// 타이틀 태그 안에 > 로 depth표시가 되어 있기 때문에 replace
var str_t = $("title").html().replaceAll(" > ", ">");
$("#sns_facebook").click(function(){
str_href = $(this).attr("href");
$(this).attr("href", str_href + "?u=" + encodeURIComponent(str_u) + "&t=" + encodeURIComponent(str_t));
});
$("#sns_twitter").click(function(){
str_href = $(this).attr("href");
$(this).attr("href", str_href + "?url=" + encodeURIComponent(str_u) + "&text=" + encodeURIComponent(str_t));
});
$("#sns_me2day").click(function(){
str_href = $(this).attr("href");
str_t = '"' + str_t + '"';
$(this).attr("href", str_href + "?new_post[body]=" + encodeURIComponent(str_t) + ":" + encodeURIComponent(str_u));
});
}
이렇게하면 공통적으로 많은 부분에서 돌려 사용할 수 있다.
위에서 언급한 것 처럼 각 SNS의 주소를 따로 빼서 사용하려면 전역변수(?)에서 가져다가 사용하면되고
자바스크립트에서 동적으로 html을 만들어 처리하는 것 역시 여기서 조금만 응용하면 쉽게 사용 가능하다고 본다.
'Javascript' 카테고리의 다른 글
| prototype + sly (0) | 2014.02.03 |
|---|---|
| ajax로 통신 시 로딩 처리 (0) | 2012.07.16 |
| 기간체크 validate (0) | 2012.06.28 |
| 경과시간 체크 (0) | 2011.11.28 |
| 자바스크립트 Eval (1) | 2011.11.28 |
