Frontends Javascript

SNS 내보내기(공유하기) 기능 구현하기

웹페이지에 있는 글이나 블로그 포스팅, 덧글 등의 콘텐츠를 다양한 소셜 네트워킹 서비스로 내보내는 기능(export)을 구현해야할 때가 있습니다. 최근의 게시판이나 블로그 서비스에서 대부분 기본적으로 제공하고 있는 기능이기도 하지요. 이번 포스팅에서는 각 서비스별로 웹 페이지에 있는 글을 내보낼 수 있는 방법을 정리하고, 이를 자바스크립트 코드로 정리하였습니다.

 

페이스북(Facebook)

페이스북에는 웹 상의 콘텐츠를 자신의 타임라인에 올릴 수 있는 공유(Sharer)라는 기능이 있습니다. 한 때 지원이 중지된다는 이야기도 있었지만, 2014년에 들어와 다시 공식적으로 API가 제공되기 시작하였습니다.

페이스북의 공유 API는 URL 기반으로 되어 있어 사용법도 간단합니다. 웹 브라우저를 아래의 URL로 Redirect 하되, GET 파라메터 u에 공유할 웹 페이지의 URL만 입력하면 됩니다. 사용자의 웹 브라우저가 아래 URL로 Redirect되면, 상단에는 간략한 의견을 입력할 수 있고, 하단에는 공유하고자 하는 웹 페이지의 요약정보가 표시된 화면을 만나게 됩니다.

http://www.facebook.com/sharer/sharer.php?u=PAGE_URL

Facebook에 공유하기

이 API를 사용할 때는 3가지 유의할 것이 있습니다.

첫 번째는, “사용자 의견” 부분에 내가 원하는 문구를 기본값으로 넣을 수 있는 방법은 없다는 점입니다. 과거에는 이를 제어하는 GET 파라메터 t가 있었습니다. 그러나 현재는 이것을 더이상 지원하지 않고 있습니다.

두 번째는, 공유 기능을 사용할 때 표시할 웹 페이지 요약정보는 Open Graph Tag로 커스터마이징할 수 있다는 점입니다. (만약 Open Graph Tag가 지정되지 않았다면, 페이스북은 HTML 맥락에 따라 임의로 요약정보를 가져오게 됩니다.)

Open Graph Tag는 몇 가지의 메타태그로 이루어져 있는데, <head> 태그 안에 아래의 메타태그들을 적절하게 설정하시면 됩니다. 페이스북 App ID는 페이스북 개발자 페이지에서 발급받을 수 있는데, 없더라도 일단 작동하는 데에는 무방합니다.

<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:title" content="웹 페이지 제목" />
<meta property="og:url" content="웹 페이지 URL" />
<meta property="og:description" content="웹 페이지 내용" />
<meta property="og:image" content="웹 페이지 대표 이미지" />

개발자가 Open Graph Tag를 정확하게 작성하였는지를 확인할 수 있도록, 페이스북은 Debugger라는 도구를 제공합니다. URL을 입력하면 페이스북 Debugger는 해당 웹 페이지에 접속해서 이 Open Graph Tag를 읽어내 잘못된 부분이 있다면 어떻게 수정해야 하는지 안내해줄 것입니다.

마지막으로, 전세계의 수많은 웹 페이지를 실시간으로 접속해 정보를 가져오기는 어렵기 때문에, 페이스북은 한 번 공유된 웹 페이지 요약정보를 캐싱(Caching)하여 일정 기간 동안 가지고 있습니다. 때문에 여러분이 Open Graph Tag가 잘못된 것을 알고 수정하여도, 한동안은 이 수정된 내용이 페이스북 공유 기능에서 적용되지 않을 수도 있습니다.

이 때는 위에서 소개한 Debugger를 이용하여 해당 페이지를 다시 한 번 디버깅하시면 됩니다. 페이스북 Debugger는 디버깅을 하는 과정에서 해당 URL의 웹 페이지를 다시 캐싱할 것입니다.

 

