트위터 팔로우 버튼: 팔로워 버튼 달기와 숫자(카운터) 표시, 이름표시, 크기, 너비조절, 좌우정렬, 언어설정 꾸미기
트위터 팔로우 버튼을 달 때, 몇 가지 설정은 아래와 같이 간단히 할 수 있다.
우선 트위터에 가서 팔로우 버튼을 만든다. (트위터 버튼 만들기 페이지)
“User”에 트위트 계정이름을 넣고 [엔터]키를 치면 오른쪽에 코드가 생성된다. 트위트 팔로우버튼 만들기 페이지»
생성된 코드는 아래와 같이 두 부분으로 되어 있다.
<a href=”https://twitter.com/howways” class=”twitter-follow-button” data-show-count=”false”>Follow @howways</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>
아래는 윗쪽에 있는 <a>태그에 몇 가지 항목을 추가한 것이다. 아래와 같이 <a>태그 안에 필요한 항목을 넣고 설정을 조절하여 맞추면 된다.
<a href=”https://twitter.com/howways” class=”twitter-follow-button” data-show-count=”true” data-show-screen-name=”false” data-size=”large” data-width=”160px” data-align=”right” data-lang=”en”>Follow @howways</a>
하나씩 살펴보자
data-show-count=”true” 버튼에 팔로워 숫자(카운터)를 표시할지를 설정한다. “true”로 하면 카운터가 표시되고 “false”로 하면 버튼만 표시되고 카운터는 표시되지 않는다(그림 참고).
data-size=”large” 버튼의 크기를 설정한다. 작은 버튼은 “small”, 중간버튼은 “middle”, 큰 버튼은 “large”로 설정하면 된다.
data-width=”160px” 버튼과 팔로워 숫자표시창까지 포함한 전체 너비를 설정한다. 수치를 너무 좁게 주면 제대로 표시되지 않는다.
data-align=”right” 버튼을 왼쪽/오른쪽으로 정렬한다. 왼쪽으로 정렬하기는 “left”, 오른쪽으로 정렬하기는 “right”로 한다.
data-lang=”en” 버튼에 표시되는 글자 [Follow ~ ]를 한글로 표시할지 영어로 표시할지 ….. 언어를 설정한다. 영어는 “en”, 한글은 “ko”이다. “ko”로 설정하면, 버튼에 [@howways 님 팔로우하기]와 같이 표시된다.
어떻게 하면 되는가를 알려고 찾아 헤메다가, 막상 알고 보면 크게 어렵지 않은 경우가 종종 있는 것 같다.
도움이 되었기를 바랍니다.