제 블로그에는 Addthis smartlayer 가 달려있습니다. 블로그의 왼쪽 상단과 오른쪽 하단에 뜨는 것인데요, 왼쪽 상단은 공유버튼, 오른쪽하단은 추천게시글이 뜹니다. 물론 기본제공하는 스마트레이어 같은 경우에는 공유버튼, 팔로우버튼, 추천게시글, 추천 컨텐츠 부분이 뜹니다. 자신이 필요한 부분만 선택해서 적용이 가능하기 때문에 필요한 것만 설치했습니다. 이렇게 스마트 레이어는 잘 적용해두면 활용도가 높습니다. 이제 Addthis smart layer의 설치 방법을 알아보도록 하겠습니다.
1. 설치
일단 설치 방법부터 알아보도록 하겠습니다. 일단 Addthis 사이트에 접속합니다.http://www.addthis.com/스마트레이어를 설치하려면 회원가입부터 해야 합니다. 회원가입을하면 스마트레이어를 통해서 얻어진 사이트 통계자료를 메일로 보내줍니다.
가입창입니다. 트위터, 페이스북 그리고 구글 플러스 계정으로 아이디를 만들 수 있으며 메일주소만 가지고 만들 수도 있습니다. 가입절차는 매우 간단한 편인데, 메일주소와 페스워드만 치면 가입이 완료됩니다.
가입을 완료한 뒤에https://www.addthis.com/get/smart-layers스마트레이어 페이지로 이동합니다.
여기서는 자신이 설치할 페이지의 디자인을 설정할 수 있는 부분입니다. 각 항목의 기능을 간략하게 알아보도록하겠습니다.
a. 팔로우 버튼
이 버튼은 오른쪽 상단에 뜨며 자신의 트위터, 페이스북, 링크드인, 구글 플러스 계정을 팔로우 할 수 있도록 해주는 버튼입니다.
더 보기를 눌리면 더 많은 추가 서비스 목록을 볼 수 있습니다.
b. 공유버튼
이 버튼은 페이스북이나 트위터, 구글 플러스등 다양한 소셜 사이트를 통해서 현재 페이지의 내용을 공유 할 수 있게 해주는 버튼 입니다. 이 버튼은 오른쪽에 위치할지, 아니면 왼족에 위치할지의 여부를 선택 할 수 있습니다. 공유버튼은 최대 6개까지 설정 가능합니다.
c. What's Next
용도를 가지고 한국식으로 해석해본다면 추천 게시글입니다.현재 보고있는 글과 유사한 성질의 글을 찾아서 추천해줍니다. 이 기능은 모바일 브라우저에서는 작동하지 않습니다. 참고로 여기서 뜨는 미리보기 이미지는 설치 후 약 일주일정도 지나야 정상적으로 뜹니다.
d. 추천 컨텐츠
블로그에서 현재 가장 인기가 좋은 글을 보여주는 곳입니다. 사이트 맨 아래쪽에 위치하게 됩니다.
e. 추가 옵션
색상테마를 지정할 수 있습니다. 테마는 투명, 흰색, 회색, 검정색 4가지를 지원합니다.
설정을 마치고 Generate Code를 눌리면 코드가 생성됩니다. Grab it을 눌러서 복사해주세요.
이제 티스토리 관리 > HTML/CSS 편집으로가서 skin.html을 복사합니다. 만약을 위해서 현재 스킨을 복사한뒤에 메모장에 백업을 합시다. 그리고 스킨의 맨 아래쪽으로 내려와서 <body> 태그 위쪽에 아까 복사했던 코드를 붙여 넣어줍니다.
<head>에 자바스크립트 코드를 붙여 넣어도 별 상관은 없지만, body 아래쪽에 넣어 놓으면 블로그 로딩속도에 약간 이득이 있습니다.
2.설정
<script type="text/javascript"></script> 사이에 있는 부분을 수정하여 설정을 할 수 있습니다.
addthis.layers({
'theme' : 'dark',
'share' : {
'position' : 'left',
'numPreferredServices' : 6
},
'follow' : {
'services' : []
},
'whatsnext' : {},
'recommended' : {}
});
기본 스크립트는 이런 형태입니다. 테마는 dark이고 share 버튼은 오른쪽, 팔로우 버튼, What's next,추천 항목이 설정되어있습니다. 여기서 원치 않는 항목은 삭제를 하면 됩니다.
예를 들어 저 같은 경우에는 추천 항목과 팔로우 버튼은 필요 없기 때문에 삭제를 하겠습니다.
addthis.layers({
addthis.layers({
'theme' : 'dark',
'share' : {
'position' : 'left',
'numPreferredServices' : 6
},
'whatsnext' : {}
});
그러면 코드를 이렇게 수정하면 됩니다.
3. 활용
테마는 추후에도 별도 설정이 가능합니다. dark, transparent, light, gray중 하나를 입력하면 됩니다.
그리고 컨텐츠를 잘 뜨게 하기 위해서는 도메인을 별도로 설정해주는 편이 좋습니다. 그래서
'domain' : '자신의 블로그 주소',
이렇게 설정을 해줍니다.
반응형 웹일 경우에는 모바일로 전환되는 해상도를 지정해줘야 합니다.
'responsive' : {
'maxWidth' : '979px',
'minWidth' : '0px'
},
maxwidth 수치 부터 모바일형 addthis로 전환됩니다.
3-2. 한글화
Addthis 스마트 레이어는 정식으로 한글을 지원하지 않습니다. 그래서 코드를 통해서 직접한글화를 해줘야 합니다. 이제 한글화 하는 법을 알아보도록 하겠습니다.
'share' : {
'position' : 'left',
'services' : 'facebook,twitter,email,print,more',
//'numPreferredServices' : 5,
'postShareTitle' : '공유 해주셔서 감사합니다!',
'postShareFollowMsg' : '팔로우 하기',
'postShareRecommendedMsg' : '추천 항목',
'desktop' : true,
'mobile' : true,
'theme' : 'transparent'
},
공유 버튼에서는 영문으로 뜨는 메시지를 수정할수 있습니다.'postShareTitle''postShareFollowMsg''postShareRecommendedMsg'이 항목을 자신 마음대로 수정하시면 됩니다.
'follow' : {
'services' : [
{'service' : 'facebook', 'id' : 'AddThis'},
{'service' : 'twitter', 'id' : 'AddThis'}
],
'title' : '팔로우하기',
'postFollowTitle' : '팔로우 해주셔서 감사합니다!',
'postFollowRecommendedMsg' : '추천 항목',
'mobile' : true,
'desktop' : true,
'theme' : 'transparent'
},
팔로우 항목 입니다. 서비스를 등록했다면 서비스 항목에 아이디가 뜰겁니다.'title''postFollowTitle''postFollowRecommendedMsg'이 항목을 원하는대로 수정할수 있습니다.
'whatsnext' : {
'recommendedTitle' : '추천 게시글
'shareMsg' : '[x]에 공유하기',
'followMsg' : '[x]에서 팔로우 하기',
'theme' : 'transparent',
'desktop' : true
},
What's next 입니다.'recommendedTitle''shareMsg''followMsg' 를 수정하시면 됩니다.
'recommended' : {
'title' : '추천 게시글',
'mobile' : true,
'desktop' : true,
'theme' : 'transparent'
},
하단부 추천 항목 입니다. 'title' 항목을 수정하시면 됩니다.
3-3 테마
옵션에서는 전체 테마만 지정이 가능하지만 스크립트를 활용하면 각 항목마다 테마를 별도로 지정할 수 있습니다. 위쪽에 코드에도 나와있듯이 세부항목에 테마 코드를 추가하시면 됩니다.
3-4 위치 조절하기
스킨에 따라서 위치를 조절 해야하는 상황이 발생할 수 있습니다.저같은 경우 공유 버튼의 위치를 옮겨야 했는데요,
'share' : {
'position' : 'left',
'numPreferredServices' : 3,
'services' : 'facebook,twitter,more',
'postShareTitle' : '공유 해주셔서 감사합니다!',
'postShareRecommendedMsg' : '추천항목',
'top' : '150px'
},
다음과 같이 설정했습니다.'top'코드를 쓰면 위쪽에서 얼마만큼 이동할지를 설정할수 있습니다. 아래쪽에 설정되는 항목의 경우 'bottom' 코드로 위치를 변경 할 수 있습니다.
다음 강좌에서는 Addthis에서 제공하는 버튼을 강제로 변경하는 방법과 폰트를 바꾸는 방법을 알아보도록 하겠습니다.
