콘텐츠로 건너뛰기

워드프레스 카카오톡 공유하기 버튼 넣기 (feat. 스크립트)

  • 네이버 블로그 공유하기
  • 카카오톡 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
워드프레스 카카오톡 공유하기 버튼 넣기 (feat. 스크립트)

안녕하세요. 애드센스 스쿨 인돈사입니다. 웹서핑을 하다보면 워드프레스에 카카오톡 공유하기 버튼을 비롯해 카카오스토리, 네이버블로그, 페이스북 등 다양한 SNS로 내 워드프레스 컨텐츠를 퍼갈 수 있는 버튼을 제공하는 경우를 많이 볼 수 있는데요. 오늘은 워드프레스 카카오톡 공유하기 버튼을 넣는 방법에 대해서 알아보도록 하겠습니다.

공부하기 전에 혜택이 많아지고 있는 WP 팔로워즈 아직도 가입 안하셨다면 아래글을 참고해서 신청하세요~!!

📌 WP 팔로워즈 모집 안내


아이콘 이미지 라이브러리 준비하기

우리 워드프레스에 카카오톡 공유하기를 비롯한 여러가지 SNS 공유 버튼들을 추가하려면 이미지 파일이 필요하겠죠? 제가 준비를 해 뒀습니다. 아래 파일을 클릭하여 다운로드 받아 주세요.

📌 SNS 아이콘 다운로드

다운로드 받아서 압축을 풀면 아래와 같이 5개의 그림파일이 있을것입니다. 확인 후 다음단계로 고고~

워드프레스 관리자 페이지에 로그인 하시면 ‘미디어’ 라는 메뉴 아래에 ‘라이브러리’라는 메뉴를 클릭 해 주세요.

그러면 오른쪽 화면에 지금까지 업로드 하고 이용했던 이미지들이 나오는데요, 위에 있는 ‘새로추가’를 눌러서 방금 압축을 풀었단 5개 파일을 업로드 해 줍니다.

파일 5개를 끌어다 놓으셔도 되고, 파일을 선택해도 됩니다. 어떤 방식으로든 5개의 파일을 업로드 해 줍니다.

5개 모두 업로드가 잘 되었습니다. 하나씩 클릭해서 이미지 주소를 복사해 두어야 하는데요, 제일 먼저 보이는 트위터 이미지를 클릭해 보겠습니다.

오른쪽에 보시면 파일URL이 있죠? 아마 여러분들의 워드프레스 주소가 나올건데요, 이것을 복사해서 메모장같은곳에 잘 적어 둡니다. (5개 모두 이미지 주소를 복사해 두세요.)

카카오 개발자 키 적용하기

카카오 애플리케이션 키 생성

워드프레스 카카오톡 공유하기 버튼을 넣기 위해서는 카카오 개발자에서 스크립트 키를 발급 받아야 합니다. 따라오시면 그리 어려운 작업이 아니니 아래 과정을 따라해 보세요.

📌 카카오 개발자 홈페이지 바로가기

우측 상단에 로그인 버튼이 있습니다. 카카오 계정으로 로그인 하면 되는데, 혹시 가입을 하라는 메세지가 뜨면 가입을 해 주세요. 저는 예전에 가입을 해 둔건지 정확하게 기억이 안나는데 그냥 로그인이 되었습니다. 이후 내 애플리케이션 버튼을 눌러주세요.

애플리케이션 추가하기 버튼을 누르고 정보를 넣어 줍니다.

굳이 아이콘은 필요없고 앱이름과 사업자명은 각자 알아서 넣어주세요. 이 정보들은 사용자가 카카오 로그인을 할 때 표시되는 정보이며 우리는 카카오 로그인 기능을 사용하지 않을것이기 때문에 큰 의미는 없습니다. 운영정책 위반 안한다고 체크해 주시고 저장!

저장을 하면 바로 4개의 앱키가 나옵니다. 이 중 3번째 JavaScript 키를 복사해 두세요. 다음단계로 넘어갈게요

왼쪽 메뉴에 보시면 앱 설정>>플랫폼 메뉴가 있습니다. 클릭해 주세요.

우리는 웹사이트에서 카카오톡 공유 기능을 사용할 것이기 때문에 웹플랫폼을 등록해야 합니다 .마지막에 있는 웹 플랫폼 등록 버튼을 눌러 주세요.

http / https 를 포함하여 홈페이지 주소를 입력하고 저장을 눌러 주세요. 기본도메인은 가장 첫번째 도메인이 자동으로 입력되는것 같습니다.

발급한 카카오 애플리케이션 키를 워드프레스에 적용하기

이제 내 워드프레스로 돌아가서 카카오 개발자 스크립트를 적용해야 합니다. 플러그인>>새로추가를 눌러서 아래와 같이 검색해 주세요

위 플러그인은 워드프레스 헤더와 푸터에 코드를 삽입할 수 있는 플러그인입니다. 구글 서치콘솔이나 애드센스 스크립트 삽입, 또는 네이버 웹마스터도구 소유인증 확인 등 사이트 헤더에 코드를 넣어 줘야 할때 편하게 자주 쓰입니다. 설치하고, 활성화하면 도구>>Head & Footer Code 메뉴가 생깁니다.

클릭하면 오른쪽에 코드를 넣을 수 있는 화면이 나옵니다. FOOTER Code 항목에 처음 저장해 두었던 자바스크립트 키를 넣어 줘야 합니다.

아래 코드파일(텍스트파일입니다)을 다운로드 하신 후 자바스크립트 키 부분만 수정한 후 복사, 붙여넣기 하시면 됩니다.

