라이믹스나 XE를 스케치북5 스킨을 사용하면 아마 카카오톡 공유버튼을 누르면 카톡창은 뜨지만 실제 공유를 진행해 보면 버전이 낮아 안된다는 메시지가 뜨게 될 것입니다. 이 창이 뜨지 않고 실제 공유가 된다면 최신 SDK에 대응이 된 스크립트를 사용하고 있는 것 입니다.
여기서 다룰 것 은 위 문제 를 포함한
1.카카오 링크 공유를 최신으로 변경하여 동작하게 하기
2.PC에서도 카카톡 공유 버튼을 노출하여 사용 가능하게 하기
위 두가지 정도 입니다.
1.카카오 링크 공유를 최신 스크립트로 적용하기
기존에 board.js 안에 카카오톡 링크 부분은 사용하지 못합니다. 이건 무시하게 됩니다.
스크립트를 스킨 파일에 넣을 것 입니다.
최신 스크립트 형식은
<script defer="">
window.addEventListener('DOMContentLoaded', function() {
Kakao.init('{$mi->kakao_key}');
});
function sendLink() {
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: "{strip_tags($oDocument->getTitle())}",
description: '{$oDocument->getSummary()}',
imageUrl: '{$oDocument->getThumbnail(750, 465, 'crop')}',
link: {
mobileWebUrl: '{$oDocument->getPermanentUrl()}',
webUrl: '{$oDocument->getPermanentUrl()}'
}
},
social: {
likeCount: {$oDocument->get('voted_count')},
commentCount: {$oDocument->getCommentCount()},
viewCount: {$oDocument->get('readed_count')}
},
buttons: [
{
title: '{$lang->cmd_view}',
link: {
mobileWebUrl: '{$oDocument->getPermanentUrl()}',
webUrl: '{$oDocument->getPermanentUrl()}'
}
}
]
});
}
</script>
Kakao.init('{$mi->kakao_key}'); 이부분은 게시판 설정에 카카오개발자사이트에 등록된 자바스크립트키를 가져오게 구성한 것입니다.
그냥 게시판 설정에 넣지 않으려면 Kakao.init('자바스크립트키'); 로 넣으셔도 됩니다.
위 코드는 _read.html 파일의 아래쪽에 넣어주세요. 공유 버튼 보다 아래쪽으로. 그냥 맨 아래 넣어주세요.
각 게시판에 카카오키가 입력되어 있다면 스크립트가 동작하게 하고 싶다면 위 코드를
<block cond="$mi->kakao_key">
코드를 이 안에
</block>
위와 같이 조건을 걸어 안에 넣어주세요.
그리고 _read.html 파일의 맨 상단에
<load target="//developers.kakao.com/sdk/js/kakao.min.js" cond="$mi->kakao_key" /> 를 넣어 줍니다.
각 게시판마다 카카오톡 공유 사용을 다르게 설정하고 싶다면 cond="$mi->kakao_key" 를 넣어주어서 게시판 설정에 자바스크립트 키가 있을때만 불러오도록 하시고 공유 스크립트에 키를 아예 넣었다면 cond="$mi->kakao_key" 을 빼 주세요.
이제 스크립트는 준비가 되었습니다. 기존의 카카오톡 공유버튼 링크 소스에
id="kakao-link-btn" 를 꼭 추가해 줘야 합니다. 그래야 공유 버튼을 누르면 위 스크립트가 동작하게 되어있습니다.
스케치북5 스킨에서는 공유버튼을 스킨 설정에 따라 스타일이 다르게 위치도 다르게 할 수 있습니다. 따라서 사용하는 공유버튼의 소스코드는 각자 다르니 찾아서 수정해야 합니다.
우선 모바일에서 사용되고 버튼이 큰 스타일이 적용되는 소스는 _reald.html 파일의 358 라인 정도에 보면
<div cond="$mi->to_sns=='3'" class="to_sns big" style="text-align:{$mi->to_sns_big}" data-url="{$sns_link}" data-permanenturl="{$oDocument->getPermanentUrl()}" data-title="{$sns_title}">
<a class="facebook bubble" href="#" data-type="facebook" title="To Facebook"><b class="ico_sns facebook">Facebook</b></a>
<a class="twitter bubble" href="#" data-type="twitter" title="To Twitter"><b class="ico_sns twitter">Twitter</b></a>
<!--@if(Mobile::isMobileCheckByAgent())-->
<a class="kakaostory" href="storylink://posting?post={$oDocument->getPermanentUrl()}&appid=m.kakao.com&appver=1.0&apiver=1.0&appname={$mi->title}"><b class="ico_sns kakaostory">KakaoStory</b></a>
<a class="band" href="bandapp://create/post?text={$sns_title}%0A{$sns_link}"><b class="ico_sns band">Band</b></a>
<a class="kakao" href="#" data-type="kakao"><b class="ico_sns kakao">Kakao</b></a>
<a class="line" href="line://msg/text/?{$sns_title}%0D%0A{$sns_link}"><b class="ico_sns line">Line</b></a>
<!--@else-->
<a class="kakaostory bubble" href="#" data-type="kakaostory" title="To KakaoStory"><b class="ico_sns kakaostory">KakaoStory</b></a>
<a class="band bubble" href="#" data-type="band" title="To Band"><b class="ico_sns band">Band</b></a>
<!--@end-->
</div>
위 굵게 되어 있는 부분이 기존의 카카오톡 공유 버튼 소스 입니다. 현재 모바일에서만 나오게 조건이 걸려있으니 혹시 PC에서도 동작하게 바꾸려고 하신다면 아예 저 조건 밖으로 빼서 PC에서도 보일 수 있도록 하면서 위에 설명한 id="kakao-link-btn" 를 추가해 주세요.
<div cond="$mi->to_sns=='3'" class="to_sns big" style="text-align:{$mi->to_sns_big}" data-url="{$sns_link}" data-permanenturl="{$oDocument->getPermanentUrl()}" data-title="{$sns_title}">
<a class="facebook bubble" href="#" data-type="facebook" title="To Facebook"><b class="ico_sns facebook">Facebook</b></a>
<a class="twitter bubble" href="#" data-type="twitter" title="To Twitter"><b class="ico_sns twitter">Twitter</b></a>
<a id="kakao-link-btn" class="kakao" href="javascript:sendLink()"><b class="ico_sns kakao">Kakao</b></a>
<!--@if(Mobile::isMobileCheckByAgent())-->
<a class="kakaostory" href="storylink://posting?post={$oDocument->getPermanentUrl()}&appid=m.kakao.com&appver=1.0&apiver=1.0&appname={$mi->title}"><b class="ico_sns kakaostory">KakaoStory</b></a>
<a class="band" href="bandapp://create/post?text={$sns_title}%0A{$sns_link}"><b class="ico_sns band">Band</b></a>
<a class="line" href="line://msg/text/?{$sns_title}%0D%0A{$sns_link}"><b class="ico_sns line">Line</b></a>
<!--@else-->
<a class="kakaostory bubble" href="#" data-type="kakaostory" title="To KakaoStory"><b class="ico_sns kakaostory">KakaoStory</b></a>
<a class="band bubble" href="#" data-type="band" title="To Band"><b class="ico_sns band">Band</b></a>
<!--@end-->
</div>
위와 같이 바꾸는데 data-type="kakao" 는 이제 필요없으니 뺐습니다.
이렇게 하면 공유버튼 큰 사이즈로 설정해서 사용한다면 모바일,PC 모두 공유가 이제 잘 될 겁니다.
공유버튼 작은 스타일로 사용하는 경우는 공유버튼 소스가 _reaad_sns.html 파일로 별도로 있습니다. 여기에는 아예 카카오톡 공유(카카오 링크)가 빠져 있습니다. 여기에 추가를 해줍니다.
<div class="rd_nav img_tx to_sns fl" data-url="{$sns_link}" data-permanenturl="{$oDocument->getPermanentUrl()}" data-title="{$sns_title}">
<a class="{$mi->to_sns_small}" href="#" data-type="facebook" title="To Facebook"><i class="ico_sns16 facebook"></i><strong> Facebook</strong></a>
<a class="{$mi->to_sns_small}" href="#" data-type="twitter" title="To Twitter"><i class="ico_sns16 twitter"></i><strong> Twitter</strong></a>
<a id="kakao-link-btn" class="{$mi->to_sns_small}" href="javascript:sendLink()" cond="$mi->kakao_key"><i class="ico_sns16 kakao"></i><strong> Kakao</strong></a>
<a class="{$mi->to_sns_small}" href="#" data-type="kakaostory" title="To KakaoStory"><i class="ico_sns16 kakaostory"></i><strong> KakaoStory</strong></a>
<a class="{$mi->to_sns_small}" href="#" data-type="band" title="To Band"><i class="ico_sns16 band"></i><strong> Band</strong></a>
</div>
cond="$mi->kakao_key" 는 게시판 설정에 자바스크립트키가 있을때 공유버튼이 나오도록 하기 위해 넣은거니 키를 스크립트에 직접 넣은 경우라면 cond="$mi->kakao_key" 를 빼주셔야 버튼이 노출이 됩니다.
이렇게 하고 게시판 설정에 카카오 자바스크립트 키를 넣으면 공유버튼이 생겨납니다. 그런데 아마 버튼이 다른게 나올겁니다. 원래 나오지 않던 버튼이라 css에 해당 버튼에 대한 내용이 없습니다.
board.css 파일에 58번 라인 즘에
.bd .ico_sns16.kakao{background-position:0 -80px} 를 추가해주세요.
아이콘의 높이가 잘 맞지 않으면 -80px 값을 조절하면 됩니다.
이렇게 하면 PC에서 작은 아이콘 스타일의 공유에서도 카카오톡 공유를 사용할 수 있습니다.
