워드프레스 카카오톡 공유 Archives

열심히 글을 쓰면, 내 글이 더욱 많은 사람에게 읽히는 일이 가장 행복한 일일 것이다. 그래서 티스토리나 블로그스팟 등도 소셜 공유 버튼이 기본으로 탑재되어 있다.

하지만 워드프레스에서는 소셜 공유버튼을 플러그인을 통해서 넣어줘야 한다. 참고로, 트위터나 페이스북 같은 건 무료 플러그인으로도 가능하다. 하지만 우리의 국민 메신저인 카카오톡만은 무료로 설치가 되지 않는다. 그래서 오늘은 워드프레스에서 카카오톡을 포함한 소셜 공유 버튼을 플러그인 없이 무료로 설치하는 법을 알아본다. 물론 이런 거 너무 귀찮아 하면 유료 플러그인을 사용하시면 되시겠다.

결국, 성공은 하였지만, 이 과정은 무척이나 길고 힘들다. 알고 시작하기! 아래의 과정데로 하나하나 따라오다보면, 별 문제 없이 다 해내실 것이라 생각된다.

가장 기본적으로 준비할 것이 바로 카카오 디벨로퍼스의 자바 스크립트 키와 소셜 공유 버튼 이미지 파일 다운로드다.

카카오 디벨로퍼스 자바 스크립트 키 가져오기

다른 소셜미디어와는 다르게 카카오톡은 소통방식이 양방향이다보니, 적용방식이 달라서, 별도의 과정을 거쳐야 한다. 이때 필요한 것이 카카오 개발자 스크립트 키이다.

먼저, 카카오 디벨로퍼스를 검색하여 들어간다.

그럼 아래와 같이 화면이 나오는데, 시작하기를 눌러 로그인을 해준다. 대부분 카카오 아이디를 가지고 계실 것이니, 카카오 아이디로 쉽게 시작할 수 있다.

로그인을 하고 들어오면 애플리케이션 추가하기가 뜨는데, 여기로 들어가 준다.

그럼 아래와 같은 화면이 뜬다. 여기서 앱 이름과 사업자 명을 써줘야 한다. 둘 다 원하는 이름으로 간단히 임의로 적어준다. 반드시 아래에 필수동의에 체크하고 들어가야 한다. 그리고 저장을 누른다.

그럼 아래와 같이 추가된 애플리케이션이 아래에 뜬다.

그 애플리케이션을 클릭해주면, 아래와 같이 자바스크립트(javascript)키를 비롯한 몇 가지가 주루룩 뜬다. 여기서 우리는 이 자바 스크립트키를 카피하여 쓸 예정이다. 일단 기억해 둔다. 그리고 바로 아래에서 플랫폼 설정하기로 간다.

플랫폼 설정하기로 들어와서 아래의 web 플랫폼 등록으로 들어가서, 나의 워드프레스 사이트 도메인 주소를 입력해준다.

사이트 도메인 빈칸에 내 워드프레스 주소를 잘 적어넣어 준다. 위에 넣으면, 아래의 기본 도메인 주소는 입력하지 않아도 자동으로 똑같은 주소가 입력이 된다. 그리고 저장하면 끝!

SNS 이미지 아이콘 가져오기(카카오톡 외)

SNS 이미지 파일은 아래의 개발자님께서 만들어둔 이미지 파일을 다운로드해 놓았다. 그리고 이 파일을 컴퓨터에서 불러오기한다. 열어보시면 이런 모양이다. 그럼 이제 준비는 대강 끝난 셈이다. 참고로, 이미지는 내가 원하는 데로 만들 수도 있다.

아래의 이미지 파일을 다운로드하여 사용하셔도 좋겠다.

sns_icon-origin 다운로드

위의 파일을 다운로드한 다음, 압축을 풀어서 내 컴퓨터에 저장해 둔다. 이제 워드프레스로 가서 다음 작업을 시작해 본다.