트위터(Twitter)

페이스북과 마찬가지로, 트위터 역시 URL로 Redirect하는 것 만으로도 글 내보내기 기능을 구현할 수 있습니다. URL은 아래와 같습니다. url 파라메터에 내보낼 웹 페이지의 URL을 넣고, text 파라메터에는 기본값으로 표시할 트윗 내용을 넣으면 됩니다.

https://twitter.com/intent/tweet?text=TEXT&url=PAGE_URL

Twitter Tweet through API

트위터 API는 url 파라메터에 들어간 URL이 20글자가 넘을 경우, 자동으로 URL을 축약합니다. 트위터에는 140글자만 작성할 수 있는 제한이 있기 때문입니다. URL 자동축약 덕분에 우리는 GET 파라메터가 여러 개 붙는 URL이라도 안심하고 API를 이용할 수 있습니다.

 

카카오톡(Kakao Talk)

카카오는 사실 Kakao Link라는 이름의 오픈 API를 이미 제공하고 있으며, 예제코드 역시 GitHub에서 받아볼 수 있습니다. 그대로 사용해도 무방한 간결한 코드입니다만, 충분히 뜯어볼 가치가 있습니다. 이 예제코드가 바로 모바일 웹이 모바일 앱을 호출하는 부분을 가지고 있기 때문입니다. 카카오 API 예제코드를 간추려보면 아래와 같습니다.

var param = 'sendurl?msg=' + encodeURIComponent('보낼 메시지');
	param += '&url=' + 'http://dev.epiloum.net';
	param += '&type=link';
	param += '&apiver=2.0.1';
	param += '&appver=2.0';
	param += '&appid=dev.epiloum.net';
	param += '&appname=' + encodeURIComponent('Epiloum 개발노트');

if(navigator.userAgent.match(/android/i))
{
	setTimeout(function(){
		location.href = 'intent://' + param + '#Intent;package=com.kakao.talk;end';
	}, 100);
}
else if(navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i))
{
	setTimeout(function(){
		location.href = 'itms-apps://itunes.apple.com/app/id362057947?mt=8';
	}, 200);
	setTimeout(function(){
		location.href = 'kakaolink://' + param;
	}, 100);
}

모바일 웹에서 앱을 호출하기 위해서는, 웹 브라우저의 주소(location.href)에 URL과 비슷하지만 조금 특이한 주소를 넣게 됩니다. 방법은 같지만 그 주소는 안드로이드일 때와 애플 계열 기기(아이폰, 아이팟, 아이패드)일 때 차이가 있습니다.

안드로이드에서 사용하는 주소는 먼저 살펴보면 아래와 같습니다.

intent://명령어?파라메터#Intent;package=패키지명;end

  1. 안드로이드의 앱 호출 주소는 http 대신 intent라는 이름의 프로토콜로 시작합니다. 이것은 어떠한 앱을 호출하더라도 같습니다.
  2. 프로토콜 다음에는 URL과 비슷한 명령어가 들어가는데, 위 코드에서는 URL을 포함한 메시지를 작성하는 명령어인 sendurl이라는 명령어가 들어가 있습니다
  3. 파라메터는 GET 파라메터와 동일한 형태로 들어갑니다. 카카오톡 API에서는 msg, url 등 몇 가지 파라메터를 필수로 입력하도록 되어 있습니다.
  4. 마지막으로 # 뒤에는 Intent로 시작하여 end로 끝나는 형태를 가지고 있습니다. 그 사이에 카카오톡의 패키지명인 com.kakao.talk이 파라메터로 들어가 있습니다. 앱에 따라서는 추가적인 파라메터가 들어갈 수도 있습니다.

애플 계열 기기에서 앱을 호출하는 주소는 좀더 단순한 형태를 가지고 있습니다.

