로그인

검색

Extra Form
추천지수 7

라이믹스나 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에서 작은 아이콘 스타일의 공유에서도 카카오톡 공유를 사용할 수 있습니다.

 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
  • 벨로위키 2021.04.18 16:45
    덕분에 잘 설정 했습니다.
  • 벨로위키 2021.04.18 18:43
    똑같은 스킨에 똑같은 설정인데 왜 이 게시판만 카카오톡이 공유가 안되는지 잘 모르겠습니다.
    https://feedzone.club/mainevent
  • profile
    꿀팁관리소장 2021.04.18 18:47
    To.벨로위키

    PC에서 테스트 해보았는데 잘 되는데요.

    모바일에서도 잘 되네요.

  • 벨로위키 2021.04.18 19:00
    To.꿀팁관리소장
    그런가요? 저는 웹브라우져 캐시 삭제하고 해도 pc와 모바일 둘다 안되네요. 특이한 현상이네요.
  • profile
    꿀팁관리소장 2021.04.18 19:09
    To.벨로위키
    글쎄요. 저는 비로그인이고 로그인을 하셨다면 로그인 했을때 혹은 최고관리자였을때 등에 실행되는 다른 자료나 스크립트가 충돌이 날수 있는데 제가 확인할 수는 없는 영역이네요.
  • 벨로위키 2021.04.18 19:15
    To.꿀팁관리소장
    훔 혹시나 해서 비로그인 해봤는데 같은 현상입니다. 일단 콘솔에러는 이렇네요
    GET https://feedzone.club/widgets/rank_exp/skins/eond/css/default.css net::ERR_ABORTED 404
    1750:1022 Uncaught SyntaxError: Unexpected identifier
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    VM498:1 Uncaught ReferenceError: sendLink is not defined
    at <anonymous>:1:1
    (anonymous) @ VM498:1

    안되면 그냥 게시판 삭제하고 새롭게 생성해야겠습니다. 수많은 게시판중 이곳만 안되네요

    스케치북5 수정 버전과 라이믹스 버전중에 오늘 라이믹스 버전으로 모두 변경 했습니다.
    수정버전은 본문 상단 하단에 html 코드를 삽입 하게 백엔드에 수정 되어 있고
    본문 네이게이션이 작동하는 대신 카카오스크립트 키 넣는 곳이 없고
    라이믹스 버전은 본문 네비게이션이 작동을 안해서 이 부분을 수정해 보려고 read_nav 파일이랑 종일 만져도
    제 실력으로는 안되는군요. 그냥 네비와 본문 html 삽입 포기하고 카카오라도 살리기 위해
    이쪽으로 갈아탔습니다.
  • profile
    꿀팁관리소장 2021.04.18 19:34
    To.벨로위키

    반복된 질문을 하시는데 에러를 이해하려고 하시면 좋겠습니다. 저번에 말씀드렸듯이 저 에러는 해당 위젯의 CSS 파일이 없는데 불러와서 404 에러가 반환되고 있습니다. 해당파일을 업로드 해주시구요.

    sendLink is not defined 에러가 떴다면 카카오공유 스크립트 또는 링크코드에 문제가 있어 보이네요.

     

    마지막 게시글에서는 정상이나 그 이전 게시글에서 에러가 떠서 작동이 안되네요. 두 게시글 차이를 살펴봐야 겠네요.

  • profile
    꿀팁관리소장 2021.04.18 19:41
    To.벨로위키

    살펴보니까 게시글 제목에 태그를 넣으신게(색상) 문제를 일으키는 것 같습니다. 해결책은 제가 드리지 못하겠네요.

     

    제목에 색상강조를 없애신 후 결과를 보시고 

    그래도 문제가 있다면 #을 제거후 비교를 해보세요.

     

    그에 따라 태그가 문제라면 strip_tags() 함수로 해결이 될 수도 있어 보입니다.

  • profile
    꿀팁관리소장 2021.04.18 19:51
    To.벨로위키
    스크립트에서

    title: "{$oDocument->getTitle()}",

    위 부분을

    title: "{strip_tags($oDocument->getTitle())}",
    한번 바꿔보세요.
  • 벨로위키 2021.04.18 20:06
    To.꿀팁관리소장

    알려주신대로 하니 색상 변경 안해도 적용 되네요. 감사 합니다. 그리고 위에 위젯 문제는 디폴트css파일명으로 된걸 오류나는걸로 바꿔버렸더니 없어져서 신경 안썻는데 다른곳는 또 디폴트를 찾으면서 에러가나는군요. 파일 하나 복제해서 두파일명 모두 넣어서 해결했습니다. 

  • profile
    꿀팁관리소장 2021.04.18 20:12
    To.벨로위키
    css 파일은 원래 동봉된 파일을 사용해야 합니다. 내용이 바뀌게 하지는 않으셨을 거라 생각은 들지만 뭔가 이상하게 들리네요.
  • 벨로위키 2021.04.18 20:32 SECRET

    "비밀글입니다."

  • 벨로위키 2021.04.18 20:49
    To.꿀팁관리소장
    카카오맵 출력과 카카오톡 공유 스크립트를 함께 사용한 게시판에서는 아래 같은 오류가 뜹니다.
    A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.

    https://feedzone.club/board_MJxR97/6582
  • profile
    꿀팁관리소장 2021.04.18 20:51
    To.벨로위키
    신경 안쓰셔도 될 것 같네요. 카카오쪽 경보이고 오류를 일으키는 메시지도 아닙니다.
  • 벨로마노 2021.04.18 21:13
    To.꿀팁관리소장
    덕분에 여러 오류도 잡고 많이 배우기까지 했습니다. 라이믹스 꿀팁이 있어 라이믹스 입문자들이 정말 큰 도움이 될것 같네요. 감사 합니다.

라이믹스 팁(102)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views79 Votes0
    Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. 중복 글/댓글 방지 애드온

    Date2020.07.27 Category기능 Views132 Votes0
    Read More
  30. Read More
  31. Read More
  32. Read More
Board Pagination Prev 1 2 3 4 Next
/ 4