페이스북 공유 API 적용

페이스북에서 제공해주는 공유 API 를 활용해보자.

페이스북 개발자 센터 : https://developers.facebook.com/docs/sharing/reference/share-dialog

 

적용 화면

짜잔, 이렇게 구현된다.

 

---

* 사용방법 *

1. html 상단에 페이스북 공유를 위한 CDN 선언

<!-- 페이스북 공유 -->
<script>(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#xfbml=1&version=v3.0&appId=APPKEY";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

2. html 내 body 안에 페이스북 아이콘 표시문

<img class="iconDetail" id="facebookShare" src="/images/board/share/facebook.png">

3. html 내 head 안에 페이스북 공유기능을 위한 javascript 문

$("#facebookShare").on("click", function(){
    FB.ui({
        method        : 'share_open_graph',
        action_type: 'og.shares',
        action_properties: JSON.stringify({
            object: {
                'og:url': 'http://localhost:8080/board/getBoard?boardNo='+$("#boardNo").val(),
                'og:title': $("#boardTitle").text(),
                'og:description': $("#boardContent").text(),
                'og:image': (이미지주소),
            }
        })
    });
})

 

---

* 참고 *

1) 상단의 사용방법은 작성자가 별도의 서버 없이 localhost 에서 작업한 점을 참고하여 활용

2) localhost 라서 그런지 모르겠는데, 공유시 보여지는 항목이 내 마음대로 설정이 쉽지 않았다.

method 를 feed 로도 해보고, share 로도 해봤는데 그나마 내 마음대로 설정할 수 있던건 share_open_graph 였다.

그리고 html 내 og 태그들을 썼음에도 페이스북 디버거에서 걸리지도 않고 제대로 공유가 안되어 애먹었다 ㅠ

그래도 저렇게 하면 title 은 먹히더라 ... ( description 은 안먹히는데 일단 씀..)

 

* facebook share api 사용하다 만난 error

1) 페이스북 개발자센터에 나오는 데모예제 그대로 복사해서 프로젝트에 적용을 시켰는데

Sorry, something went wrong. We're working on getting this fixed as soon as we can.

라는 오류가 떴었다. 인터넷 찾아보니 특수한 경우에만 발생하는 에러로 예전부터 현재까지 간혹 발생하며 페이스북에서 조치를 취해줘야한다는데,

뭐.. 당장에 해결해줄 문제도 아닌 것 같아서 방치해두려고 했는데, 계속 수정하고 시도해보니 방법이 조금 다른 것 같았다.

(개인적인 의견이지만, 글로벌기업치곤 페이스북 api 페이지가 너무 설명이 부족한 느낌이다 ㅠ)

 

2) 또 테스트하다 아래 오류를 만났는데, 이건 페이스북에 link 나 href 시 주소를 localhost 로 보내고 있기 때문이었다.

죄송합니다. 이 기능은 현재 이용할 수 없습니다.: 이 요청을 처리하는 동안 오류가 발생했습니다. 나중에 다시 시도해 주세요.

facebook 는 유동IP 가 먹히는 걸 깜빡했다. 그래서 192.168.0.43 과 같은 유동 ip를 적으니 오류는 안났다.