티스토리 뷰
블로그에 SNS 공유 버튼을 달아보려고 합니다. Tistory 에서 제공하고 있는 기본 SNS 버튼이 아닌 외부 Add-on을 통한 SNS 버튼을 달려고 합니다.
제가 이번 리뷰에 작성할려고 하는 Add-on 은 Share This 에서 제공하고 있는 Share 버튼입니다.
ShareThis
http://sharethis.com/
적용 방법은 어렵지 않습니다. 첫 페이지 접속과 동시에 아래와 같이 인기 있는 버튼을 제공하고 있으며, 기본 값의 코드를 로그인 또는 회원가입을 통해서 간단히 확인하고 적용 가능합니다. 두번째 방법으로 More Options 를 통해서 다양한 SNS 공유 버튼과 버튼의 디자인 또는 위치를 선택 가능합니다.
More Button
1 단계로 적용할 페이지를 선택합니다. 아래 적용 가능한 페이지를 제외한다면 기본 값은 Website 를 선택하면 됩니다.
2단계
2번째 단계로 Button 또는 Bars 를 선택할 수 있습니다. 각각 3개로 적용이 가능한 메뉴를 제공하고 있습니다. 원하시는 스타일을 선택하시고 다음 단계로 넘어가시면 됩니다.
Button
단순 아이콘만 적용, 몇몇이나 공유했는지에 대한 정보가 제공되는 메뉴가 2개의 스타일로 제공됩니다.
Bars
Bars는 페이지를 이동해도 항상 따라 붙는 메뉴입니다. 상단, 하단, 왼쪽 화면에 붙어있는 아이콘이 적용 가능합니다.
3번째 단계
이제 원하시는 SNS 버튼을 선택하시면 됩니다. Standard Services 와 Add-ons로 분리되어 있습니다. 왼쪽에는 Selected Services 목록들이 표시되고, 마우스 드래그를 통해서 메뉴 위치를 추가 할 수 있습니다.
Standard Services는 단순히 공유를 위한 버튼을 제공하고, Add-ons 는 좀더 세밀하게 적용이 가능합니다.
아래와 같이 원하는 서비스 버튼을 선택하여 드래그 하시면 Preview 화면에 미리보기가 보여지게 됩니다.
* 실제 적용하는 페이지의 가로 사이즈에 따라 보여지는 모습이 다를 수 있습니다.
삭제는 버튼위에 마우스를 올리면 x 버튼이 뜨게 되니 클릭하시면 삭제가 됩니다. 주의하실 점은 LinkdIn 이 기본으로 떠있습니다. 해당 버튼을 처음에 지우고, 다시 추가 하고, 다시 삭제를 하게 되면 버그가 일어납니다. Preview에서 사라지지 않고 그대로 남아있는 버그가 생겨서 순서를 정하는데 문제가 생깁니다.
적용이 완료되면 아래 FINISH : Get the Code 버튼을 클릭합니다.
로그인 또는 회원가입
아이디를 가지고 있으시다면 Login 하시면 되지만, 처음 사용자 라면 아래 내용을 입력해 주셔야 합니다.
이메일 주소, Domain, 비밀번호, 비밀번호 재확인 4개의 탭만 입력하고 약관 동의만 하시면 회원 가입이 완료 됩니다.
도메인 주소 입력서 예를 들어 http://test.com 이라고 한다면 http:// 부분을 제외한 test.com 으로 입력 해 주셔야 합니다.
회원 가입 또는 로그인이 완료되면 실제 코드를 볼 수 있습니다. 그전에 view 모습을 선택 해주셔야 합니다. 아래와 같은 초록색 아이콘이 있을 경우 Multi Post 또는 Direct Post 를 선택하셔야 합니다. Multi Post의 아래 초록색 버튼을 클릭하면 예제처럼 창이 보이게 되고, 다이렉트 Post 를 클릭하면 선택 후 공유할 내용 작성 창이 나타나게 되는 차이가 있습니다. * 아래 버튼이 없다면 기본 값으로 두시면 됩니다.
소스코드 확인
창을 아래로 내리면 아래와 같이 소스코드가 보이게 됩니다.
소스코드는 화면에 보여주는 부분과 javascript 부분 2개로 분리되어 있습니다. 이 코드들을 복사해서 특정 위치에 붙여 넣으시면 됩니다.
소스코드 적용
tistory 관리자 메뉴의 HTML/CSS 편집 으로 들어가셔서 skin.html 을 수정해주시면 됩니다.
위에 script 부분을 복사하여 head 부분에 적용하시면 됩니다. 저는 주석을 달아서 아래와 같이 추가하였습니다.
다음은 메인 아이콘이 표시되는 부분입니다. <span....... 부분 전체를 드래그 하여 복사합니다.
저는 최상단에 포함하도록
블로그에 SNS 공유 버튼을 달아보려고 합니다. Tistory 에서 제공하고 있는 기본 SNS 버튼이 아닌 외부 Add-on을 통한 SNS 버튼을 달려고 합니다.
제가 이번 리뷰에 작성할려고 하는 Add-on 은 Share This 에서 제공하고 있는 Share 버튼입니다.
ShareThis
http://sharethis.com/
적용 방법은 어렵지 않습니다. 첫 페이지 접속과 동시에 아래와 같이 인기 있는 버튼을 제공하고 있으며, 기본 값의 코드를 로그인 또는 회원가입을 통해서 간단히 확인하고 적용 가능합니다. 두번째 방법으로 More Options 를 통해서 다양한 SNS 공유 버튼과 버튼의 디자인 또는 위치를 선택 가능합니다.
More Button
1 단계로 적용할 페이지를 선택합니다. 아래 적용 가능한 페이지를 제외한다면 기본 값은 Website 를 선택하면 됩니다.
2단계
2번째 단계로 Button 또는 Bars 를 선택할 수 있습니다. 각각 3개로 적용이 가능한 메뉴를 제공하고 있습니다. 원하시는 스타일을 선택하시고 다음 단계로 넘어가시면 됩니다.
Button
단순 아이콘만 적용, 몇몇이나 공유했는지에 대한 정보가 제공되는 메뉴가 2개의 스타일로 제공됩니다.
Bars
Bars는 페이지를 이동해도 항상 따라 붙는 메뉴입니다. 상단, 하단, 왼쪽 화면에 붙어있는 아이콘이 적용 가능합니다.
3번째 단계
이제 원하시는 SNS 버튼을 선택하시면 됩니다. Standard Services 와 Add-ons로 분리되어 있습니다. 왼쪽에는 Selected Services 목록들이 표시되고, 마우스 드래그를 통해서 메뉴 위치를 추가 할 수 있습니다.
Standard Services는 단순히 공유를 위한 버튼을 제공하고, Add-ons 는 좀더 세밀하게 적용이 가능합니다.
아래와 같이 원하는 서비스 버튼을 선택하여 드래그 하시면 Preview 화면에 미리보기가 보여지게 됩니다.
* 실제 적용하는 페이지의 가로 사이즈에 따라 보여지는 모습이 다를 수 있습니다.
삭제는 버튼위에 마우스를 올리면 x 버튼이 뜨게 되니 클릭하시면 삭제가 됩니다. 주의하실 점은 LinkdIn 이 기본으로 떠있습니다. 해당 버튼을 처음에 지우고, 다시 추가 하고, 다시 삭제를 하게 되면 버그가 일어납니다. Preview에서 사라지지 않고 그대로 남아있는 버그가 생겨서 순서를 정하는데 문제가 생깁니다.
적용이 완료되면 아래 FINISH : Get the Code 버튼을 클릭합니다.
로그인 또는 회원가입
아이디를 가지고 있으시다면 Login 하시면 되지만, 처음 사용자 라면 아래 내용을 입력해 주셔야 합니다.
이메일 주소, Domain, 비밀번호, 비밀번호 재확인 4개의 탭만 입력하고 약관 동의만 하시면 회원 가입이 완료 됩니다.
도메인 주소 입력서 예를 들어 http://test.com 이라고 한다면 http:// 부분을 제외한 test.com 으로 입력 해 주셔야 합니다.
회원 가입 또는 로그인이 완료되면 실제 코드를 볼 수 있습니다. 그전에 view 모습을 선택 해주셔야 합니다. 아래와 같은 초록색 아이콘이 있을 경우 Multi Post 또는 Direct Post 를 선택하셔야 합니다. Multi Post의 아래 초록색 버튼을 클릭하면 예제처럼 창이 보이게 되고, 다이렉트 Post 를 클릭하면 선택 후 공유할 내용 작성 창이 나타나게 되는 차이가 있습니다. * 아래 버튼이 없다면 기본 값으로 두시면 됩니다.
소스코드 확인
창을 아래로 내리면 아래와 같이 소스코드가 보이게 됩니다.
소스코드는 화면에 보여주는 부분과 javascript 부분 2개로 분리되어 있습니다. 이 코드들을 복사해서 특정 위치에 붙여 넣으시면 됩니다.
소스코드 적용
tistory 관리자 메뉴의 HTML/CSS 편집 으로 들어가셔서 skin.html 을 수정해주시면 됩니다.
위에 script 부분을 복사하여 head 부분에 적용하시면 됩니다. 저는 주석을 달아서 아래와 같이 추가하였습니다.
다음은 메인 아이콘이 표시되는 부분입니다. <span....... 부분 전체를 드래그 하여 복사합니다.
저는 최상단에 포함하도록 부분 위에다가 적용했습니다.
ctrl + f 버튼을 클릭하시고 검색하시면 표시가 됩니다.
2개의 코드를 모두 추가하고 저장을 하시면 됩니다.
아래처럼 코드가 추가된 모습입니다. 저는 ShareThis 버튼, Google +1 버튼, Facebook Share 버튼, Tweet Share 버튼, StumbleUpon 공유 버튼을 추가했습니다. 추가는 했지만 얼마나. 공유가 이루어 질지는 의문이네요.
마무리
이상으로 블로그에 Share This에서 제공하는 Share 버튼을 추가해 보았습니다. 생각보다 쉽게 적용이 가능하고, 외국 사이트이다보니 공유버튼이 다양하다는 점입니다. 제가 사용하는 SNS 버튼들이 존재하기에 이 사이트를 사용하게 되었습니다.
ctrl + f 버튼을 클릭하시고 검색하시면 표시가 됩니다.
2개의 코드를 모두 추가하고 저장을 하시면 됩니다.
아래처럼 코드가 추가된 모습입니다. 저는 ShareThis 버튼, Google +1 버튼, Facebook Share 버튼, Tweet Share 버튼, StumbleUpon 공유 버튼을 추가했습니다. 추가는 했지만 얼마나. 공유가 이루어 질지는 의문이네요.
마무리
이상으로 블로그에 Share This에서 제공하는 Share 버튼을 추가해 보았습니다. 생각보다 쉽게 적용이 가능하고, 외국 사이트이다보니 공유버튼이 다양하다는 점입니다. 제가 사용하는 SNS 버튼들이 존재하기에 이 사이트를 사용하게 되었습니다.
'Web' 카테고리의 다른 글
| facebook 프로필을 한글 주소로 얼굴책.한국 (0) | 2012.05.22 |
|---|---|
| 페이스북, 애플 등 이메일로 가입한 아이디 변경하기! (0) | 2012.05.11 |
| tistory Edit 에 추가된 문단 간격 없음 (0) | 2012.04.09 |
| Tistory 관리자 페이지 개편!! (0) | 2011.10.26 |
| ZUM의 각종 설정을 저장하려면?? (0) | 2011.10.24 |
댓글