제가 원주스토리(http://wonjustory.com)에서 사용한 방법입니다. 비교적 간단합니다. 각 개발자 페이지에서 API URL을 제공해 주고 있어서 공유하고자 하는 URI만 매개변수로(GET) 넘겨주면 공유가 됩니다. 이 방법을 조금 정리했습니다.
설명은 그누보드(지음빌더4) 위주입니다.
우리가 내용을 공유하고자 할 때는 보통 view.skin.php에서 할 것입니다.
//– view.skin.php <span onclick=”share_sns(‘fb’)”>페북공유</span> <span onclick=”share_sns(‘tw’)”>트위터공유</span> ….. <script> function share_sns(sns){ var long_url = “<?=$board_skin_path?>/sns_share.php?bo_table=<?=$bo_table?>&wr_id=<?=$wr_id?>”; if(sns == “fb”) snsurl = long_url + “&sns=fb”; if(sns == “tw”) snsurl = long_url + “&sns=tw”; var newwin = window.open(snsurl, “sns”, “width=600, height=400, toolbar=0”); } </script>
버튼 3개를 마련합니다. 페북, 트위터, 카스입니다. 이 소스는 분석 할 게 없습니다. 버튼을 클릭하면 새창을 띄워 sns_share.php라는 파일을 불러오고 매개변수로 bo_table과 wr_id를 넘겨줍니다. 그 다음 공유 처리는 sns_share.php에서 하게 됩니다. view.skin.php에서 하면 복잡하고 URI를 넘겨 줄 때 GET의 길이 제한이나 URI encodding 때문에 의도치 않은 문제점들이 생길 수 있습니다.
이 방법은 sns에 공유 한 주소가 게시판에 직접 접근하는 게 아니라 sns_share.php에서 정보를 받아 해당 게시판으로 이동하게 됩니다. 즉, sns_share.php에서 공유를 하기도 하고 SNS에서 공유 된 주소를 sns_share.php에서 받아 해당하는 게시판으로 이동하게 됩니다. 이 과정에서는 bo_table과 wr_id만 서로 주고 받습니다.
//– sns_share.php <? include_once(“./_common.php”); extract($_GET); //– 공유할 기본 정보 불러오기 //– bo_table과 wr_id를 이용해 게시판 글을 읽어 옵니다. 제목과 내용을 추출 할 것입니다. $tablename = $g4[write_prefix] . $bo_table; $sql = “select * from $tablename where wr_id=’$wr_id'”; $rd = sql_fetch($sql); //– 썸네일 정보 //– 첨부파일 테이블에서 이미지가 있으면 불러옵니다. 지음빌더에서는 파일이 저장되는 위치에서 thumb/에 썸네일이 들어가게 됩니다. //– 첫번째 이미지 정보를 1개만 불러옵니다. $tableboard = $g4[board_file_table]; $sql = “select * from $tableboard where bo_table=’$bo_table’ and wr_id=’$wr_id’ order by bf_no asc limit 1″; $rdimg = sql_fetch($sql); //– 파일 타입이 0보다 크면 일단 이미지입니다. 데이터 저장 경로 뒤에 thumb/가 붙으면 썸네일입니다. //– 만약 원본 이미지를 SNS에 공유한다면 아마 트래픽을 감당하지 못할 것입니다. ㅡㅡ; if($rdimg[bf_type] > 0) { $thumb = $g4[url].”/data/file/”.$bo_table.”/thumb/”.$rdimg[bf_file]; } //– 제목과 내용에 줄바꿈 문자들을 제거합니다. $title = str_replace(array(“r”, “n”), “”, $rd[wr_subject]); $desc = cut_str(str_replace(array(“r”, “n”), “”, $rd[wr_content]), 200); ?> <!doctype html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <? //– Facebook 공유를 위한 메타 태그 //– 페이스북에 공유하기 위해서 이 태그들이 필요합니다. 없어도 되긴 하지만 내가 원하는 정보를 페이스북에 올리기 위해서는 이 태그를 이용해야 합니다. ?> <meta id=”fb_image” property=’og:image’ content='<?=$thumb?>’> <!– 공유할 이미지의 절대경로 –> <meta id=”fb_title” property=”og:title” content=”<?=$title?>”> <!– 공유 할 때 글 제목 –> <meta id=”fb_desc” property=”og:description” content=”<?=$desc?>”> <!– 공유할 내용 요약 –> <meta property=”og:site_name” content=”<?=$config[cf_title]?>”> <!– 사이트 이름 –> </head> <body> <? //– SNS에서 공유 된 링크를 클릭 했을 때 sns_share.php 파일로 접속하게 되는데 전달받은 bo_table, wr_id를 이용해 게시판 절대 경로를 구합니다. //– $sns 값이 없다면 SNS에서 링크를 클릭 한 것으로 간주하고 이 주소로 페이지를 이동하게 됩니다. $long_url = $g4[url] . “/bbs/board.php?bo_table=”.$bo_table.”&wr_id=”.$wr_id; //– 실제로 SNS에 링크할 주소입니다. sns_share.php를 공유하게 됩니다. sns_share.php가 허브 역할을 합니다. $sns_url = $g4[url] . $_SERVER[PHP_SELF] . “?bo_table=”.$bo_table.”&wr_id=”.$wr_id; if($sns == “fb”) { $api_url = “https://www.facebook.com/sharer/sharer.php?u=”. urlencode($sns_url); zm_gourl($api_url); //– 페이지를 이동하는 지음빌더 사용자 함수 exit; } if($sns == “tw”) { //$surl = naver_short_url(urlencode($long_url)); $txt = urlencode($desc); $api_url = “https://twitter.com/intent/tweet?text=”.urlencode($sns_url) . ” ” . $txt; zm_gourl($api_url); } //– $sns 값이 없으면 SNS에서 연결 된 것으로 간주하고 해당 페이지로 이동 if($sns == “”) { zm_gourl(“$long_url”); } ?> </body> </html>
여기까지는 PC 환경에서 공유하는 방법입니다. 모바일에서 방법은 같습니다. 다만 카카오스토리는 모바일에서만 가능합니다.
모바일에서는 <span onclick=”share_sns(‘cs’)”>카스공유</span> 이 버튼을 추가합니다.
자바스크립트에서도 if(sns == “cs”) snsurl = long_url + “&sns=cs”;를 추가합니다.
//– sns_share.php (모바일) </html> include_once(“./_common.php”); extract($_GET); //– 공유할 기본 정보 불러오기 $tablename = $g4[write_prefix] . $bo_table; $sql = “select * from $tablename where wr_id=’$wr_id'”; $rd = sql_fetch($sql); //– 썸네일 정보 $tableboard = $g4[board_file_table]; $sql = “select * from $tableboard where bo_table=’$bo_table’ and wr_id=’$wr_id’ order by bf_no asc limit 1″; $rdimg = sql_fetch($sql); if($rdimg[bf_type] > 0) { $thumb = $g4[url].”/data/file/”.$bo_table.”/thumb/”.$rdimg[bf_file]; } $title = str_replace(array(“r”, “n”), “”, $rd[wr_subject]); $desc = cut_str(str_replace(array(“r”, “n”), “”, $rd[wr_content]), 200); ?> <!doctype html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”initial-scale=1,minimum-scale=1, maximum-scale=1″> <? //– Facebook 공유를 위한 메타 태그 ?> <meta id=”fb_image” property=’og:image’ content='<?=$thumb?>’> <meta id=”fb_title” property=”og:title” content=”<?=$title?>”> <meta id=”fb_desc” property=”og:description” content=”<?=$desc?>”> <meta property=”og:site_name” content=”<?=$config[cf_title]?>”> <script src=”<?=$g4[path]?>/js/jquery-1.10.2.min.js”></script> <!– 카카오스토리 공유 라이브러리입니다. –> <script type=”text/javascript” src=”./kakao.link.js”></script> </head> <body> <? $long_url = $g4[url] . “/bbs/board.php?bo_table=”.$bo_table.”&wr_id=”.$wr_id; $sns_url = $g4[url] . $_SERVER[PHP_SELF] . “?bo_table=”.$bo_table.”&wr_id=”.$wr_id; ?> <!– 카카오스트로리를 공유하기 위한 함수. jquery의 ajax 함수와 비슷합니다. –> <script> function executeKakaoStoryLink() { kakao.link(“story”).send({ post : “<?=$sns_url?>”, //– 공유한 페이지 주소나 내용. 주소를 입력하게 되면 내용을 알아서 스크랩 합니다. appid : “<?=$_SERVER[SERVER_NAME]?>”, //– 사이트 주소 appver : “1.0”, //– 앱 버전. 사용자 임의 지정 appname : “원주스토리”, //– 앱 이름. 사용자 임의 지정 urlinfo : JSON.stringify({title:”<?=$title?>”, desc:”<?=$desc?>”, imageurl:[“<?=$thumb?>”], type:”article”}) }); } //– title : 제목, desc : 요약 내용, imageurl : 이미지 </script> <? if($sns == “fb”) { $api_url = “https://www.facebook.com/sharer/sharer.php?u=”. urlencode($sns_url); zm_gourl($api_url); exit; } if($sns == “tw”) { //$surl = naver_short_url(urlencode($long_url)); $txt = urlencode($desc); $api_url = “https://twitter.com/intent/tweet?text=”.urlencode($sns_url) . ” ” . $txt; zm_gourl($api_url); } ?> <? if($sns == “cs”) : ?> <script> $(function(){ executeKakaoStoryLink(); window.close(); });</script> <? endif; ?> <? //– $sns 값이 없으면 SNS에서 연결 된 것으로 간주하고 해당 페이지로 이동 if($sns == “”) { zm_gourl(“$long_url”); } ?> </body> </html>
페이스북에 한 번 공유를 하거나 공유를 시도하면 페이지에 대한 캐쉬를 만들어 놓는다. 그래서 내용을 변경해서 다시 적용을 시도해 보면 이전 내용이 공유 된다. https://developers.facebook.com/tools/debug/ 에 접속해서 공유하려는 페이지 주소를 입력하고 디버그를 시도하면 이전에 캐쉬를 삭제하고 새로 만든다. 또 공유 되는 내용을 미리 볼 수 있어서 공유 작업을 하기에 좋다.
카카오스토리의 개발자 소스와 예제는 http://www.kakao.com/services/api/story_link 에서 구할 수 있다.