Internet/WebSite

블로그 공유버튼 만들기 쉐어홀릭 [Shareaholic]

by 1730 2014. 10. 3.

SNS 등에 관심글이나 이슈글을 공유 할 때 방문자가 링크를 걸기 쉽게 하기 위해 각 SNS 에서는 공유 버튼을 지원하고 있지만 크기와 모양,디자인이 일관성이 없고 각 사이트의 특색을 살리기 때문에 운영중인 블로그나 사이트에 미관 상 좋지 않아 일관성 있고 설치가 쉬운 공유 버튼을 지원하는 사이트가 많은데 그중 한 사이드인 Shareaholic 에서 지원하는 공유 버튼입니다. 쉐어홀릭은 공유버튼, 관련글, 분석 등의 기능을 지원하며, 소스코드를 적용하고 디자인을 변경하여도 코드 변경 없이 변경된 디자인이 적용 되어 위치 변경이 아니면 적용한 코드를 추가 변경할 필요가 없습니다. 사이트가기


기본 디자인의 공유 버튼과 관련글 입니다.

가입하지 않고 공유버튼 생성 단계를 진행 할 수 있지만 사이트 가입을 해야만 소스코드를 얻을 수 있기 때문에 가입을 하고 공유버튼을 생성합니다. 이메일과 비밀번호만 입력하면 간단하게 계정이 생성됩니다.


가입 후 자신의 블로그 주소와 이름을 입력하고 이외 항목은 비워두어도 됩니다.


셋업코드를 </body> 앞 에다가 넣어주고 생성된 공유 버튼은 사이드바,본뮨 상,하단 등 넣고자하는 곳에 복사하여 넣으면 됩니다.


"Get Setup Code" 버튼으로 코드를 얻어 <head></head> 사이에 넣으라고 되었지만 크롬 브라우저외에 브라우저에서 정상작동을 하지 않아 <body> 태그에 넣습니다.

"Verify Site" 버튼으로 setup code 인증을 합니다.

"Floated Share Buttons" 브라우저 좌/우에 붙는 플로팅 공유 버튼 설정과 활성을 합니다.

"Share Buttons" 공유 버튼을 생성합니다.

"Related Content" 블로그의 관련글 6개를 썸네일 형식으로 보여줍니다.

"Flollow Buttons" SNS 공유버튼을 만듭니다.

"Code Snippet" 각 생성된 버튼의 코드를 얻습니다.


공유 버튼은 많은 디자인과 사이트를 지원합니다. 


관련글은 6개의 관련글을 노출 시키고 5개의 썸네일 테마와 1개의 text 형식을 지원고 반응형으로 사이즈가 자동 조절 됩니다.

.

팔로우 버튼은 원형에 2가지 사이즈 버튼만 있습니다. 팔로우 버튼은 링크만 걸어주는 형태로 쉐어홀릭의 버튼이 로딩이 느린 감이 있기 때문에 아이콘만 있다면 직접 만들어 사용하셔도 좋을 듯 합니다.


공유 버튼을 사용하고 나면 팝업창이 뜨는데 세팅에서 두번째 항목 sharing 항목의 Show Post-Sharing Dialog 체크 해제하면 팝업창이 뜨지 않습니다.