카카오스토리로 공유하기 간단하게 코딩하기

사이트에 공유버튼을 달아야 하는 미션.

원래 Kakao Developers 사이트에서 기본 제공하는 간단한 js와 버튼 div를 가져와서 width 0시켜 안보이게 만든 뒤
커스텀해 만든 버튼을 click이벤트로 연결하려 했다.

예상시간: 30분이면 되겠지!
삽질시간: …

iphone사파리에서만 foce한 클릭이 먹질 않는것이다.
iphone safari jquery click검색하니 나와 같은 고생을 겪는 선지자들을 보고

  • cursor: pointer로 두면 jquery가 신기하게 먹는다
  • display: none을 풀어라
  • touchstart이벤트를 넣어라
  • a태그가 아니면 먹질 않는다
  • onclick=” “과 같이 빈 액션을 넣어라

등의 삽질을 해보았지만 왠지모르게 실패. 플러그인 만지기란…

파이님이 만드신 알파카코믹스는 도대체 어떻게 한거지 하고 봤더니 걍 href에 https://story.kakao.com/share?url=를 추가하셨다.

어디서 나온 주소냐고, 플러그인 쓰지 않아도 되냐고 여쭙니 본인도 플러그인으로 고통받다가 저 주소를 야매로 알아내셨다 하심.

jquery iphone click문제는 내 지친 마음이 좀 더 회복되고 다시 봐야겠다.

무튼 코드로 마무리

<div class="teaser-social-share">
        <a class="share-kakaostory waves-effect waves-light" href="#"><i class="icon-kakao_story"></i></a>
        <a class="share-fb waves-effect waves-light" href="#"><i class="icon-facebook"></i></a>
        <a class="share-twitter waves-effect waves-light" href="#"><i class="icon-twitter"></i></a>
        <!--<a id="kakaostory-share-button"></a>-->
    </div>
var Share = {
    clickShareBtn: function() {
        var size = 'width=626 height=436';
        $('.share-kakaostory').on('click', function () {
            window.open('https://story.kakao.com/share?url=https://store.pinkfong.com/event/teaser/', '_blank', size);
        });
        $('.share-fb').on('click', function () {
            window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A//store.pinkfong.com/event/teaser/', '_blank', size);
        });
        $('.share-twitter').on('click', function () {
            window.open('https://twitter.com/share?url=https://store.pinkfong.com/event/teaser/', '_blank', size);
        });
    }
}

$(function(){
    Share.clickShareBtn();
});

Published by

Yurim Jin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 맥주를 사랑하는 망고장스터

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s