프로토콜://명령어?파라메터

  1. 애플 계열 기기는 앱마다 프로토콜 이름이 정해져 있습니다. 카카오톡의 경우에는 프로토콜이 kakaolink://가 됩니다.
  2. 프로토콜 다음에는 명령어가 들어갑니다. 카카오톡에서는 애플 계열 기기에서도 안드로이드와 동일하게 sendurl라는 명령어를 사용했네요.
  3. 파라메터는 역시 GET 파라메터와 동일한 형태를 가집니다. 카카오톡의 경우, 이 파라메터의 종류와 형태도 안드로이드와 동일합니다.

또 하나의 차이점은, 이 앱이 설치되어 있지 않을 때의 처리입니다. 안드로이드의 경우 intent로 시작하는 주소를 location.href에 넣었을 때 앱이 없으면, 별도로 처리하지 않아도 구글 플레이 스토어의 해당 앱 다운로드 화면으로 이동하게 됩니다.

하지만 애플 계열 기기의 경우에는 “페이지를 표시할 수 없습니다”라는 오류 메시지만 보게 됩니다. 때문에 애플 계열 기기의 경우에는 setTimeout()으로 앱 호출 조금 뒤에 앱 스토어로 이동하는 코드를 실행하도록 타이머를 설정하는 방법을 이용합니다. location.href 값이 주어진 앱 호출 주소로 잘 대체가 된 경우에는, 이미 주소가 이동한 상태이므로 이 타이머가 실행될 기회가 없습니다. 그러나 제대로 이동하지 못한 경우에는 타이머 안의 코드가 실행되면서 화면이 앱 스토어로 이동하게 될 것입니다.

 

네이버 밴드(Band)

밴드 역시 앱이기 때문에, 앞서 살펴본 모바일 웹에서 앱을 호출하는 방법을 동일하게 사용하게 됩니다. 달라진 점은 앱을 호출할 때 사용하는 주소와 앱 스토어의 주소 뿐입니다.

var param = 'create/post?text=' + encodeURIComponent('보낼 메시지');

if(navigator.userAgent.match(/android/i))
{
	setTimeout(function(){
		location.href = 'intent://' + param + '#Intent;package=com.nhn.android.band;end';
	}, 100);
}
else if(navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i))
{
	setTimeout(function(){
		location.href = 'itms-apps://itunes.apple.com/app/id542613198?mt=8';
	}, 200);
	setTimeout(function(){
		location.href = 'bandapp://' + param;
	}, 100);
}

 

사용례: 웹페이지를 SNS로 내보내는 자바스크립트 함수

이상의 내용을 종합하여, 파라메터로 입력받은 내용과 URL을 각각의 SNS로 내보내는 1개의 자바스크립트 함수를 아래와 같이 작성하였습니다.

함수에는 이 포스팅에서 소개한 페이스북, 트위터, 카카오톡, 밴드의 4개 SNS는 물론, 미투데이와 카카오스토리도 포함되어 있습니다. 또한 PC에서 모바일 앱을 호출할 경우에는 경고 메시지를 띄우도록 예외처리도 되어 있습니다.