내 자바스크립트 키를 넣을때 따옴표를 포함해서 넣으셔야 합니다. (‘내 자바스크립트키’) << 이렇게말입니다. 따옴표를 지우시면 작동을 안합니다.

📌 카카오 개발자 스크립트 소스코드 보기(새창)

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

내 워드프레스에 카카오톡 공유하기 코드 넣기

필요한 플러그인 설치하기

먼저 내 워드프레스 특정 위치에 코드를 넣을 수 있는 플러그인을 하나 설치 할 것입니다. 플러그인>>새로추가 메뉴로 이동해 주세요

ad inserter 라고 검색하고 아래와 같은 플러그인을 설치, 활성화 합니다.

이 플러그인은 워드프레스 구조 안에서 다양한 위치에 원하는 코드를 넣어 작동시켜주는 플러그인입니다. 애드센스 코드를 넣을때도 많이 사용하니 알아두시면 도움이 될 것입니다. 플러그인을 활성화 하고 나면 설정>>ad inserter 메뉴가 생깁니다.

클릭해 볼까요?

위 화면이 나오면 잘 설치 된 것입니다. 위에 16까지의 숫자는 16개의 코드를 관리할 수 있다는것이고 아래쪽에 포스트, 홈페이지, 카테고리페이지 등등은 어디에 적용될 코드인지를 고르는것입니다. Insertion은 어느 위치에 코드가 삽입될 것인지 설정하는 항목입니다. Alignment는 정렬입니다. 왼쪽 오른쪽 센터 등을 설정할 수 있습니다.

카카오톡 공유버튼 등 SNS 공유 관련 코드 삽입하기

잘 모르겠으니 눈으로 한번 봅시다. 홈페이지로 이동하면 위쪽에 Ad inserter 라는 메뉴가 있습니다. 클릭 해 볼까요

클릭을 하면 위처럼 색깔표시가 되면서 어떤 위치에 코드가 들어가는지 확인할 수 있습니다.

가장 최근에 알려드렸던 포스트를 열어 보았습니다 .Before Post 위치를 선택하면 해당 부분에 코드를 넣을 수 있군요. 다시 관리자 메뉴로 돌아와서 설정>>Ad inserter 메뉴를 클릭해 줍니다. (아, 홈페이지 상단에 있는 Ad inserter 메뉴를 한번 더 클릭하면 미리보기는 꺼집니다)

코드는 아래에 적어 드릴거라 모자이크 처리했습니다. 설정값 부터 보세요. 저는 포스팅과 페이지 그리고 홈페이지에 체크를 했습니다. 왜냐면 워드프레스 따라오세요 무료강의는 워드프레스 페이지에 작성되어 있고 그것이 홈페이지 첫화면으로 설정되어 있기 때문입니다.

이부분은 각자 환경에 맞춰 설정하시면 되고 코드 삽입 위치는 Before content 로 설정하였습니다. (처음에 Before Post로 했더니 위치가 마음에 안들어서 바꿨습니다 이런식으로 마음에 드는 위치로 수정하셔도 됩니다.) 설정이 끝나면 나의 1번 광고 슬롯 설정은 ‘워드프레스 SNS 공유 버튼들’로 설정된 것입니다.

여기에 사용된 코드는 아래에 올려두겠습니다. 다운로드 후 복사 붙여넣기 해서 Ad inserter 1번슬롯에 넣으시고 이미지 주소를 수정해 주세요. (맨 처음에 미디어 라이브러리에 업로드하고 메모해 둔 주소들을 각 항목에 맞게 넣어주시면 됩니다)

📌 워드프레스에 SNS 버튼 추가하기 소스코드 보기(새창)

공유버튼의 순서를 바꾸려면 주석처리 되어 있는부분을 한개의 세트라고 생각하시고 통째로 옮기면서 확인해 보시면 됩니다.

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

이부분에서는 별도로 수정할 것이 없습니다.

마치며

워드프레스 따라오세요 사이트에 잘 적용이 된건지 확인을 한번 해 볼까요?

오~ 꽤 마음에 들게 잘 적용이 된 것을 볼 수 있습니다. 제가 하나씩 눌러봤는데 다 잘 작동하는것 같습니다. 조만간 워드프레스 따라오세요 블로그 공유 이벤트를 해 봐야 겠습니다. 오늘은 코드를 넣는 부분이 조금 들어간…. 약간을 어렵게 느껴질 수도 있는 강의였는데요. 저도 코딩에 소질이 있는 편이 아니라서… 소스코드는 구글링해서…. 나온 워드프레스 정보꾸러미 블로그를 참고하였으며 여러분들이 사용하기 편하도록 약간 수정하였습니다. (워드프레스 하려면 모를 수 없는 블로그죠…ㅎ감사합니다.)

저도 잘 모르는 부분이라 최대한 쉽게 설명 한다고 했는데도 혹시나 포기했을지도 모르는 분들은 아래 플러그인을 활용해서 워드프레스에 카카오톡 등 SNS 공유하기 버튼을 넣는 방법에 대해서 알아보세요

📌 워드프레스 카카오톡 공유 버튼 넣기 (feat. 플러그인, 무료)

아직도 워드프레스가 없으시다면 클라우드웨이즈 서버에는 무료체험이 3일 주어지니 아래 강의를 따라하면서 한번 개설해 보시면 좋을것 같습니다.

📌 WP 따라오세요 (feat. 클라우드웨이즈)
📌 클라우드웨이즈 서비스 유료전환 회원 추가혜택 안내(feat. WP팔로워즈)

감사합니다.

'WP 따라오세요'에는 쿠팡파트너스 등 제휴링크가 포함되어 있으며 수수료를 제공받을 수 있습니다.