뉴스나 블로그 등을 보시다보면 SNS 등을 하시다보면 SNS 내보내기 소셜 공유하기 등의 내용이나 버튼을 보셨을 것입니다. 이 포스팅에서는 그 중에서 페이스북 공유하기에 대해서 설명하려 합니다.
티스토리나 기타 블로그, 사이트에서 서비스를 받고 있다면 몇 번의 클릭만으로 손쉽게 소셜 공유하기나 페이스북 공유하기를 적용할 수 있지만 직접 사이트를 개발하고 운영하는 곳에서는 수동으로 버튼을 달아주고 제기능을 하도록 해주어야 합니다.
페이스북, 카카오, 트위터, 네이버, 구글, 네이버 밴드 등 굵직굵직한 사이트에서는 이를 위해서 공유하기 API 를 제공해줍니다. 물론 네이티브 앱에서 구현을 한다면 SDK 를 받고 운영체제에 맞게 스크립트도 심어줘야 하겠지만 JavaScript 로 PC 또는 모바일 MOBILE 사이트에 달아보겠습니다.
페이스북 공유하기 버튼의 적용 방법은 <head></head> 태그 사이에 <meta> 태그에 공유하기에 필요한 정보를 입력한 후에 페이스북 공유하기 url 을 호출해주면 됩니다. 페이지가 로딩될 때 <head></head> 태그 사이에 <meta> 태그를 추가할 수도 있겠지만 jQuery 를 사용중이라면 동적으로도 추가가 가능합니다. 페이지가 로딩될 때나 동적으로 할 때나 필요한 코드는 아래와 같습니다.
<html>
<head>
<title>Your Website Title</title>
<meta property="og:url" content="https://marsland.tistory.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="삽질하는 프로그래머 통통만두" />
<meta property="og:description" content="삽질하는 프로그래머 통통만두의 퐌타스틱한 삽질기" />
<meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/9983C83C5AFB757A18" />
</head>
<body>
</body>
</html><meta property="og:url" />
<meta property="og:type" /><meta property="og:title" /><meta property="og:description" /><meta property="og:image" />사용자가 Facebook에 콘텐츠를 공유할 때 표시되는 이미지의 URL 입니다.
<meta property="og:app_id" />Facebook 인사이트를 사용하려면 페이지에 앱 ID를 추가해야 합니다. 인사이트를 사용하면 Facebook에서 개발자 사이트로 보내는 트래픽의 분석 결과를 볼 수 있습니다. 앱 대시보드에 앱 ID가 있습니다.
여기까지가 페이스북 공식 홈페이지에 나와 있는 내용입니다. 정적으로 페이지 로딩될 때 적용을 하려면 위와 같이 하면 됩니다. 이제는 jQuery 를 사용하여 동적으로 추가하는 방법에 대해서 설명해보도록 하겠습니다.
var url = 'http://marsland.tistory.com';
var title = '삽질하는 프로그래머 통통만두';
var description = '삽질하는 프로그래머 통통만두의 퐌타스틱한 삽질기';
var imgUrl = 'https://t1.daumcdn.net/cfile/tistory/9983C83C5AFB757A18';
$('head').append( StringTool.format('<meta property="og:url" content="{0}" />', url) );
$('head').append( StringTool.format('<meta property="og:type" content="{0}" />', 'article') );
$('head').append( StringTool.format('<meta property="og:title" content="{0}" />', title) );
$('head').append( StringTool.format('<meta property="og:description" content="{0}" />', description) );
$('head').append( StringTool.format('<meta property="og:image" content="{0}" />', imgUrl) );
여기서 쓰인 StringTool.format 함수에 대해서는 현 포스팅 제일 아래 "관련 포스팅" 에서 링크를 참조하세요.
물론 위에 보여드린 페이스북 공유하기를 동적으로 추가하는 방법에 대해서는 따로 함수로 빼서 인자값으로 받아서 처리하는 방법을 권장합니다. 하지만 저렇게 해서 페이스북 공유하기 팝업을 띄웠다 칩시다. 공유 또는 팝업창을 닫은 다음에 페이지 이동 없이 또 페이스북 공유하기 버튼을 누른다면 어떻게 될까요?
그렇습니다. 위의 화면처럼 나오게 되겠지요. 그래서 심화과정으로 들어가봅니다.
var url = 'http://marsland.tistory.com';
var title = '삽질하는 프로그래머 통통만두';
var description = '삽질하는 프로그래머 통통만두의 퐌타스틱한 삽질기';
var imgUrl = 'https://t1.daumcdn.net/cfile/tistory/9983C83C5AFB757A18';
if( ! $('meta[property="og:url"').attr('content') ) {
$('head').append( StringTool.format('<meta property="og:url" content="{0}" />', url) );
}
if( ! $('meta[property="og:type"').attr('content') ) {
$('head').append( StringTool.format('<meta property="og:type" content="{0}" />', 'article') );
}
if( ! $('meta[property="og:title"').attr('content') ) {
$('head').append( StringTool.format('<meta property="og:title" content="{0}" />', title) );
}
if( ! $('meta[property="og:description"').attr('content') ) {
$('head').append( StringTool.format('<meta property="og:description" content="{0}" />', description) );
}
if( ! $('meta[property="og:image"').attr('content') ) {
$('head').append( StringTool.format('<meta property="og:image" content="{0}" />', imgUrl) );
}해당 값이 없을 경우에만 append 하도록 했습니다. 물론 원하신다면 이미 있는 값을 다른 값으로 덮어써서 사용하는 방법으로도 충분히 응용 가능합니다. 지금까지 설명이 조금 길었지만 다 끝난 것은 아닙니다. 지금까지는 페이스북 공유하기를 위한 준비과정이었고 준비가 다 끝났으니 이제 마지막 휘날레를 장식해봅시다.
var linkUrl = window.location.href;
window.open( 'http://www.facebook.com/sharer.php?u=' + encodeURIComponent(linkUrl) );
짜잔~~ 잘되쥬? 도움이 되셨길 바랍니다.
관련 포스팅
참고
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 객체 복사 Copying objects in javascript (0) | 2018.11.08 |
|---|---|
| [SNS 내보내기] 네이버 밴드 공유하기 API (0) | 2018.09.13 |
| [SNS 내보내기] 네이버 블로그 공유하기 API (0) | 2018.09.13 |
| [자바스크립트 JavaScript] 문자열 format 함수 (0) | 2018.09.13 |
| [ES6] const & let (0) | 2018.08.29 |
