작성자:

워드프레스 발행글 SNS에 공유하는 방법 (2) – 워드프레스 SNS 공유 버튼 만들기

워드프레스에서 발행한 글이 연결된 SNS에 공유되어 글이 확산된다면 웹사이트의 트래픽이 높아지는 데에 도움이 될 것입니다. 

이번 포스팅에서는 워드프레스 발행글을 SNS에 공유하는 방법에 대해 알아보도록 하겠습니다.

 

 

워드프레스로 발행한 글을 SNS로 공유하는 방법

워드프레스로 발행한 글을 연결된 SNS로 공유하는 방법(기능)은 크게 2가지가 있습니다.

‘발행한 글을 자동/수동으로 한꺼번에 공유하는 방법‘과 ‘페이지 내에 공유 버튼을 생성하여 수동으로 공유하는 방법‘ 입니다.

두 방법 다 각자의 장점이 있는데요.

발행한 글을 연결된 SNS에 한꺼번에 공유하는 방법은 내 SNS에 공유하기 굉장히 편리하고,

공유 버튼을 생성하는 방법은 웹사이트 관리자 뿐만 아니라 방문자들도 쉽게 공유할 수 있어 확산되기가 좋습니다. 

발행한 글을 한꺼번에 공유하는 방법(기능)은 이전에 소개해드렸으니, 이번 포스팅에서는 공유 버튼을 생성하는 방법에 대해 소개하겠습니다.

 

해당 기능은 뉴스페이퍼와 같은 몇몇 테마에도 지원되고 있으나 이번 포스팅에서는 코드와 플러그인에 대해서만 알아보도록 하겠습니다.

 

 

 

카카오톡 버튼을 추가하기 위한 설정

카카오톡 공유하기 버튼을 사용 위해서는 카카오 개발자 페이지에서 스크립트 키를 발급 받아서 웹사이트에 입력해야 합니다.

그리 어려운 작업이 아니니 아래 과정을 따라해 보시길 바랍니다.

 

스크린샷665 1
로그인 > 내 애플리케이션
스크린샷666
내 애플리케이션 > 애플리케이션 추가하기

카카오 개발자 페이지에 접속하여 로그인을 한 후, 내 애플리케이션을 클릭해주세요.

 

스크린샷667

 

애플리케이션을 추가하여 정보를 입력해주세요.

이는 사용자가 카카오 로그인을 할 때 표시되는 정보이며 우리는 카카오 로그인 기능을 사용하지 않을 것이기 때문에 큰 의미는 없으니 알아서 적당히 입력하시면 됩니다.

 

스크린샷669

 

저장을 하고, 앱 키로 이동하여 JavaScript 키를 복사해 두세요.

 

스크린샷670

 

우리는 웹사이트에서 카카오톡 공유 기능을 사용할 것이기 때문에 웹플랫폼을 등록해야 합니다.

플랫폼으로 이동하여 위와 같이 Web 항목에 http / https 를 포함하여 홈페이지 주소를 입력하고 저장 해주세요.

기본 도메인은 가장 첫 번째 도메인이 자동으로 입력 되는 것 같습니다.

 

스크린샷671

 

이제 복사해둔 자바 스크립트를 WPCode나 Head & Footer Code와 같은 코드를 삽입할 수 있는 플러그인을 통해 Footer에 입력하면 끝입니다.

(참고로, 위 플러그인들은 구글 서치콘솔이나 애드센스 스크립트 삽입, 또는 네이버 웹마스터도구 소유 인증 확인 등 사이트 헤더에 코드를 넣어 줘야 할 때도 자주 쓰입니다.)

아래 코드 파일을 복붙 하시고 해당 부분[Kakao.init(‘자바 스크립트 입력’);]에 자바 스크립트를 입력하시면 됩니다.

