ㆍ디벨로퍼스 앱ID : 818635
ㆍ사용 호스팅 : 카페24
ㆍ구현방법 : 퀵버튼 형식으로 공유하기 버튼 삽입하여 클릭 시 팝업 형태로 SNS 및 링크를 공유할 수 있도록 지정
ㆍ오류_01 :
‘카카오톡’ 공유 시 해당 페이지(상품)링크로 이동 되지 않고 홈 메인 페이지로 연결 됨
또한 상품 og태그들이 전혀 불러와 지지 못함. {$name|striptag} <---- 변수 그대로 노출. (상품명, 섬네일 등)
ㆍ오류_02 : ‘페이스북’ 공유 시,
Sorry, something went wrong. We’re working on getting this fixed as soon as we can.
오류 페이지.
ㆍ오류_03 : ‘트위터’ 공유 시,
또한 상품 og태그들이 전혀 불러와 지지 못함.
이하 카페24 소스코드 입니다.
<!-- 공유하기 -->
<!-- 버튼 -->
<button class="trigger"><img src="/web/2023_PCARMALL/icon_share.png" title="상품공유하기" loading="lazy" ez-prevent="img"></button>
<!-- //버튼 -->
<!-- 팝업 레이어 -->
<!--@css(/2023_pcarmall/css/right_quick.css)-->
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<div class="snsLink {$sns_display|display}">
<div>
<li><a id="kakao-link-btn" href="javascript:send_kakao_talk_url()"><img src="/web/2023_PCARMALL/btn_kakao.png" title="카카오톡으로 공유하기" loading="lazy" ez-prevent="img"></a></li>
<li><a href onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="/web/2023_PCARMALL/naver.png" title="네이버로 공유하기" class="sharebtn_custom" loading="lazy" ez-prevent="img"></a></li>
<!--<li><a href onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="카카오스토리이미지경로" title="카카오스토리로 공유하기" class="sharebtn_custom" loading="lazy" ez-prevent="img"></a></li>-->
<li><a href="http://www.facebook.com/sharer.php?u=[:PRODUCT_PAGE_URL:]&send=false&layout=button_count&width=100&show_faces=true&action=like&colorscheme=light&font&height=21&t=[:PRODUCT_NAME:] " target="_blank"><img src="/web/2023_PCARMALL/detail_fb.png" title="페이스북으로 공유하기" border="0" width="21" height="21" loading="lazy" ez-prevent="img"></a></li>
<li><a href="http://twitter.com/share" data-count="horizontal" target="_blank"><img src="/web/upload/97918366359dda67eb90fd.gif" border="0" width="21" height="21" title="트위터로 공유하기" loading="lazy" ez-prevent="img"></a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
</div>
</div>
<div class="snsli">
<input type="text" id="ShareUrl">
<span class="btn-type1"><button onclick="javascript:CopyUrlToClipboard()">
<img src="/web/2023_PCARMALL/icon_URL.png" title="URL복사" loading="lazy" ez-prevent="img"></button></span>
</div>
</div>
</div>
<!-- //팝업 레이어 -->
<script>
function send_kakao_talk_url() { try { if (Kakao) { Kakao.init("77b6b4ffd83b08deb52b4a9f23334e46"); } }
catch(e) {}; Kakao.Link.sendDefault
({ objectType : "feed", content : { title : "{$name|striptag}", imageUrl : "http:{$small_img}",
imageWidth : 420, imageHeight : 300,
link : { mobileWebUrl : "https://pcarmall.com/product/detail.html?product_no={$product_no}",
webUrl : "https://pcarmall.com/product/detail.html?product_no={$product_no}" } },
buttonTitle : "상품 보기", }); }
function CopyUrlToClipboard()
{
var obShareUrl = document.getElementById("ShareUrl");
obShareUrl.value = window.document.location.href;
obShareUrl.select();
document.execCommand("copy");
obShareUrl.blur();
alert("상품 링크가 복사되었습니다. Ctrl+V (붙여넣기)");
}
</script>
<script type="text/javascript" async>
var url_default_ks = "https://story.kakao.com/share?url=";
var url_default_naver = "http://share.naver.com/web/shareView.nhn?url=";
var title_default_naver = "&title=";
var url_this_page = location.href;
var title_this_page = document.title;
var url_combine_ks = url_default_ks + url_this_page;
var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page);
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
var cancelButton = document.querySelector("#cancel");
//console.log(modal);
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
cancel.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<!-- //공유하기 -->
<!-- 맨위로 --><div><a href="#none" onclick="$('html,body').animate({scrollTop:0},'slow')"><img src="/web/2023_PCARMALL/r_quick_top.svg" loading="lazy" ez-prevent="img"></a></div><!-- //맨위로 -->
<!-- 맨아래로 --><div><a href="#none" onclick="$('html,body').animate({scrollTop:$(document).height()},'slow');"><img src="/web/2023_PCARMALL/r_quick_bottom.svg" loading="lazy" ez-prevent="img"></a></div><!-- //맨아래로 -->
도무지 풀리지가 않네요… ㅠㅠ
도와주세요;;;;;