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

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

원래 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();
});