사이트에 공유버튼을 달아야 하는 미션.
원래 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();
});
블로그 이사갔어요! https://milooy.github.io/ 