참고 : https://opentutorials.org/course/50/190
어떤 사이트의 유지보수 업무를 맡았을때의 일이다.
사이트가 설계부터 상당히 조악했었다. include 부터가 이상하게 꼬여 있었기에.
사이트의 이벤트 페이지를 SNS에 공유하는 기능을 만들때였다.
내가 원하는건 해당 SNS공유 버튼이 있는 EVENT 페이지에서의 내용이
SNS에 잘 공유되는 것이었는데, 계속 원치 않는 메인페이지로만 공유되고.
관련 이미지도 띄울 수 없는 사태였다.
include 경로가 굉장히 이상하게 꼬여있었기에.
왠만하면 그냥 자동으로 되는 SNS Share 기능이 제대로 작동 될수가 없던 그런 상황이었다.
결국 SNS 공유 기능에 사용되는.
meta 태그의 property 속성 og: 관련 내용을 직접 설정하는 식으로 내용을 해결해 나가야 했고.
괜히 5분 10분이면 끝날작업을, 엄청 생고생 하며 만들었고.
짜증이 매우 났기에, 또 이런 상황에 대응하기위한 모듈을 만들 생각으로
이렇게 포스팅하게 되었다.
# 소스코드
<script type="text/javascript">
function shareSns(sns) {
var getUrl = "?name=<?=$_GET['eventName']?>&title=<?=$_GET['eventTitle']?>&img=" + jQuery("img:eq(10)").attr("src");
var fullUrl = "";
if(sns == "f") {
fullUrl = "http://www.facebook.com/share.php?u=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
} else if(sns == "t") {
fullUrl = "https://twitter.com/?status=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
} else if(sns == "k") {
fullUrl = "https://story.kakao.com/share?url=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
}
window.open(fullUrl, "", "width=600, height=500, menubar=no, toolbar=no, scrollbars=no");
}
</script> |
encodeURIComponent
웹을 통해서 데이터를 전송할 때 특정 문자들은 특수한 기능으로 사용된다.
예를들어, http://a.com?name=egoing&job=programmer에서
&job=programmer 중 '&'는 하나의 파라미터가 끝나고 다음 파라미터가 온다는 의미이다.
그런데 다음과 같이 job의 값에 &이 포함된다면 시스템은 job의 값을 제대로 인식 할 수 없게 된다.
http://a.com?name=egoing&job=programmer&blogger
이런 문제를 회피하기 위해서 다음과 같이 치환해 준다.
http://a.com?name=egoing&job=programmer%26bloogger
그럼 시스템에서는 %26을 &으로 해석하고 의도대로 해석 할 수 있게 된다.
이러한 처리를 이스케이핑(eascaping) 라고 부른다.
# 출력결과 - sns_share.php
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta property="og:title" content="<?=$_GET["title"]?>"/>
<meta property="og:image" content="<?=$_GET["img"]?>"/>
<meta property="og:type" content="travel"/>
<meta property="og:site_name" content="HUISTENBOSCH"/>
<meta property="og:description" content=""/>
<input type="hidden" id="name" value="<?=$_GET['name']?>"/>
<input type="hidden" id="title" value="<?=$_GET['title']?>"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script language="javascript">
jQuery(document).ready(function(){
var eventName = jQuery("#name").val();
var eventTitle = jQuery("#title").val();
var mobile = "";
var smartPhones = [
"iphone", "ipad", "lgtelecom", "windows ce", "blackberry", "skt", "mobile", "samsung", "nokia", "blackberry"
, "android", "android", "sony", "phone", "webos", "sonyerricsson", "opera mini", "opera mobi", "iemobile"
];
for(var num in smartPhones) {
if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[num]))) {
mobile = "http://m.wickedmiso.com/event.php";
}
}
var url = (mobile) ? mobile : "http://wickedmiso.com/events/";
var redirect =
"?eventName=" + eventName
+ "&eventTitle=" + eventTitle;
location.href = url + redirect;
});
</script>
</head>
<body>
</body>
</html> |
# 출력결과
