TIL_0607_sns공유하기기능

트위터 공유하기 구현 성공

하고나면 별거아니였지만 찾아 헤맸던 결정적인 oprion은 'card'속성이다

리액트로 sns 공유하기 기능을 구현하다보니 서버사이드렌더 관련된 문제로인하여
mata의 data를 토대로 공유하기 컨텐츠를 만드는 현재의 개발 방식엔 문제가 생겼다.

1. 그래서 시도한 방법 하나

-> 새로운 페이지를 따로 생성하여 해당 페이지의 meta값을 동적을 받아와 실행시키도록 진행했다.

window.open('http://www.facebook.com/sharer/sharer.php?u=' + url, 'facebook', 'scrollbars=no, width=500, height=5000');

공유될 sns페이지가 열리되 들어갈 데이터는 새로운 url의 meta값이 가져와진다.
이때 url은 이런식으로 만들었다.

`https://원하는 페이지 주소 지정/share/facebook?title=${encodeURIComponent(title)}&img=${encodeURIComponent(img)}&card=summary_large_image&desc=${encodeURIComponent(desc)}&url=${encodeURIComponent(typeTestUrl)}`

2. 그러나 다시 만난 문제로 공유되는 url이 너무 길어서 트위터의경우 url이 필수로 보여지다보니

너무나도 긴... url이 있는 그대로 보여지는 것이다....그래서 시도한 방법 하나
-> api로 필요한 데이터를 보내면 해당 url을 똑같이 생성하되 shortURL로 받아서 보여줄 수 있도록 진행하였다.
-> 보안상의 이유로 코드를 조금 수정,생략했지만 대략 이런식으로 진행했다.shortURL은 변수로 사용해도되고 그대로 사용해도된다.

if(snsShare === facebook){
    window.open('http://www.facebook.com/sharer/sharer.php?u=' + shortURL, 'facebook', 'scrollbars=no, width=500, height=5000');
    } else if(snsShare === twitter){            
            window.open('https://twitter.com/intent/tweet?url=' + shortURL, 'twitter', 'scrollbars=no, width=500, height=5000');
  }

그러나 또 새로운 문제가 생겼다.

4. 공유된 페이지에 img값이 보여지지 않는다거나, url은 보여지는데 공유할 때 일반적으로 보여주는 템플릿이 안나오는 현상이 발생했다.

트위터는 meta에서 card라는 옵션이 있는데 해당 옵션값이 string으로 해놓고는 에러도 안나오니 한참을 헤맸었다..... card도 동적으로 porps받아서 사용하되 card='summary_large_image'이렇게 값을 고정값으로 넣어주었더니 그 뒤부터는 정상적으로 탬플릿에 필요한 데이터가 들어가있는 상태로 보여졌다.

어찌저찌 공유하기 기능 구현 성공..!!