function sendSns(sns, url, txt)
{
	var o;
	var _url = encodeURIComponent(url);
	var _txt = encodeURIComponent(txt);
	var _br  = encodeURIComponent('\r\n');

	switch(sns)
	{
		case 'facebook':
			o = {
				method:'popup',
				url:'http://www.facebook.com/sharer/sharer.php?u=' + _url
			};
			break;

		case 'twitter':
			o = {
				method:'popup',
				url:'http://twitter.com/intent/tweet?text=' + _txt + '&url=' + _url
			};
			break;

		case 'me2day':
			o = {
				method:'popup',
				url:'http://me2day.net/posts/new?new_post[body]=' + _txt + _br + _url + '&new_post[tags]=epiloum'
			};
			break;

		case 'kakaotalk':
			o = {
				method:'web2app',
				param:'sendurl?msg=' + _txt + '&url=' + _url + '&type=link&apiver=2.0.1&appver=2.0&appid=dev.epiloum.net&appname=' + encodeURIComponent('Epiloum 개발노트'),
				a_store:'itms-apps://itunes.apple.com/app/id362057947?mt=8',
				g_store:'market://details?id=com.kakao.talk',
				a_proto:'kakaolink://',
				g_proto:'scheme=kakaolink;package=com.kakao.talk'
			};
			break;

		case 'kakaostory':
			o = {
				method:'web2app',
				param:'posting?post=' + _txt + _br + _url + '&apiver=1.0&appver=2.0&appid=dev.epiloum.net&appname=' + encodeURIComponent('Epiloum 개발노트'),
				a_store:'itms-apps://itunes.apple.com/app/id486244601?mt=8',
				g_store:'market://details?id=com.kakao.story',
				a_proto:'storylink://',
				g_proto:'scheme=kakaolink;package=com.kakao.story'
			};
			break;

		case 'band':
			o = {
				method:'web2app',
				param:'create/post?text=' + _txt + _br + _url,
				a_store:'itms-apps://itunes.apple.com/app/id542613198?mt=8',
				g_store:'market://details?id=com.nhn.android.band',
				a_proto:'bandapp://',
				g_proto:'scheme=bandapp;package=com.nhn.android.band'
			};
			break;

		default:
			alert('지원하지 않는 SNS입니다.');
			return false;
	}

	switch(o.method)
	{
		case 'popup':
			window.open(o.url);
			break;

		case 'web2app':
			if(navigator.userAgent.match(/android/i))
			{
				// Android
				setTimeout(function(){ location.href = 'intent://' + o.param + '#Intent;' + o.g_proto + ';end'}, 100);
			}
			else if(navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i))
			{
				// Apple
				setTimeout(function(){ location.href = o.a_store; }, 200);			
				setTimeout(function(){ location.href = o.a_proto + o.param }, 100);
			}
			else
			{
				alert('이 기능은 모바일에서만 사용할 수 있습니다.');
			}
			break;
	}
}

이번 포스팅에서는 자바스크립트로 작성된 코드를 소개했지만, 목적에 따라서 다른 언어로도 충분히 작성이 가능합니다. 제가 재직 중인 회사에서는 SNS로 콘텐츠가 공유될 때마다 DB에 로그를 남겨야만 했는데, 매번 Ajax 통신을 하는 것이 번거로워 위의 기능을 PHP로 작성하여 사용하고 있습니다. 상황에 따라 적절한 언어를 선택해 이용하시기 바랍니다.

