배워서남준다

사이트에 SNS 공유 버튼 등록방법

Study4U, 2019-03-05 19:36:17

조회 수
220
추천 수
0

소셜 미디어 단톡방등에 게시글을 공유할때 유용하게 사용되는 SNS 공유버튼에 대한 자료를 기록으로 남긴다.


XE 기본게시판인 XEDITION 스킨을 예로 들어 설명한다.


[## 카카오 링크 ##]


문서 열람 파일(_read.html)에 아래 구문을 등록한다.

스타일쉬트의 버튼 이미지는 첨부파일에서 적당하것 골라서 사용한다.


<load target="//developers.kakao.com/sdk/js/kakao.min.js" />

{@

$sns_link=$oDocument->getPermanentUrl().'?l='.$lang_type;

$sns_title=urlencode($oDocument->getTitle());

}

<style type="text/css">

.snslink {text-align:center;}

.snslink li {display:inline;vertical-align:top;}

.snslink li> .ico_sns {display:inline-block;overflow:hidden;width:16px;height:16px;font-size:0;line-height:0;vertical-align:top;text-indent:-100px;transition:all .3s;*text-indent:0;}

.snslink li> .ico_sns{width:32px;height:32px;margin:2px;background-image:url('./modules/board/skins/xedition/sns.png');opacity:.9}

.snslink li> .ico_sns:hover{opacity:1}

.snslink li> .ico_sns.facebook{background-position:0 -32px}

.snslink li> .ico_sns.google{background-position:0 -64px}

.snslink li> .ico_sns.pinterest{background-position:0 -96px}

.snslink li> .ico_sns.naverline{background-position:0 -128px}

.snslink li> .ico_sns.kakaotalk{background-position:0 -160px}

.snslink li> .ico_sns.band{background-position:0 -192px}

</style>

<ul class="snslink">

<li><a id="kakao-link-btn" href="#" class="ico_sns kakaotalk">Kakao</a></li>

</div>


카카오 개발자 사이트(https://developers.kakao.com/docs/js/kakaotalklink) 에 회원가입한후, 앱생성하고, 생성된 앱의 Javascript 키와 구문을 입력한다.


<script type='text/javascript'>

//<![CDATA[

// 카카오 개발자 사이트에서 부여받은 앱의 Javascript 키를 입력한다.

Kakao.init('카카오앱의 Javascript 키');

var likeCNT = parseInt("{$oDocument->get('voted_count')}"),

cmtCNT = parseInt("{$oDocument->get('comment_count')}"),

readCNT = parseInt("{$oDocument->get('readed_count')}");

// 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.

Kakao.Link.createDefaultButton({

container: "#kakao-link-btn",

objectType: "feed",

content: {

title: '{$sns_title}',

imageUrl: "{$oDocument->getThumbnail('686', '800', 'ratio')}",

imageWidth: 686,

imageHeight: 800,

link: {

mobileWebUrl: current_url,

webUrl: current_url

}

},

social: {

likeCount: likeCNT,

commentCount: cmtCNT,

viewCount: readCNT

},

buttons: [{

title: "바로가기",

link: {

mobileWebUrl: '{$sns_link}',

webUrl: '{$sns_link}'

}

}]

});

//]]>

</script>



[추가정보: 카카오링크 이미지 크기 재설정방법

카카오링크에 이미지를 첨부해서 공유할때,

XE의 썸네일 이미지 생성함수인 $oDocument->getThumbnail()을 사용할 경우, 게시물의 이미지 가로,세로 비율이 일정하지 않다보니 종종 홍보 이미지 일부가 잘리거나(crop), 가로세로 비율(ratio)이 기대한것보단 다르게 전송되는 경우가 있다. 

그래서 새로운 대안을 제시한다. 인터넷 서핑해서 내 나름대로 가장 좋은 방법이라 소개한다.

XE설치폴더에  "./classes/file/FileHandler.class.php" 에서 createImageFile() 함수 구문을 아래와 같이 수정한다.


public static function createImageFile($source_file, $target_file, $resize_width = 0, $resize_height = 0, $target_type = '', $thumbnail_type = 'crop')

{

// check params

if (($source_file = self::exists($source_file)) === FALSE)

{

return;

}


$target_file = self::getRealPath($target_file);

if(!$resize_width)

{

$resize_width = 100;

}


if(!$resize_height)

{

$resize_height = $resize_width;

}


// retrieve source image's information

$imageInfo = getimagesize($source_file);

if(!self::checkMemoryLoadImage($imageInfo))

{

return FALSE;

}


list($width, $height, $type, $attrs, $bits, $mime) = $imageInfo;

if($width < 1 || $height < 1)

{

return;

}


switch($type)

{

case '1' :

$type = 'gif';

break;

case '2' :

$type = 'jpg';

break;

case '3' :

$type = 'png';

break;

case '6' :

$type = 'bmp';

break;

default :

return;

}


if(!$target_type)

{

$target_type = $type;

}

$target_type = strtolower($target_type);


// if original image is larger than specified size to resize, calculate the ratio

$width_per = ($resize_width > 0 && $width >= $resize_width) ? $resize_width / $width : 1;

$height_per = ($resize_height > 0 && $height >= $resize_height) ? $resize_height / $height : 1;

$x = 0;

$y = 0;

$per = NULL;


switch(strtolower($thumbnail_type))

{

case 'crop':

$width_per = ($resize_width > 0 && $width >= $resize_width) ? $resize_width / $width : 1;

$height_per = ($resize_height > 0 && $height >= $resize_height) ? $resize_height / $height : 1;

$per = ($width_per < $height_per) ? $height_per : $width_per;

$new_width = (int)($width * $per);

$new_height = (int)($height * $per);

$x = (int)($resize_width / 2 - $new_width / 2);

$y = (int)($resize_height / 2 - $new_height / 2);

break;


case 'ratio':

$ratio_orig = $width/$height;


if($resize_width/$resize_height > $ratio_orig)

{

$new_width = $resize_height*$ratio_orig;

$new_height = $resize_height;

}

else

{

$new_width = $resize_width;

$new_height = $resize_width/$ratio_orig;

}


if($width<$new_width) $new_width = $width;

if($height<$new_height) $new_height = $height;


$x = (float)(($resize_width-$new_width)/2);

$y = (float)(($resize_height-$new_height)/2);


break;

case 'exact':

$new_width = $resize_width;

$new_height = $resize_height;

break;

default:

if($width > $resize_width || $height > $resize_height)

{

if ( $width > $height )

{

    $new_height = floor(($height/$width)*$resize_width);

  $new_width  = $resize_width;

}

else if( $width < $height )

{

$new_width  = floor(($width/$height)*$resize_height);

$new_height = $resize_height;

}

}

else

{

            $new_width = $resize_width;

            $new_height = $resize_height;

        }

break;


}


// create temporary image with target size

$thumb = NULL;

if(function_exists('imagecreateTRUEcolor'))

{

$thumb = imagecreateTRUEcolor($resize_width, $resize_height);

}

else if(function_exists('imagecreate'))

{

$thumb = imagecreate($resize_width, $resize_height);

}


if(!$thumb)

{

return FALSE;

}


if($target_type == 'png' && function_exists('imagecolorallocatealpha') && function_exists('imagesavealpha') && function_exists('imagealphablending'))

{

imagefill($thumb, 0, 0, imagecolorallocatealpha($thumb, 0, 0, 0, 127));

imagesavealpha($thumb, TRUE);

imagealphablending($thumb, TRUE);

}

else

{

imagefilledrectangle($thumb, 0, 0, $resize_width - 1, $resize_height - 1, imagecolorallocate($thumb, 255, 255, 255));

}


// create temporary image having original type

$source = NULL;

switch($type)

{

case 'gif' :

if(function_exists('imagecreatefromgif'))

{

$source = @imagecreatefromgif($source_file);

}

break;

case 'jpeg' :

case 'jpg' :

if(function_exists('imagecreatefromjpeg'))

{

$source = @imagecreatefromjpeg($source_file);

}

break;

case 'png' :

if(function_exists('imagecreatefrompng'))

{

$source = @imagecreatefrompng($source_file);

}

break;

case 'wbmp' :

case 'bmp' :

if(function_exists('imagecreatefromwbmp'))

{

$source = @imagecreatefromwbmp($source_file);

}

break;

}


if(!$source)

{

imagedestroy($thumb);

return FALSE;

}


if(function_exists('imagecopyresampled'))

{

imagecopyresampled($thumb, $source, $x, $y, 0, 0, $new_width, $new_height, $width, $height);

}

else

{

imagecopyresized($thumb, $source, $x, $y, 0, 0, $new_width, $new_height, $width, $height);

}


// create directory

self::makeDir(dirname($target_file));


// write into the file

$output = NULL;

switch($target_type)

{

case 'gif' :

if(function_exists('imagegif'))

{

$output = imagegif($thumb, $target_file);

}

break;

case 'jpeg' :

case 'jpg' :

if(function_exists('imagejpeg'))

{

$output = imagejpeg($thumb, $target_file, 100);

}

break;

case 'png' :

if(function_exists('imagepng'))

{

$output = imagepng($thumb, $target_file, 9);

}

break;

case 'wbmp' :

case 'bmp' :

if(function_exists('imagewbmp'))

{

$output = imagewbmp($thumb, $target_file, 100);

}

break;

}


imagedestroy($thumb);

imagedestroy($source);


if(!$output)

{

return FALSE;

}

@chmod($target_file, 0644);


return TRUE;

}



[## 네이버 밴드 ##]


<li>

<a cond="!Mobile::isMobileCheckByAgent()" id="band-link-btn" href="#" onClick="window.open('https://band.us/plugin/share?body={$sns_title}&route={$sns_link}','scrollbars=no,width=600,height=600');return false;" class="ico_sns band">Band</a>

<a cond="Mobile::isMobileCheckByAgent()" id="band-link-btn" href="bandapp://create/post?text={$sns_title}&route={$sns_link}" class="ico_sns band">Band</a>

</li>


첨부

0 댓글

목록

Page 1 / 5
번호 제목 날짜 조회 수
공지

IE에서 영상 또는 슬라이드 반응속도가 느린경우 해결방법

| 일반
  • file
2012-09-22 2546
91

Android 앱에서 서버 통신 방법

| 안드로이드
  • file
2019-03-15 187
90

Android WebView Sample

| 안드로이드
  • file
2019-03-14 167
89

사이트에 SNS 공유 버튼 등록방법

  • file
2019-03-05 220
88

IONIC for Synology

2019-02-26 110
87

Install NGINX + PHP + MARIADB for MAC

| 웹개발 1
2019-01-10 285
86

자주 사용하는 앱 개발 구문

2019-01-10 132
85

안드로이드 앱 제작 환경설정

| 안드로이드
  • file
2019-01-10 151
84

구글 캘린더 API 설정 방법

| 웹개발
  • file
2019-01-10 62
83

KT KOS, RDS 엑셀 보안문서를 엑셀 일반 문서로 변환하는 방법

| 일반 1
2019-01-09 133
82

Web Station(웹서버) 설정 for SYNOLOGY

| 웹개발
2019-01-09 96
81

USB 지정된 파일을 찾을 수 없습니다

| 일반
  • file
2017-09-23 2226
80

PHP 환경값 재설정 - for QNAP

2017-08-29 635
79

Oracle 12c 설치시 문제 해결 - 리눅스버전

2017-07-01 695
78

redmoon DB 설치

| 일반
  • file
2017-06-06 2738
77

CENTOS 7 초기 설정 가이드

| 웹개발
2016-07-24 2457
76

USB 메모리 인식불량일때

| 일반
2016-07-23 1264
75

"web" 공유 폴더에 있는 내 폴더를 권한없는 액세스로부터 어떻게 보호합니까?

  • file
2016-06-08 727
74

icecast & ices0 in 'synology' ? synices : icestation

2016-06-04 990
73

웹브라우저에서 마우스 클릭시 팝업 광고 문제 해결방법

2016-01-12 398
72

MySQL 사용자 권한 복구

  • file
2015-09-16 599

Board Links

Page Navigation