카카오채널 추가방법 문의

JavaScript
#1

지금 사용하는 사이트 제휴사는 카페 24입니다

카카 채널추가 아이콘추가를 기존 top/nottom 버튼이 있는 css와 html,js에 넣으면 되는거 같은데 아무리 해봐도 잘 안되는거같아서 문의 드립니다.

*현재 html은 이렇게 되어있습니다 아래 *있는게 작동이 안되는거같아 우선 임의로 넣어 둔 상태입니다.

< div id=“goBtn” class=“back-top”>
< a href="#none" class=“btn up fade”>
< a href="#none" class=“btn down fade”>
< a href=“http://pf.kakao.com/_gtSkb” class=“btn kakao fade”>
< /div>
이상하게 위 html만 안떠서 띄어쓰기 넣어서 기재합니다

*  <div id="kakao-talk-channel-add-button"
         data-channel-public-id="_bJKxoxb"
         data-size="large"
         data-support-multiple-densities="true">
    </div>

*현재 css입니다

.back-top {position:fixed; right:5%; bottom:5%; cursor:pointer; z-index:999; display:none;}

#goBtn .btn {display:block; width:40px; height:40px; background:url(’/web/upload/goodymall/kr/layout/scroll.png’) 0 0;}
#goBtn .up {display:block; background:url(’/web/upload/goodymall/kr/layout/scroll.png’) 0 0; margin-bottom:3px;}
#goBtn .down {display:block; background:url(’/web/upload/goodymall/kr/layout/scroll.png’) 0 -40px;}
#goBtn .btn:hover {opacity:0.5;}

#goBtn .kakao {display:block;background:url(’/web/upload/goodymall/kr/layout/kakao.png’) 0 0; margin-bottom:3px;}

현재 js입니다
/ 스크롤시 나타나는 TOP버튼 */

$(document).ready(function(){
  $(window).scroll(function () {
   if ($(this).scrollTop() > 10) { 
        $('.back-top').fadeIn();
   } else {
       $('.back-top').fadeOut();
   }
  });

  $('.back-top').click(function () {
   $('body,html').animate({
        scrollTop: 0
   }, 200);
        return false;
  });
});

$(document).ready(function(){
var top_btn = $("#goBtn").offset().top;
$(window).scroll(function(){
if($(window).scrollTop() > top_btn+400) {
$(’#goBtn’).addClass(‘btnFixed’);
}

});

$(".btn.up").click(function(){
    return $("html, body").animate({scrollTop:0},1200,"easeInOutExpo"),!1});

$(".btn.down").click(function(){
	return $("html, body").animate({scrollTop:$(document).height()},1200,"easeInOutExpo"),!1});

});

$window.kakaoAsyncInit = function()
{
Kakao.Channel.createAddChannelButton({
container: ‘#kakao’});
};

뭐가 문제 인지 모르겠습니다…

#2

안녕하세요.

html에 사용한 ID값과 스크립트에 설정한 ID값이 다릅니다.

<div id="kakao-talk-channel-add-button" ... />

...

Kakao.Channel.createAddChannelButton({
    container: '#kakao'  // <---- "#kakao-talk-channel-add-button"
});

확인할 수 있는 URL 제공 부탁드립니다.

#3

그부분은 적용 안되고있는 상태입니다

< !----> 로 묶어놨어요

#4

확인할 수 있는 URL 제공 가능하실까요?

#5

앗 넵
http://mrandmrsfragrance.kr/

#6

주석처리된 코드를 찾지 못하였는데요 위 주소가 맞으실까요?

#7

넵 맞습니다 푸터 제일 아래부분에 기재되어있습니다
1

#8

Kakao SDK는 로드하고 있지 않은 것으로 보입니다.
아래 도구를 이용하여 반환되는 스크립트를 적용해 보시겠어요?

Kakao Developers - 카카오톡 채널 추가하기

#9

1
2

적용했는데도 뜨지 않습니다

#10

image

최하단에 표시되어 있는듯 합니다.
css 조정하시면 될 것 같습니다.

#11

1

픽스 하고 위치 조정했는데도 아예 먹지 않는 이유가 무엇일까요?

2

#12

css 에 class selector로 정의 되어 있는데 id로 찾아야 하지 않을까요?

#kakao-talk-channel-add-button { position: fixed; ... }

#13

너무 어이없는 실수를 했었네욥…; 감사합니다

근데 만약 이미지를 동그란 말풍선 모양 카카오톡 아이콘으로 변경하고 싶을때는 어떻게 해야할까요?

#14

동그란 말풍선 이미지는 직접 작성 하셔야 할 것 같습니다.

아래 사이트에서 psd파일을 다운받아 심볼을 사용할 수 있습니다.

디자인 가이드 | Kakao Developers 문서 - 카카오 로그인 버튼 리소스 다운로드

이 후, 작성된 이미지를 사용시 직접 이벤트 바인딩을 하시면 됩니다.

예)

window.kakaoAsyncInit = function ()  ... <- 제거

<div id="kakao-talk-channel-add-button">
    <img src="image path..." >
</div>

$("#kakao-add-channel-button").click(function() {
    Kakao.Channel.addChannel({ channelPublicId: 'YOUR ID' })
})
#15

0002
노란박스 부분을 지우고 빨간박스 를 추가 후 연결될 카카오톡 아이디를 입력하면 되는걸까요?

0003

html수정시 노란박스 부분을 지우고 말씀해주신 부분을 추가하는 걸까요?

#16

안녕하세요.

불필요한 코드임으로 제거 하고 싶으시면 노란 박스의 내용은 지우셔도 괜찮습니다.
(노란 박스의 내용은 안지우셔도 아무 영향 없습니다.)

빨간 박스에 제가 점을 하다 더 찍어뒀는데요 그건 제거하고 채널ID를 입력하시면 됩니다.

$("#kakao-add-channel-button").click(function() {
    Kakao.Channel.addChannel({ channelPublicId: 'YOUR ID' })
})