※ 내 자바스크립트 키를 입력할 때 따옴표를 포함해서 넣으셔야 합니다. (‘내 자바스크립트키’)

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<!-- 카카오톡 공유 JavaScript -->
<script>
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('카카오 개발자 자바스크립트 키를 입력해 주세요');
function shareKatalk() {
<!-- 카카오 Link 공유 API 사용-->
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>

이것으로 카카오톡 공유 버튼을 설치하기 위한 카카오 개발자 홈페이지와 워드프레스의 설정은 끝입니다.

 

스크린샷681

 

참고로, 카카오톡 공유 버튼은 모바일에서만 작동 되며, 카카오스토리는 현재 공유 기능을 지원하지 않습니다.

또한, 인스타그램과 유튜브는 연결된 주소로 들어가는 버튼을 생성할 수는 있지만, 공유 기능 버튼은 없습니다.  

 

 

 

 

 

CSS

테마나 플러그인 기능을 사용하면 편리하지만, 

테마는 해당 기능이 없는 경우가 많고, 해당 기능을 가진 플러그인은 생각보다 사이트 속도에 영향을 미친다고 합니다.

그래서 CSS로 직접 만드는 방법을 소개하려고 합니다.

※ CSS 작업은 사이트에 문제를 일으킬 수 있으니 꼭 차일드테마로 진행하시길 바랍니다. 

 

CSS 

밑의 코드는 이 사이트의 코드를 제가 변형한 겁니다.

(해당 사이트에서는 플러그인과 스크립트 로드 없이 소셜 공유 버튼을 만드는 방법을 설명하고 있습니다.

스크립트를 로드하지 않으니 아무래도 속도에 미치는 영향이 최소화되는 것 같습니다.)

Goggle+, Buffer, Pin It 등 국내에서 잘 사용하지 않는 SNS를 제외하고 그 대신 네이버와 카카오톡을 추가하였는데요.

 

그런데, 적용이 불안정하게 되는 문제가 있습니다.

(처음에 잘 적용 되었는데, 모바일로 확인해보니 카카오톡과, Style.css가 적용 안 되었었고, 그래서 고쳐보려 했더니 오히려 점점 더 이상해지는 문제가 발생하였습니다. )

제 생각엔 제가 코드를 잘못 건드린 것 보다는 코드가 원래 문제 있었거나 제 웹사이트와는 맞지 않아서 생긴 문제인 것 같습니다. 

(적용했던 코드를 삭제해도 모바일로 접속한 웹사이트에는 공유 버튼이 그대로 남아 있다거나, 원본 코드를 적용했을 때도 문제가 해결이 안 되었습니다.)

 

다른 웹사이트는 잘 적용될 수도 있으니 차일드테마로 한번 시도해 보시길 바랍니다.

functions. php

function crunchify_social_sharing_buttons($content) {
global $post;
if(is_singular() || is_home()){

// Get current page URL 
$crunchifyURL = urlencode(get_permalink());
// Get current page title
$crunchifyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
// $crunchifyTitle = str_replace( ' ', '%20', get_the_title());

// Get Post Thumbnail for pinterest
$crunchifyThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$crunchifyTitle.'&amp;url='.$crunchifyURL.'&amp;via=Crunchify';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
$naverURL = 'http://share.naver.com/web/shareView.nhn?url='.$crunchifyURL.'&amp;title='.$crunchifyURL;;
$kakaotalkURL = 'https://sharer.kakao.com/picker/link?app_key='.$crunchifyURL.'&amp;title='.$crunchifyURL;;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&amp;media='.$crunchifyThumbnail[0].'&amp;description='.$crunchifyTitle;
// Add sharing button at the end of page/page content
$content .= '<!-- Implement your own superfast social sharing buttons without any JavaScript loading. No plugin required. Detailed steps here: https://crunchify.com/?p=7526 -->';
$content .= '<div class="crunchify-social">';
$content .= '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="crunchify-link crunchify-naver" href="'.$naverURL.'" target="_blank">Naver</a>';
$content .= '<a class="crunchify-link crunchify-kakaotalk" href="'.$kakaotalkURL.'" target="_blank">Kakaotalk</a>';
$content .= '</div>';

return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');

 

 

Style.css

.crunchify-link {
padding: 2px 8px 4px 8px !important;
color: white;
font-size: 12px;
border-radius: 2px;
margin-right: 2px;
cursor: pointer;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
margin-top: 2px;
display: inline-block;
text-decoration: none;
}
.crunchify-link:hover,.crunchify-link:active {
color: white;
}
.crunchify-twitter {
background: #00aced;
}
.crunchify-twitter:hover,.crunchify-twitter:active {
background: #0084b4;
}
.crunchify-facebook {
background: #3B5997;
}
.crunchify-facebook:hover,.crunchify-facebook:active {
background: #2d4372;
}
.crunchify-naver {
background: #0fc52d;
}
.crunchify-naver:hover,.crunchify-naver:active {
background: #209a34;
}
.crunchify-kakaotalk {
background: #eeea18;
}
.crunchify-kakaotalk:hover,.crunchify-kakaotalk:active {
background: #c7c522;
}
.crunchify-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}

 

 

 

 

 

추천 플러그인

보통 설정을 통해 간편하게 버튼을 생성할 수 있으니 사용 방법에 대해서는 생략하도록 하겠습니다.

또한, 국내 SNS(네이버, 카카오 등)를 지원하지 않는 플러그인은 제외하였습니다.

 

 

 

1. Korea SNS

icon

 

활성 설치 : 3,000+

워드프레스 공유 버튼을 생성하는 플러그인으로, 한국에서 주로 사용되는 소셜 네트워크가 구성되어 활용도가 높습니다. 

외국에서 개발된 SNS 공유 플러그인이 한국에서 많이 사용되고 있는 SNS는 지원하지 않아, 사용하기 망설이셨던 분들이 계시다면, 이번 기회에 Korea SNS 플러그인을 설치해서 사용해 보시길 추천 드립니다.

공유 가능한 소셜 네트워크 : 페이스북, 트위터, 카카오스토리, 네이버(라인, 밴드, 블로그, 카페), 텔레그램

Pro버전의 경우, 아이콘의 순서 조정이 가능하고, 카카오톡 링크를 추가할 수 있습니다.

 

 

 

 

2. Sassy Social Share

icon

 

활성 설치 : 100,000+

스크린샷688

공유 가능한 소셜 네트워크 : 페이스북, X, 라인, 텔레그램 등 30가지 이상

프로 버전에서는 네이버도 지원합니다.

 

스크린샷689

사이드바에도 버튼을 생성할 수 있으며 카운트 기능도 지원 합니다.

인스타그램과 유튜브는 공유 기능이 아니라 입력된 주소를 불러오는 기능입니다.

 

 

 

 

3. Ad Inserter

icon

 

활성 설치 : 300,000+

Ad Inserter은 원하는 코드를 웹사이트 구조 내에 다양한 위치에 넣어 작동 시켜주는 플러그인입니다.

이 플러그인을 통해 원하는 위치에 코드를 입력하여 공유 버튼을 생성할 수 있습니다. 

(애드센스 코드를 원하는 위치에 넣을 때에도 이 플러그인 많이 사용되니 알아두시면 도움이 될 겁니다.)

프로 버전

 

 

 

사용 방법

네이버 다운로드 카카오톡 X 페이스북
버튼으로 사용 될 SNS 로고 이미지를 다운 받아 미디어 라이브러리에 저장해주세요.

스크린샷677

그리고 이미지 주소를 따로 복사해두시길 바랍니다.

 

스크린샷672

Ad Inserter 설정 페이지에 들어오면 위와 같은 화면이 나옵니다.

 

검정색 화면 부분은 코드 입력창 입니다.

코드 입력창 위에 16까지의 숫자는 설정할 수 있는 코드 슬롯입니다. 

코드 입력창 아래쪽에서는 코드를 어디에 적용할지 설정할 수 있습니다.

Insertion은 어느 위치에 코드가 삽입될 것인지 설정하는 항목입니다.

Alignment는 정렬입니다. 왼쪽, 오른쪽, 센터 등을 설정할 수 있습니다.

 

스크린샷673

아래 코드를 삽입하고 원하는 페이지와 위치를 설정하고 저장을 하시면 위과 같이 공유 버튼이 생성됩니다.

(이미지 주소를 수정해 주세요.)

<!-- SNS 공유 버튼 -->
<div class="sns-go">
<ul>

<!-- 네이버 블로그 공유 버튼 -->
<li>
<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView?url=' +encodeURIComponent(document.URL)+'&amp;title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" rel="nofollow noopener"><img src="네이버블로그 공유하기 이미지 주소를 입력하세요" width="35px" height="35px" alt="네이버 블로그 공유하기"></a>
</li>

<!-- 카카오톡 공유 버튼 -->
<li>
<a href="#" onclick="shareKatalk();"><img src="카카오톡 공유하기 이미지 주소를 입력하세요" width="35px" height="35px" alt="카카오톡 공유하기"></a>
</li>

<!-- 네이버 밴드 공유 버튼 -->
<li>
<a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&amp;route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="네이버 밴드에 공유하기" rel="nofollow noopener"><img src="네이버 밴드 공유하기 이미지 주소를 입력하세요" width="35px" height="35px" alt="네이버 밴드에 공유하기"></a>
</li>

<!-- 페이스북 공유 버튼 --> 
<li>
<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&amp;t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" rel="nofollow noopener"><img src="페이스북 공유하기 이미지 주소를 입력하세요" width="35px" height="35px" alt="페이스북 공유하기"></a>
</li>

<!-- 트위터 공유 버튼 -->
<li>
<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" rel="nofollow noopener"><img src="트위터 공유하기 이미지 주소를 입력하세요" width="35px" height="35px" alt="트위터 공유하기"></a>
</li>

</ul>
</div>

 

워드프레스 발행글 SNS에 공유하는 방법 (2) - 워드프레스 SNS 공유 버튼 만들기

그리고 아래 CSS를 추가하시면 위와 같이 버튼이 가로로 깔끔하게 정렬 됩니다.

/* SNS 공유 */

.sns-go ul {

  list-style-type: none;

  margin: 40px 0 0 0;

  padding: 0;

  overflow: hidden;

}




.sns-go li {

  float: left;

padding-right: 5px;

}




.sns-go img {

    border-radius: 5px;

    width: 35px;

}




.single .entry-content {

margin-top: 0.6em;

}

 

 

 

읽어주셔서 감사합니다. 

밑에 좋아요 버튼을 눌러주시면 저에게 큰 힘이 되고 콘텐츠의 방향성을 잡는 데에도 도움이 됩니다.

혹시 궁금한 점이나 원하시는 주제가 있으시다면 댓글 남겨주세요.

구글 검색 키워드(첫 페이지 순) : 워드프레스 공유, 워드프레스 공유 버튼, 워드프레스 소셜, 워드프레스 소셜 공유

 

 

  • 네이버 블로그 공유하기
  • 카카오톡 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기

Related posts

20160320165228 iutuupfd
만화 & 애니 캡처 저작권
스크린샷474
워드프레스 차일드테마 (FTP)
블로그를 꼭 해야 하는 이유 썸네일 최적화
블로그를 꼭 해야 하는 이유

댓글 남기기