헤더 아이콘 SNS공유하기

1. FaceBook , Twitter 공유하기

 

미리 공유했을때 어떻게 공유가 되고 누락된 정보는 없는지 확인해볼 수 있다. 

https://developers.facebook.com/tools/debug

공유 디버거 - Facebook for Developers

https://cards-dev.twitter.com/validator

트위터에 로그인

 

아이콘 공유를 사용하기 위한 메타태그를 사전에 적용 해주자.

<!-- Facebook meta tags -->
    <meta property="og:type" content="article" />
    <meta property="og:title" content="반응형 사이트 만들기(title)" />
    <meta property="og:url" content="http://richclub8.dothome.co.kr/responsive/html5/index.html" />
    <meta property="og:image" content="http://richclub8.dothome.co.kr/assets/ico/icon.png" />
    <meta property="og:site_name" content="반응형 사이트 만들기(site_name)" />
    <meta property="og:description" content="반응형 사이트 따라하기(description)" />

    <!-- twitter meta tags -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@webstoryboy" />
    <meta name="twitter:title" content="반응형 사이트 만들기(title)" />
    <meta name="twitter:description" content="반응형 사이트 만들기(description)." />
    <meta property="twitter:image" content="http://richclub8.dothome.co.kr/assets/ico/icon.png" />

 

SNS공유하기 동작원리에 대해 알고 넘어가자.

    //http://www.facebook.com/sharer.php?u={페이지 제목}&t={페이지링크}
        //http://twitter.com/intent/tweet?text={페이지 제목}&url={페이지링크}
        //https://share.naver.com/web/shareView.nhn?url={페이지링크}&title={페이지 제목}
        //https://plus.google.com/share?url={페이지링크}&t={페이지 제목}

//sns 공유하기
        $(".facebook").click(function(e){
            e.preventDefault();
            window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); 
        });
        $(".twitter").click(function(e){
            e.preventDefault();
            window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600');
        });

 

 

* 적용 모습