서론.
우리 사이트 내 다음 5가지의 공유 기능이 붙어야 했다.
- 카카오톡
- 카카오스토리
- 페이스북
- 트위터
- 네이버
모든 기능은 각 api의 개발 문서를 참고해서 스크립트만으로 쉽게 만들 수 있다.
쉽게 만들 수 있지만, (항상 그렇듯이) 내가 하려던 것이 되지 않아 애를 먹었다.
그거슨 바로 5. 네이버 공유하기 기능.
네이버 공유하기 기능에 대한 개발 문서는 다음에서 찾아볼 수 있다.
https://developers.naver.com/docs/share/navershare
첫번째 당황. 하란대로 했는데요..?
넘나 간단하고 명료한 예시에서는 다음과 같이 하면 된다고 하는데... 8ㅅ8 거짓부렁이다.
인코딩 : UTF-8 요청방식 : GET방식 http://share.naver.com/web/shareView.nhn?url=인코딩한URL값&title=인코딩한title값
| # | 파라미터 | 값 | 설명 |
|---|---|---|---|
| 1 | url | 문자열 | 인코딩한 공유할 웹 URL |
| 2 | title | 문자열 (optional) | 인코딩한 제목 문자열 |
음... title이 optional이라고 되어있는데, title을 넣어주지 않으면
"url 또는 title 정보가 없습니다." 라는 alert이 뜨면서 안된다.
url과 title모두 인코딩해서 넘겨주어야 에러가 나지 않는다 :)
스크립트로는 다음과 같이 작성해주면 된다.
<button type='button' id='naver_share'>네이버 공유 버튼</button>
<script>
$("#naver_share").click(function(e) {
var share_url = '공유할 url주소';
var title = '포스팅/글의 제목';
var url = 'http://share.naver.com/web/shareView.nhn?url='+encodeURIComponent(share_url)+'&title='+encodeURIComponent(title);
window.open(url);
});
</script>
두번째 애먹음. 썸네일 왜 그래요.. url.. 왜 나한테 그래요...
우리사이트 내에서 공유할 주소에는 각 사용자의 추천코드가 함께 붙어있다. 즉, 공유된 블로그/카페의 포스팅을 타고 들어오면, 추천코드가 함께 붙어있어야 하는데....
네이버 공유하기 api로 포스팅 된 것에는 썸네일과 링크가 마음대로 붙어버렸다.
이를 테면, 내가 공유하려던 url이
http://prosaist0131.tistory.com/8 이라면,
링크가 자꾸 http://prosaist0131.tistory.com으로만 붙어버렸다. 썸네일도 마음대로 되지 않았다.
애를 먹다가, 네이버 개발자 포럼을 확인하다 다음의 질문 글을 발견하였다.
http://forum.developers.naver.com/t/topic/1133
글을 읽어보니, 네이버는 http://ogcrawler.blog.naver.com/crawler.json 를 통해서, 링크의 정보를 가지고 오는 것 같다는 거였다.
해당 crawler.json에 내가 공유하려던 url을 확인해보았다.
썸네일과 링크가 내가 공유하려는 페이지의 메타 태그에 있는 것으로 연결이 되고 있었다.
그래서 다음과 같이 간단히(?) 해결했다.
내가 공유하려고 했던 페이지 url을 메타태그로 가진 페이지를 만들어서 그 페이지를 공유하도록 했다.
예를 들면 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 이름</title>
<!-- meta info -->
<meta name="keywords" content="키워드들">
<meta name="description" content="설명">
<meta property="og:title" content="페이지제목 "/>
<meta property="og:image" content="원래 공유하려고 했던 썸네일 이미지"/>
<meta property="og:url" content="원래 공유하려고 했던 페이지 URL"/>
<meta property="og:description" content="구체설명"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta charset="utf-8">
(생략).
해결~ 끄읏...
'개발개발 > PHP' 카테고리의 다른 글
| memcached increment always return false codeigniter (0) | 2018.07.19 |
|---|---|
| 클린코드 PHP를 번역해보았다 - fork부터 PR까지 (5) | 2018.02.21 |
| 메일건 트랙킹 (0) | 2016.12.08 |
| 암호화한 코드 링크 유의사항 (0) | 2016.10.28 |