API로 SNS 페이스북, 트위터, 카카오스토리에 공유하기 소스

728x90

제가 원주스토리(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 에서 구할 수 있다.

728x90

저작자표시 비영리 변경금지

'프로그래밍 > PHP & HTML' 카테고리의 다른 글

php7, mysql8 이상에 그누보드5를 설치 하다가 syntax 에러를 만났다면? (password) (0)	2019.09.18
트위터 API 1.1를 이용한 트위터 검색과 API Key 발급 받기 (0)	2019.09.18
테이블 목록을 불러오는 mysql_list_tables를 사용하는 쿼리 (0)	2019.09.18

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

API로 SNS 페이스북, 트위터, 카카오스토리에 공유하기 소스

'프로그래밍 > PHP & HTML' 카테고리의 다른 글

티스토리툴바