65 thoughts on “SNS 내보내기(공유하기) 기능 구현하기”

    1. No님 댓글 감사합니다. 워낙에 스팸댓글이 많아 확인도 회신도 늦어 죄송하네요.

  1. 좋은 정보 정말 감사합니다. 설명을 너무 잘 해 놓으셔서 단번에 이해가 가네요 고맙습니다!

    1. wisdomC님 감사합니다. 써놓은지가 조금 지난 글이라 밴드나 카카오 쪽은 변경이 있을 수도 있으니, 실무에서 사용하실 때는 테스트를 먼저 거쳐보시면 좋을 것 같습니다.

    1. fsdfsf.com님 안녕하세요. RSS 구독을 위해서는 이 URL을 이용해주세요: http://dev.epiloum.net/feed
      워드프레스 테마 업데이트를 하면서 예전에 작성한 소스들이 초기화되어 버렸네요. RSS 링크도 같이 사라진 모양입니다. 알려주셔서 감사합니다!

    1. 리퍼블릭컴퍼니님, 먼저 관심을 가져주셔서 감사합니다. 저는 기본적으로 제 콘텐츠를 다른 곳에 복제하여 올리지는 않고 있습니다.

      개발 블로그는 그 특성상, 소스코드에 치명적인 문제나 결함이 있는 경우 독자들의 피해가 예상되는 경우가 있습니다. 이 때는 콘텐츠의 원작자로서 책임지고, 소스코드를 바로잡거나 배포를 중지할 수 있어야 합니다. 만약 복제된 콘텐츠가 있으면 원작자인 저는 이러한 권한을 제 책임하에 행사할 수 없게 됩니다.

      그러나 포스팅의 링크를 소개하는 것은 언제나 저의 허락없이 가능합니다. 트위터나 페이스북의 공유하기 기능에 대해서도 또한 마음을 열어놓고 있습니다. 이 점에 관하여 리퍼블릭컴퍼니님의 넓은 이해를 구합니다.

  2. 너무 잘 보았습니다. 많은 도움이 되었습니다.
    그런데 카카오톡과 스토리는 최신버전의 링크로 하라고 메세지가 뜨더군요.
    어떻게 해야 할지 난감하네요! 혹시 도움좀 주실 수 있나요?
    감사합니다

    1. ishall님, 방문과 덧글 감사드립니다.
      이 포스팅이 작년 봄에 쓰여진 글이다보니, 최신 버전을 반영하지 못하고 있는 점 양해를 부탁드리겠습니다. 카카오톡과 카카오스토리는 작년 말부터 공식적으로 API가 제공되기 시작했습니다. 다만 API 사용 전에 카카오 계정이 있어야만 하고, 앱 등록도 미리 해야만 하는 것으로 변경되었습니다.
      아래 페이지에서 예제와 사용법을 확인할 수 있으니, 참고하시면 좋을 것 같습니다.
      https://developers.kakao.com/docs/js#카카오톡-링크

  3. 자주 쓰는 SNS 공유하기를 모아서 공유를 해주시다니..
    너무너무 감사합니다. 잘 쓰겠습니다.

    1. unknown님, 감사합니다. 앞으로도 좋은 포스팅으로 찾아뵙겠습니다.

  4. 밴드로 공유시 글자와 url은 사용자가 지정할 수 있는데
    이미지는 지정할 수 없나요.

    다시말해, 밴드로 공유시 특정이미지도 함께 공유하고 싶습니다.

    방법이 없을 까요?

    1. thesky님, 방문과 덧글 감사드립니다.

      https://developers.band.us/developers/docs/share
      이 포스팅을 작성할 당시와는 다르게, 현재는 NHN에서 밴드 공유기능 구현방법을 공식적으로 공개하고 있습니다. 위 URL에서 확인하실 수 있는데요. 아쉽게도 thesky님께서 원하시는 이미지 공유에 관한 파라메터는 여전히 없는 것으로 보입니다.

  5. 좋은글 감사합니다. 일반적으로 워드프레스에서 국내 SNS 공유기능이 제공되는데, 일반 사이트에는 공개된것이 없어서 궁금했습니다.

  6. 페이스북 공유하기 관련해서 개발중인데 막히는 부분이 있어서 질문 드립니다 ㅠㅠ
    저는 디버거 페이지에서 제 사이트 도메인이 아닌 localhost or 192.168.~~
    이런 방식으로 테스트 해보니 메타태그 정보를 읽어 오지도 못하고… 그냥 share 버튼 일반적인 예제를 사용해도 아무 그림이나 글내용이 올라가지도 않아요 ㅠㅠ

    무조건 도메인 주소를 등록해서 도메인 주소로 접근 가능 한건가요?? 아님 제가 공유기를 사용하고 있어서 거기서 문제가 생긴걸까요??;;

    1. 페이스북 디버거에서 디버깅해볼 수 있는 웹 페이지는 반드시 외부에서 접속이 가능해야만 합니다. 페이스북 디버거가 위치한 서버가 접속할 수 있어야만 그 웹 페이지가 가지고 있는 메타태그를 확인할 수 있을 테니까요. 질문해주신 localhost와 192.168.x.x 등은 Private Address로, 외부에서는 접속할 수 없는 주소이지요.

    1. 하인천부엉이님, 방문 감사합니다. 앞으로도 좋은 글로 찾아뵙겠습니다.

    1. vv님, 방문하여 주셔서 감사합니다. 개발하시는 데에 큰 도움되셨기를 바랍니다.

    1. catmint님 감사합니다. 앞으로도 좋은 포스팅으로 만나뵐 수 있도록 노력하겠습니다.

  7. 감사합니다.
    포스팅 해주신 부분 덕에 정말 많은 도움이 되었습니다.

    1. glory님, 오히려 졸렬한 글임에도 읽어주시고 덧글도 남겨주셔서 저야말로 감사드립니다. 앞으로도 좋은 내용으로 찾아뵙겠습니다.

  8. 정리되어 있는 글 잘 봤습니다.
    한가지 질문을 드리고 싶은데요…
    제가 처음으로 카카오톡 공유를 하는 지라….
    카카오톡, 카카오스토리가 각각 최신 버전이 아니라는 문구가 뜨게 됩니다.
    어떤 것을 어떻게 바꿔야하는지 잘 모르겠습니다.
    이것저것 해보고는 있지만 잘 안되서 질문드립니다.

    1. xormr7675님, 덧글 감사합니다. 이 포스팅을 한지가 1년이 넘다보니, 최신버전을 반영하지 못하는 부분이 있습니다. 카카오톡 공유기능 또한 포스팅을 작성할 때와는 달리, 현재는 새로운 API가 제공되고 있는 상황입니다.

      http://www.kakao.com/services/api/kakao_link

      위 주소에 들어가보시면 3.5 버전의 카카오톡 공유 API를 찾아보실 수 있습니다. 참고해보심이 좋을 것 같습니다.

  9. 안녕하세요 그누보드5 사용자인데요

    위에 적어주신 sns 공유기능들 필요한것도 있어서 잘가져 갑니다.

    다름이 아니라 텀블러도 공유기능 부분으로 애를 먹고 있는데여….

    우연히 검색하다가 들어왔는데 왠지 여기서는 정보를 찾을수 있을거 같아서요

    텀블러 부분 공유 기능 버튼 할려면 어떻게 하는건지 아시면 혹시 답변좀 주실수 있을런지요?

  10. 트위터는 url 을 http://www…. 이렇게 적었더니 IE에서 페이지 오류가 뜨던데… 혹시 이런 현상 해결하신분 계신가요??

  11. 안녕하세요
    혹시 인스타그램도 공유하기가 가능한가요?
    구글링해도 내용이 별로 나오지가 않네요..

  12. 안녕하세요,
    필요했던 기능이라 쉽게 설명해주셔서 감사합니다.
    혹시 페이스북에서 기본으로 제공하는 아이콘(버튼) 말고
    다른 모양 이미지를 넣을 수 있을까요?

  13. 안녕하세요~

    자세한 설명 너무 감사드립니다 ^^
    고생고생 하다 이 글대로 따라해보니 드디어! 퍼가기 팝업이 뜨네요. 감동~~

    그런데, 테스트해보니 퍼간 제 페이스북 게시글에 링크건 이미지가 뜨지 않습니다.

    이런식으로 제 개인계정으로 작업을 했는데요.
    저 링크로 들어가면 잘 들어있는데 왜 페이스북에서는 이미지가 보이지 않을까요?

    답변주시면 감사하겠습니다 ^^ 즐거운 주말 보내세요~

    1. 거니님, 안녕하세요. 직접 소스코드를 확인하지 못한 상태에서 답변을 드리는데 제약은 있습니다만, 웹페이지 공유는 잘 되었으나 이미지가 표시되는 것이 문제라면 위 글에서 소개한 Open Graph 태그의 문제일 가능성이 가장 높은 것 같습니다. og:image 부분의 이미지 URL을 한 번 점검해보는 것은 어떨까요?

  14. 안녕하세요. 뭐 하나만 여쭤보려고 하는데.. 일단 저는 페이스북 아이디도 없는 사람인데요..
    제가 무심코 페이스북 공유하기 버튼을 눌렀는데 비로그인 상태인데도 불구하고 공유 숫자가 올라가더라구요..너무 놀라 제가 한것이 맞는지 계속 눌러보니 계속 올라갔습니다..
    이건 무슨 경우인가요?? 그리고 만약 공유 된거라면 취소 방법은 없을까요??

    1. 함선재님, 방문 감사드립니다.

      페이스북 공유버튼은 좋아요 버튼과는 달리, 오로지 그 글을 공유하는 페이스북 게시물을 작성할 수 있는 웹페이지를 팝업으로 표시하는 기능만을 가지고 있습니다. 만약 페이스북에 로그인하지 않은 상태라면, 이 팝업에 게시물 작성화면보다 먼저 로그인 화면이 표시됩니다. 또한 공유버튼 옆에 있는 숫자는 사실 그 글이 “공유”된 횟수가 아니라 해당 글에 클릭된 “좋아요”의 횟수입니다.

      이러한 점을 다각적으로 고려해볼 때 말씀하신 오작동은 이해하기 어려운 부분이 많습니다. 비슷한 사례 또한 저는 접하여 본 적이 없고, 제가 지금 보고계신 이 블로그에 붙어있는 공유버튼으로 말씀하신 문제를 재현을 해보려고 해도 재현을 할 수 없었습니다. 말씀해주신 문제의 재현과정을 조금 더 분명하게 규명하시는 과정이 필요할 것 같습니다. 도움이 되어드리지 못해 죄송합니다.

  15. 페이스북 고객센터가 있다면 한번 문의해봐야겠습니다.
    답변 해주셔서 감사드립니다,

  16. 잘보고 갑니다.
    근데 카카오톡 링크쪽, api가 바뀌는거 아닌가요?
    6월부터 바뀐다고 하던데..

    1. 안녕하세요, 먼저 방문을 감사드립니다. 글을 작성한지 2년이 지나다보니 일부 항목의 경우에는 지금의 방법과 맞지 않는 부분이 있습니다. 카카오톡 링크 API는 현재 3.5 버전이 나와 있습니다. 다음 페이지에서 확인해보실 수 있습니다: https://developers.kakao.com/docs/js 이 3.5 버전이 말씀하신 작년 6월에 바뀐 API입니다. 즉, 덜덜님께서 보신 API 변경공지의 6월은 2015년 6월을 말하는 것입니다. 참고하시기 바랍니다.

  17. 잘보고 갑니다.
    그런데, 페이스북 og tag가 로컬에 ip로 서버띄어놓고,
    테스트하면 안되는건가요?
    잘안되네요.ㅠㅠ

    1. 반갑습니다. 방금 전의 덜덜님과는 다른 분이시네요. 🙂 페이스북 공유하기 기능을 테스트하려면, 페이스북 디버거가 공유하려는 그 웹페이지를 살펴볼 수 있어야 합니다. 따라서 로컬에서만 접근 가능한 서버에서는 페이스북 공유기능의 테스트나 개발을 진행하실 수 없는 안타까움이 있습니다.

  18. 안녕하세요~ 좋은 정보 덕분에 공유작업시 도움이 많이 되었습니다.
    헌데 밴드 공유에 문제가 발생하고 있습니다.
    제 기억으론 이전에는 발생하지 않았던 문제인데
    최신 ios 단말에서 >
    밴드 부분에 적용하였던 setTimeout 이 다르게 작동하는 현상을 발견하였습니다.

    else if(navigator.userAgent.match(/(iphone)|(ipod)|(ipad)/i)){
    setTimeout(function(){
    SNS.open(band);
    }, 100);
    setTimeout(function(){
    location.href = ‘itms-apps://itunes.apple.com/app/id542613198?mt=8’;
    }, 200);
    }

    소스는 이렇게 짜여있습니다.

    일부 단말은 SNS.open(band); 함수 실행 -> (앱접근 팝업은 기기마다 유무가 있었음) -> 앱이 실행되면 앱스토어 링크 이동 안함.
    일부 단말은 SNS.open(band); 함수 실행 -> 앱 접금 팝업 -> 0.2뒤 무조건 앱스토어 링크 이동.

    이런 현상 혹시 못보셨는지요??
    혹 개선이 되었다면 어떤 식으로 작업하셨는지 매우 궁금합니다.

    1. 홍주님, 댓글 남겨주셔서 감사합니다. 전체적인 내용을 볼 수 없어 위 코드의 문제를 파악하기에는 어려움이 있습니다만, 순수하게 밴드의 공유기능에 대해서라면 밴드 개발자 센터(https://developers.band.us/develop/guide/share)를 소개해드리고 싶습니다. 이 글이 작성된 지가 2년이 넘다보니, 공유기능 구현방법이 바뀐 내용이 반영되지 않은 부분이 있는 점에 양해를 부탁드리겠습니다.

  19. 글 잘보고 잘 적용하고 있습니다.

    감사드립니다.

    문의드릴께 있는데 네이버 블로그는 공유하기 안하시고

    왜 밴드만 하셨나요? 네이버 블로그는 안하신이유가 있으신가해서요!

    네이버 블로기로 공유하기가 (유튜브 말고는 없던데…) 혹시

    따로 협약을 맺거나 해야하나요?

    1. 진욱님, 안녕하세요. 댓글 남겨주셔서 감사합니다. 네이버 공유하기 기능에 관하여서는 의도적으로 빠뜨린 것은 아니고, 단지 글을 작성할 시점에 네이버 공유하기 기능이 부각되지 않았기 때문입니다. 네이버 공유하기에 관한 정보는 아래에서 찾아보시면 좋을 것 같습니다.
      https://developers.naver.com/docs/share/navershare

  20. 잘 보고 갑니다. 덕분에 많은 도움이 되었습니다.^^
    카카오톡은 이제 방식이 바뀌었네요.

    그런데 트위터도 저렇게 개발하였는데, 제가 내보내기할 사이트의 URL이 워낙 긴데 자동으로 축약이 되지는 않더라구요..ㅎㅎ 그래서 트위터 140자 길이 초과하였다면서 내보내기가 안되네요..ㅠㅠ

    1. 정민님 안녕하세요. 작성된지 3년이 흐른 포스팅인데도 여전히 관심을 받다보니, 변경된 스펙에 대해서는 덧글로도 종종 질문이 들어옵니다. 덧글로 주고 받은 문답들도 참고해보시면 좋을 것 같습니다.

  21. Pingback: Using U Blog
  22. 안녕하세요 글 잘 봤습니다
    한가지 질문이 있는데요. 트위터같은경우 공유한 후에 공유확인여부를 리턴받을수 있는 기능이 제공하는지가 궁금합니다;;

    페이스북은 되는걸로 알고있는데 트위터도 가능한가요!? 아무리 찾아도 나오질 않아서요~ㅠㅠ

    1. qyoung님 안녕하세요. 저도 궁금하여 찾아보았으나 국내외를 막론하고 시원한 답변을 내려주는 아티클은 없었던 것 같습니다. 다만 최근의 트위터 버튼은 해시태그를 추가하는 파라미터도 제공하고 있습니다. 트윗 버튼마다 unique한 해시태그를 달아주면 비슷한 효과를 얻을 수 있지 않을까 싶습니다. 트윗 버튼 파라미터의 공식 안내 페이지는 아래이니 참고해보세요.
      https://dev.twitter.com/web/tweet-button/parameters

  23. 밴드와 페북 연동앱을 궁리중입니다

    두가지를 생각중인데

    밴드 새글을 올리면
    1. 페북 페이지나 그룹에 바로공유
    2. 페북 페이지나 그룹에 내용 그대로 포스팅

    어떤 부분들을 검토하면 빠른 구현이 가능할가요

Leave a Reply

Your email address will not be published. Required fields are marked *