페이스북 링크 공유하기

WEB/JS

페이스북 링크 공유하기

나나나나나나나ㅏ나난ㄴ나ㅏ나나 2020. 6. 25. 11:02

728x90

저번에 했던 카카오톡 링크 공유하기에 이어서 페이스북 링크 공유를 해보려구해요🤸🏻

카카오에 비해서 페이스북 도큐먼트가 별로 친절하지않았던 기억이 있어서 걱정을 많이했는데 생각보다 간단한거 같아서 놀랬어요

방법 1. window.open으로 공유하기

#코드

    function shareFacebook(){
        window.open('http://www.facebook.com/sharer.php?u=www.naver.com');
    }

잉게 끝이라는거 🤭 솔직히 말이 안된다고 생각했느데 진짜 이게 끝이예요

#추가

저렇게만 넣으면 진짜 끝이긴한데 이쁘게 들어가지않아요

요로케 네이버처럼 이쁘게 넣구싶은데 현실은 이렇단 말이죠

네이버처럼 이뿌게 넣구싶을땐 저렇게 하면됩니다!!

메타태그에 추가해주기~.~

<meta property="og: title" content="제목">
<meta property="og: url" content="url">
<meta property="og: description" content="내용">
<meta property="og: image" content="넣고싶은 이미지 경로">

페이스북 공식 페이지 https://developers.facebook.com/docs/plugins/share-button?locale=ko_KR

방법 2. 페이스북 공유 api 사용하기 (2020/06/29 추가🙄)

위에 window.open 방식은 간단하고 쉽지만 잘 공유가 됬는지 안됬는지를 확인할 수가없어요ㅜㅜ callback을 사용하려면 페이스북에서 제공하는 api를 사용하면 됩니다!

#코드

    window.fbAsyncInit = function () {
        FB.init({
            appId: 'YOUR-APP-KEY',
            autoLogAppEvents: true,
            xfbml: true,
            version: 'YOUR-APP-VERSION' 	//ex> v7.0
        });
    };

    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function shareFacebook() {


        let currentUrl = window.document.location.href;

        FB.ui({
                method: 'share',
                href: currentUrl
            }, function (response) {
                if (response && !response.error_code) {
                    alert('공유 완료');
                } else {
                    alert('공유 실패');
                }
            }
        );

    }

페이스북에서 제공하는 api는 이거 말고 redirect uri 사용하는 방법도 있는데 이 친구는 다음에 또 쓸일 있으면 그때 다시 포스팅 하도록 할게용 이거 할때 간단한 오류때문에 삽질을 너무 많이 해버려서 지쳐버려써요ㅠㅠㅠ 😵 그래두 아래 사이트에 가면 조금 친절하게 설명 잘해놨으니까 참고하면 될거예요🤗

이번에 고생했으니까 다음엔 고생안하겠죠?ㅜㅜㅜ 그럼 다들 안뇽👋

페이스북 공식 사이트 https://developers.facebook.com/docs/sharing/reference/share-dialog