홈페이지/블로그에 페이스북이나 트위터로 공유 기능 쉽게 추가하기
홈페이지나 블로그 또는 그 외 웹 서비스 공간에 소셜 미디어 공유 위젯을 쉽게 추가하는 방법입니다.
이를 추가하면 쉽게 소셜 미디어로 운영중인 링크를 공유할 수 있습니다.
대표적으로 페이스북이나 트위터가 있겠지요.
이러한 소셜 미디어 공유 위젯을 쉽게 추가할 수 있도록 해주는 서비스 2가지에 대해 알려드리도록 하겠습니다.
우선 ShareButton이라는 곳을 소개해 드립니다.
사이트 : http://sharebutton.net/
해당 사이트에 접속하시면 다른 설명이 필요 없을 정도로 간단하고 직관적으로 사용법을 알 수 있습니다.
아래와 같이 좌측 상단 세로 정렬되는 스타일과
우측 하단 가로 정렬되는 스타일로 제공됩니다.
좌측 상단 세로 정렬 스타일은 해당 홈페이지에 vertical share 버튼을 누르면 데모와 함께 적용 코드가 선택됩니다.
우측 하단 가로 정렬 스타일은 해당 홈페이지에 horizontal share 버튼을 누르면 데모와 함께 적용 코드가 선택됩니다.
마음에 드시는 스타일의 코드를 홈페이지나 블로그 등에 삽입하시면 적용이 완료됩니다.
티스토리의 경우 아래와 같이 관리자 홈페이지에서 HTML/CSS 편집 메뉴를 선택합니다.
HTML/CSS 화면 우측 상단에 HTML을 선택하고
HTML 소스에 <HEAD> 태그(HEAD 시작 태그)와 </HEAD> 태그(HEAD 마지막 태그) 사이에 복사한 코드를 추가합니다.
그리고 반드시 저장 버튼을 꼭 눌러 주세요.
이제 블로그에 접속하여 확인해 보시면 됩니다.
두 번째로 AddToAny라는 곳을 알려드립니다.
사이트 : https://www.addtoany.com/
해당 사이트에 접속하시어 Get the Share Buttons 이라는 버튼에 마우스를 가져가시면 위젯을 적용할 웹 서비스 형태를 고를 수 있습니다.
(혹은 https://www.addtoany.com/buttons/으로 접속하시어 고르셔도 됩니다.)
티스토리의 경우 Website를 선택하시면 무리없이 적용하실 수 있습니다.
다음으로 아래와 같은 화면이 나옵니다.
Type은 위젯 스타일을 고르실 수 있습니다.
Choose Services... 문구를 클릭하시면 적용할 소셜 미디어 서비스를 고르실 수 있습니다.
아래와 같이 매우 많은 소셜 미디어 서비스를 고르고 적용하실 수 있습니다.
기본적으로 Facebook, Twitter, Google+가 선택되어 있는데 드래그하여 왼쪽에 넣으면 리스트에서 제거되며,
왼쪽 리스트의 서비스를 클릭 하시면 오른쪽에 추가 됩니다. 추가된 서비스도 드래그하여 순서를 변경할 수 있습니다.
사용하실 서비스 선택이 완료되었으면 Done, go back 버튼을 클릭하여 돌아갑니다.
More Options은 한번 확인해 보시고 결정 하셨으면 Get Button Code 버튼을 누릅니다.
그러면 적용해야할 코드가 표시됩니다.
아래는 기본 설정인 페이스북, 트위터, 구글+ 항목으로 만들어진 코드입니다. 왼쪽에 보이는 이미지가 위젯 데모화면 이라고 보시면 됩니다.
해당 코드를 복사하여 홈페이지나 블로그 등 원하시는 위치에 삽입하시면 적용이 완료됩니다.
만약 티스토리의 경우 본문 내용의 상단 및 하단에 위젯을 적용하고 싶으시다면 HTML/CSS 편집 메뉴를 사용하지 않고 쉽게 적용할 수 있는 팁을 설명드립니다.
아래 그림과 같이 관리자 화면에서 플러그인 설정 -> 수익 -> Google AdSense (반응형)을 고릅니다.
광고 표시 부분을 위젯이 표시될 부분으로 생각하시고 복사한 코드를 붙여 넣어시면 됩니다.
(만약 Google AdSense가 적용되어 있으신 분들은 위젯의 위치를 Google AdSense 적용 코드 상단 혹은 하단에 맞추어 붙여 넣으시면 됩니다.)
물론 이 방법을 사용하지 않고 직접 HTML/CSS 편집 화면에서 위치를 찾아 적용 하셔도 상관 없겠지요 ?
참고로 제 블로그의 경우는 AddToAny를 위와 같은 방법으로 적용하였습니다.