오늘은 블로그에 페이스북, 트위터, 카카오톡과 같은 소셜 SNS 공유버튼을 다는 방법에 대해 소개해드리겠습니다. 현재 제 블로그를 보시면 컴퓨터 큰 창으로 봤을 때는 왼쪽에 페이스북, 페메(페이스북 메신저), 카톡, 라인, 트위터의 소셜 공유 버튼이 달려 있는 것을 볼 수 있습니다. 핸드폰 스마트폰으로 보면 화면 상단에 SNS 공유 버튼이 있습니다. 지금까지 몇몇 분들이 문의를 주셨는데 이 글을 통해 간단하고 쉽게 본인의 블로그에 적용해보시기 바랍니다.

전혀 어렵지 않으니 무료 가입부터 세부설정까지 천천히 따라와주시기 바랍니다.

Addthis 가입하기 방법

이 서비스를 이용하기 위해서는 Addthis라는 사이트에 무료가입을 해야 합니다. 우선 사이트에 접속을 하기 위해 인터넷에 Addthis를 검색하시거나 아래 링크를 통해 접속하시기 바랍니다.

애드디스 : https://goo.gl/AUnvns

▼Addthis 홈페이지

메인화면 중간 하단부분에 차례대로 구글, 페이스북, 이메일로 회원가입을 할 수 있느 버튼 3개가 나란히 옹기종기 모여 있습니다. 이 중에서 본인이 원하는 것을 선택합니다. 저는 간단하게 오른쪽의 Continue with Email 버튼을 눌러서 이메일로 등록을 해보겠습니다.

가장 상단에 이메일주소를 넣고 아래에 비밀번호를 쓰고 비밀번호를 한 번 더 반복해서 써주고 아래 국가 부분은 그대로 United States로 해주셔도 상관 없습니다. 그후 아래의 Let's Get Started를 눌러서 가입절차를 마치시면 되겠습니다.

카카오톡 페이스북 SNS 공유버튼 다는 방법

가입이 완료되면 Select a Tool 도구선택 화면으로 자동으로 이동하게 되는데요. 팔로우 버튼, 관련 글, 공유 버튼 등의 기능을 모두 이용할 수 있습니다. 이중에서 가장 왼쪽 위에 있는 Share Buttons를 누릅시다.

공유버튼을 누르면 또다시 그 안에서 여러 기능들을 설정할 수 있는데, 글 사이에 공유버튼을 넣거나 버튼 하나를 누르면 공유버튼이 상단으로 펼쳐지는 기능이나 팝업창이 뜨면서 이 글을 공유하시겠습니까? 라는 것을 고를 수 있습니다. 홈페이지 블로그 사이트의 사이드에 소셜 공유버튼 붙이기를 하고 싶다면, 가장 위의 Floating을 선택하고 아래의 Continue를 누릅니다.

그후 가장 위를 보면 위치를 설정할 수 있습니다. Desktop이 컴퓨터 화면이고 Mobile이 스마트폰에서 보여지는 모습입니다. 모바일을 클릭하고 Bottom을 Top으로 변경하면 SNS 공유버튼이 화면 상단으로 이동하게 됩니다.

이제 Social Networks 부분을 봅시다. 여기에서는 기본적으로 Automatic으로 되어 있고 이것이 권장사항이라고 나오지만, 이 부분은 무시하고 그 아래의 Select your won을 누릅시다.

그러면 페이스북, 트위터, 이메일, 핀터레스트, 애드디스 순으로 소셜공유버튼이 나오는데 오른쪽의 X버튼을 눌러서 삭제하실 수 있고, 각각의 버튼을 마우스로 드래그 해서 위치를 조정할 수 있습니다. 우리는 카카오톡을 추가하고 싶기 때문에 ADD MORE SERVICES 버튼을 누릅시다.

SELECT SERVICE 아래 검색창에 kakao라고 입력을 하면 카카오에서 만든 소셜 서비스가 뜨게 됩니다. 위에 있는 Kakao가 카카오스토리를 말하고 그 아래의 Kakao Talk이 우리가 잘 알고 있는 카카오톡이니 이것을 선택해주면 되겠습니다.

그다음으로는 SNS 공유버튼의 위치 미세조정을 해보겠습니다. 공유버튼을 왼쪽이나 오른쪽 등의 위치를 정했다면, 화면의 어느 정도쯤에 위치하게 만들 수 있는 기능입니다. 왼쪽 하단에서 Advanced Options를 누릅니다.

그후 Extra Appearance Settings를 누르고 Desktop Vertical Offset을 누른 후 Top을 선택하고 원하는 위치의 퍼센테이지를 입력해주시면 되겠습니다.

모든 설정이 완료되었다면 Save & Continue라는 파란 버튼을 누릅니다. 그리고 티스토리, 구글블로그 등의 웹사이트라면 HTML WEBSITE를 선택한 후 1번에 있는 코드를 복사해줍니다. 오른쪽의 COPY 버튼을 누르셔도 됩니다.

그다음 티스토리 블로그의 경우 블로그 관리화면에서 꾸미기의 HTML/CSS의 HTML의 가장 아래에 있는 </body> 코드 바로 위에 방금 복사한 태그를 붙여넣기 해준 후 저장 버튼을 눌러주시면 되겠습니다.

그리고 본인의 블로그를 확인해보면 우리가 원하던 그 디자인, 그 모양으로 소셜네트워크 서비스 SNS 공유버튼이 잘 구현된 것을 확인할 수 있겠습니다.