워드프레스 미디어 라이브러리에 업로드

이제 다운로드한 소셜 공유 이미지 버튼들을 워드프레스에 저장해본다. 먼저, 미디어에서 라이브러리를 열고 들어간다

상단에 새로추가 버튼을 누른다.

업로드할 파일을 찾아서 선택을 해 준다.

이렇게 라이브러리에 이미지 파일들이 나란히 들어와 있는 것을 확인할 수 있다. 한번에 다같이 선택하여 업로드하면 된다.

업로드된 sns 이미지파일 중 하나를 클릭해 보면, 아래와 같이 오른쪽에 파일 URL주소가 지정된 것을 볼 수 있다. 이것은 나중에 공유 코드 작성용으로 이용될 예정이다.

이제 다음 작업으로 넘어가 본다.

카카오톡 개발자 자바 스크립트 키 넣어주는 방법

일단, 워드프레스에서 head & footer code 플러그인이 없다면, 설치를 해준다. 그런 다음, 카카오 디벨로퍼스에서 아까 생성되었던 자바스크립트 키를 카피해서 아래의 빨간 줄 부분에 따옴표 안에 넣어준다. 이때 집중을 좀 해야 된다.

<!--  footer code -->

<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>

이제 head & footer code 플러그인의 설정으로 들어가서 도구에서 footer code란에 위의 자바스크립트 키가 들어간 주소 전체를 넣어주고 변경사항 저장을 해준다.

워드프레스에 카카오톡 및 소셜 SNS 공유 코드 넣기

이제, 몇 가지만 더 해주면 된다.

먼저, 아까 저장해 놓은 소셜 이미지 각각의 파일 url을 불러온다. 트위터, 밴드, 네이버블로그, 페이스북, 카카오톡 모두 이미지를 누르면 옆에 보이는 url이 바로 뜬다.

워드프레스에 텍스트파일이 다운로드되지 않아서, 길지만 그래도 올려놓는다.

아래에서 노란 하이라이트부분에 미디어 라이브러리에 아까 다운로드한 이미지 파일 옆의 url 주소를 복사해서 붙여넣기를 하나하나 해주는 과정이다. 각각의 주소가 다 틀리기 때문에 해당하는 주소를 정확히 복사해서 잘 붙여넣어 준다.


<!--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의 연결 코드 url주소가 다 입력이 되었다면, 워드프레스에 ad inserter 플러그인을 열어준다. ad inserter는 애드센스 광고 배치 등에 관련한 플러그인이다. 만일 없다면 설치를 해준다.

그리고 ad inserter의 setting으로 들어가서 설정 화면에 들어간다. 그럼 옆으로 광고를 설정하는 지정 화면들이 나오는데, 여기서 위치별로 광고 코드를 넣어서 설정을 해주는 것이다. 우리는 sns 공유 버튼을 광고처럼 설정해볼 예정이다.

이미 2개의 광고 옵션을 지정해 놓은 터라, 3번 공란에 아까 코드들을 넣어둔 sns 공유버튼 스크립트 주소를 붙여넣기 해준다. 스크립트가 방대한 지라, 주의해서 잘 카피하셔야 한다.

붙여넣기를 한 다음에는, 이 공유버튼을 넣을 위치를 지정해줄 차례다. 아래에서 post를 선택하여 준다. 글 안에서의 위치는 문단 앞이나 이미지 앞 등, 왼쪽 아래에서 지정하고, 오른쪽에는 왼쪽이나 중간 오른쪽 등의 위치도 정해준다. 다 정해주었다면, 오른쪽 상단에 save setting을 눌러서 저장을 완료해 준다.

CSS 사용자 정의에서 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;
}

워드프레스로 가서 외모 => 사용자 정의하기 => 추가 css에 코드를 넣어주면 되는 것이다. 그리고 공개 버튼을 꼭 눌러서 저장을 해줘야 한다.