SNS 글보내기 공유기능

사이트의 컨텐츠를 공유해야하는 상황이다. 쇼핑몰 같은경우 상품view 페이지가 그 대상인데 공유기능 링크를 걸어야할 sns사이트가 한두군대가 아니다. 링크드인,인스타그램,트위터등 위의 공유아이콘에 없는곳 만해도 이렇다. 

이 sns쉐어 기능 링크작업을 하면서 알게되었는데 서비스마다 공유하는 방식이 조금씩 다르다. 카카오톡같은곳은 javascript api 가 필요하다. 핀터레스트는 get 요청에 파라미터로 제목,사진url,description을 던지고 그걸 가지고 scrap을해준다. 페이스북 같은경우는 url만던지면 페이스북쪽에서 크롤을 해서 scrap을 해준다. 한번 긁어간곳은 캐싱을 하니 꼭 공유디버거를 사용해야한다. 

어쨌든 페이스북의 OG태그가 일반적이긴한데 OG 태그없어도 어떤 서비스들은 해당 페이지의 컨텐츠를 잘 긁어간다. 문제는 OG태그를 올바르게 태깅을 했는데도 제대로 안가져가는 경우가 문제다. 사이트 제목만 긁어간다거나 이미지가 안박힌다거나 웹개발자들은 구글링이나 해당 서비스의 공유문서를 보면 단순링크라 금방적용이 될거라 예상했지만 예상은 빗나갔다. 실제 페이스북의 공유기능을 클릭해보면 도메인하나 달랑들어가 박힌다. (나역쉬 쉽게 적용하리라 예상했다.)  

삽질의 고난은 그렇게 시작되었다.

하루종일 페이스북 오픈그래프 개체 디버거와 씨름했다.  공유 디버거 

수십번 소스를 봐도 OG태그는 제대로 박혔는데 페이스북은 Fetching 해가지 못한다. 페이스북 개체디버거 하단에 Scraped URL 을 클릭해보면  페이스북이 사이트 컨텐츠를 어떻게 가져가 보고있는지 정확하게 알 수 있다. 클릭해보니 html 출력물을 하나도 못가져간다. 도대체왜? 

웹서버 로그도 확인해보았다. 페이스북 크롤러가 잘 들어와 가져간다. 200 에 페이스북 요청페이지가 로그에 기록되어있다. 웹서버(아파치)는 잘 응답했다는것이다. 그런데 도대체? 안되지?

해당페이지 인코딩도 바꿔보았다. 

해당 페이지 보안접속 https 로도 요청해보았다.

프로그램 코드도 여기저기 수정해보았다.  여전히 안된다. 

프로그램 모두 걷어내고 정적인 html로 만들어보았다. 어라? 그때는 제대로 가져간다. 왜지?

어찌저찌해서 원인은 이랬다.  쇼핑몰 사이트에서 템플릿을 사용하는데 제일 앞단에 버퍼를 사용하는 ob_start()함수에 있다는것을 알았다. 프로그램을 거친후 템플릿이 만들어낸 html 경우 페이스북이 제대로 크롤하지못한다는 것을 알았다. ob_start()함수를 죽이니 잘 가져간다. 

기존에 제대로 동작하지않았던 네이버 블로그 공유,라인 공유도 모두 제대로 되었다.  특정 크기의 버퍼 이상의 응답이 필요할땐 페이스북 크롤이 제대로 안되는것 같다. 서버설정이나 템플릿 엔진 설정 문제니 예민하면서도 찾기 어려운 부분이라 생각된다. 하여튼 원인은 찾았고 scrap 기능은 정상작동되니  원 따봉~

중요한것은 사이트 고객중에 이 기능을 이용해 자신의 타임라인에 우리의 제품 컨텐츠를 공유하는 사람은 얼마나 될까이다. 한다면 왜 공유를 할까? 안 한다면 왜 공유를 안할까?  공유기능이용은 많지않으리라 예상하지만 내가 통찰의 신 스티브 잡스도아니고 예측은 예측일 뿐이니 애널리틱스 이벤트는 걸어놔야겠다. 페이지뷰 대비 얼마나 클릭해 이용하는지 궁금하다. 

기록차원에서 SNS별 공유요청하는 URL형식 을 남겨보면 아래와 같다.  넘길url은 자신의 사이트 컨텐츠주소이고  자바스크립트 encodeURIComponent() 함수를 통해 인코딩해서 넘겨야 한다.

조금 다른유형은 카톡인데 카톡은 카톡개발자사이트로가 api키를 받고 제공하는 script를 페이지에 링크한다음 아래와 같은 코드를 통해 클릭이벤트에 실행시켜주면 된다.  url,goodname,sns_br,media 이런변수는 넘길때 사용하려고 임의로 만든 변수명들이니 url 형식만 참고하면된다. 

페이스북 http://www.facebook.com/sharer/sharer.php?u=" + url

구글플러스 https://plus.google.com/u/0/share?url=" + url;

카스 https://story.kakao.com/share?url=" + url;	

라인 http://line.me/R/msg/text/?"+title+sns_br+url;

핀터레스트 https://www.pinterest.com/pin/create/button/?url=" + encodeURIComponent(url)+"&description=" + description+"&media="+media ;

네이버블로그 http://blog.naver.com/openapi/share?title="+encodeURIComponent(title)+"&url=" + encodeURIComponent(url);

카카오톡 //  JavaScript 키를 설정해 주세요.
    Kakao.init('발급받은API키');
    // 카카오 로그인 버튼을 생성합니다.
     Kakao.Link.createTalkLinkButton({
      container: '#kakaotalk',
      label: '사이트 소개 '+goodsname+"\n"+linkurl,
      image: {
        src: imageurl,
        width: '300',
        height: '200'
      },
      webButton: {
        text: '1등 쇼핑몰',
        url: 'http://bloglab.xyz' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
      }
    });