ShareThis-Devices-Transformation

내 사이트 또는 블로그(구글블로그, 티스토리, 워드프레스)에 소설 버튼 추가하기( 쉐어디스 ShareThis: Free Social Share Buttons & Plugins for Websites & Blogs)

 

ShareThis-Devices-Transformation

소셜 버튼의 중요성

내 사이트 또는 블로그에 소셜버튼을 달아주면 더 많은 공유와 관심을 얻을 수 있어 보다 많은 노출의 기회를 얻을 수 있을 것입니다.

검색엔진최적화(검색결과 상위노출)에서 소셜이 어느 정도 중대한 영향을 미치고 있는가는 아래의 저희의 다른 게시글을 참조하여 주십시요.

[추천][왜, 소셜(SNS)의 반응(공유, 좋아요)는 중요한가 ?]구글 검색 상위노출 요소들의 가중치 공개(2014년 구글 검색순위의 상관성과 순위 요소들에 관한 연구 결과 : SEO Rank Correlations And Ranking Factors 2014 – Google U.S. –)

 

소셜 버튼을 추가할 수 있는 사이트중 저는 쉐어디스(http://www.sharethis.com/) 를 이용했습니다.

 

워드프레스

워드프레스는 일반 웹사이트(HTML), 구글 블로그, 티스토리와 달리 플러그인으로 쉽게 자동설치할 수 있습니다.  

(일반 웹사이트, 구글 블로그, 티스토리에 sharethis 버튼을 설치하고자 하시는 분들은 아래의 “사이트 빌더와 상관없은 기본 공통단계”부터 살펴보세요.)

ShareThis Share Buttons

워드프레스에 로그인합니다.

플러그인 -> 플러그인 추가설치 -> 검색창에 sharethis 입력 -> 설치 및 활성화

sharethis_1

구버전에서는 [설정]에 sharethis 가 추가된 것을 확인하실 수 있고 sharethis 를 click하시여 6단계에 걸처 자신에게 맞게 커스터마이징(개인설정)해주시면 됩니다.

sharethis_2

2019-09-21 기준 현재 버전에서는 아래와 같이 표시되며 4단계에 걸쳐  커스터마이징(개인설정)해줍니다.

  • inline 방식과 sticky 방식중 먼저 설정을 방식을 선택하시면 되고 나중에 다른 방식을 선택하거나 병행하여 사용할 수도 있고 설정도 변경할 수 있습니다.

sharethis_워드프레스_설정_1

  • 파란색 네모칸 안의 설정을 변경하시면 좌측 분홍색에 변경된 설정이 반영되어 표시되므로 확인하시면서 디자인해주세요. sharethis_워드프레스_설정_2_디자인
  • 이메일주소와 해당 이메일의 비밀번호를 입력해주면 등록이 완료되며 [General Settings] 설정이 끝납니다.
  • 초기 설정이 완료되면 ShareThis 의 [General Settings] 밑에 [Share Buttons]이 생성되며 여기서 사용할 버튼의 형식(inline 방식, sticky 방식)을 선택할 수 있고 디자인도 재설정할 수 있습니다.

sharethis_워드프레스_설정_3_디자인 및 설정의 수정

 

 

사이트 빌더와 상관없은 기본 공통단계

가입은 소셜(페이스북, 트위터, 구글플러스 등)중 하나로 가능합니다.

우선, 쉐어디스(http://www.sharethis.com ) 에 접속후 “Start with Share Buttons”를 선택하여 다음으로 넘어갑니다.

sharethis_Start with Share Buttons

버튼유형을 선택해줍니다.(Choose your button type) inline 은 가로 형태의 버튼이고 sticky 는 세로 형태의 버튼입니다.

sharethis_Choose your button type

세어디스를 설치할 플랫폼을 선택해주세요(Choose your CMS platform) 단계에서부터 사이트 빌더로 버튼 추가방법이 달라집니다.

 

일반 웹사이트, 구글 블로그, 티스토리에 sharethis 소셜 버튼 추가하기

세어디스를 설치할 플랫폼을 선택해주세요(Choose your CMS platform)
목록에 없는 구글 블로그, 티스토리, 일반 웹사이트들은 </>HTML 을 선택해주시고 code를 얻어 해당 구글 블로그, 티스토리, 일반 웹사이트들에 code를 넣어 주면 됩니다. 워드프레스는 아래에서 다시 상세 설명해드리겠습니다.
sharethis_Choose your CMS platform

sharethis 계정이 없는 경우에는 계정을 새로 만들어야 합니다. sharethis_get the code

HTML Website

부족한 부분은 How to Install Share Buttons on a HTML Website 을 참조하세요.

플랫폼을 선택하십시오!

공유 버튼을 설치하려는 플랫폼 유형을 선택하여 경험을 한 단계 더 발전 시키십시오!

코드를 등록하고 받으십시오!

원하는대로 공유 버튼을 디자인했으면 마지막 페이지로 가서 코드를 받기 위해 등록하십시오!

스크립트를 복사하여 헤더에 붙여 넣기

등록 후 두 개의 코드를 받게됩니다.
첫 번째 코드 복사 버튼을 클릭 한 다음 닫는 </ head> 태그 바로 앞에 코드를 사이트 템플릿의 헤더에 붙여 넣습니다.

그런 다음 닫기 헤드 태그 바로 앞에 사이트 템플릿의 헤더에 코드를 붙여 넣습니다.
다음과 같아야합니다.

원하는 곳에 단추 복사 및 붙여 넣기!

이제 가장 좋은 부분은이 코드 줄을 원하는 곳으로 복사하고 좋아하는 모든 공유 버튼을 표시하십시오!

<div class =”sharethis-inline-share-buttons”> </ div>

 

구글 블로그

부족한 부분은  How to Install Share Buttons for Blogger 을 참조하세요.

“웹 사이트에 sharethis.js 설치”아래에 코드를 복사하십시오.

두 번째 섹션에서 코드를 다시 볼 수 있도록이 페이지를 열어 두십시오. 코드의 첫 부분을 복사하여 Blogger 계정으로 이동하십시오.

헤즈 업! Blogger는 XML을 사용하므로 코드의 한 부분을 변경해야합니다.


교체 “및 제품을” 고유 설치 내에서 <script> 태그 & A; 제품 “ 이 블로거 제대로 작동하기 위해서는한다. (블로거 전용!)



이제 Blogger에서 테마 → HTML 수정으로 이동합니다.

이제 ShareThis에서 복사 한 코드를 <head> 태그 사이에 붙여 넣습니다.

테마를 저장 한 후 공유 버튼을 추가하려는 페이지로 이동하십시오.

이제 ShareThis ‘복사 코드 페이지로 돌아가서 <div> 섹션을 복사하십시오.

복사 한 후에는 Blogger로 돌아가서 HTML을 수정하고 인라인 공유 버튼 ‘<div>를 추가하십시오

결과

참고로 구글블로그의 템플릿으로 동적뷰를 이용하시는 경우, 쉐어디스는 구글블로그에서 작동되지 않습니다.

 

 

 

티스토리

HTML Website 의 설치 방법을 따라 하시면 됩니다.

 

 

상세설정(Sharethis Platform)

대시보드에 해당하는 https://platform.sharethis.com/apps 에 접속하시면 각종 추가기능을 설정하여 이용할 수 있습니다.

app directory

[Sharing Tools], [Engagement Tools], [Privacy Tools], [Content Services]으로 구성되어 있습니다.

Sharing Tools

Inline Share Buttons, Sticky Share Buttons, Image Share Buttons, Custom Share Buttons 을 활성화하여 이용할 수 있습니다.

Image Share Buttons

이 버튼은 게시글, 페이지 내의 각각의 이미지마다 공유(share) 버튼을 넣을 수 있는 기능입니다.

sharethis_image share button

Engagement Tools

Follow Buttons, Reaction Share Buttons 을 활성화하여 이용할 수 있습니다.

Follow Buttons

워드프레스나 일반 웹사이트등에 쉽게 소셜 미디어 채널을 follow 할 수 있도록 버튼을 만들어주는 기능을 합니다. (Expand your web presence to your top social media channels)

Privacy Tools

GDPR Compliance Tool : 소비자에게 데이터 수집을 허용하거나 허용하지 않는 옵션을 제공하는 도구입니다

Content Services

Social A/B, Email List Builder 을 활성화하여 이용할 수 있습니다.

어떤 형태의 버튼이 효과적인지 실험할 수 있는 Social A/B(test) 와 Mail Chimp 와 통합할 수 있는 Email List Builder도 있습니다

Sharethis Platform_app directory

 

Social Ananlytics

sharethis 를 통해 이루어진 소셜의 action들과 해당 웹페이지를 쉽게 확인할 수 있습니다.

sharethis_Social Ananlytics

 

기타

물론 홈페이지나 쇼핑몰(website)에도 잘 되므로 적용해보시면 좋을 듯합니다.

 

sharthis 외의 소셜버튼 추가하기 솔루션 : addthis

또한 addthis를 이용하는 방법도 있으니 https://www.addthis.com/get/sharing?where=newsletter#.UBc-VWG0DNV로 접속하시여 이용하시는 것도 좋을 듯 합니다.

 

참고자료 : 1. How to Install ShareThis on WordPress

2. How to Install Share Buttons for Blogger

3. How to Install Share Buttons on a HTML Website