반응형
티스토리에서 프로필레이어 기능을 선보인지 몇개월이 지났죠. 우연히 소스 분석하면서 심플하게 사이드바에 자신의 트위터 팔로우 수를 보여지게 할 수 있는 방법을 알아 냈습니다. 제 블로그 우측 사이드바 맨 하단에 보이는 것처럼 보여집니다. 아래 이미지는 적용 전과 적용 후로 나눠서 보여준 그림입니다.
방법은 아래와 같으니 그대로 따라하시면 됩니다.
1. 프로필레이어 기능 설정 : 새 관리 > 환경설정 > 내설정
위 해당 페이지로 가셔서 적용 영역에 반드시 "사이드바" 를 체크하고 프로필 레이어에서 자신의 트위터 계정을 입력 후 설정하세요.
설정 방법은 이곳에서 참조하세요. http://notice.tistory.com/1542
2. 프로필 레이어 사이드바에 적용
프로필 레이어에서 자신의 트위터 계정을 넣고 설정한 후 사이드 바에 노출 시켜주세요. 프로필 레이어 사이드바 노출 방법은 ( 관리 > 스킨 > 사이드바설정) 에서 노출 시키면 됩니다.
예를 들어보죠. 티스토리 트위터 계정은 http://twitter.com/tistory 입니다. 사이드바에 노출 시킨 후, 여기서 중요합니다. 페이지 소스 보기를 합니다. 익스플로러 브라우저 기준으로 (익스플로러>보기>소스)를 하면 해당 페이지 소스를 볼 수 있습니다.
3. 소스에서 "자신의 트위터 계정 주소로" 검색
티스토리 계정으로 설명 계속합니다. 저는 티스토리 계정으로 설명하고 있지만, 여러분께서는 본인의 계정으로 소스를 봐야겠죠^^
소스가 열리면 거기서 "ctrl+F"를 한 뒤에 "http://twitter.com/tistory"를 검색어로 하고 찾아보세요. 그럼 아래와 같은 소스를 찾을 수 있습니다.
<a target="_blank" href="http://twitter.com/tistory" id="pf05800300_2">twitter</a>
여기서 중요한 것은 바로 붉은색 표시로 된 부분 입니다. 자신의 트위터 계정 주소와 고유 id 번호입니다.
4. 마지막 단계
이제 마지막 단계군요. 자신의 트위터 계정 "tistory" 와 id 번호 "pf05800300_2" 만 정확히 확인 하시면 됩니다.
그리고 자신의 트위터 계정과 id 번호를 아래의 소스 중 파란색으로 표시된 부분에 바꿔서 넣으시면 됩니다.
그리고 그 소스를 사이드바에 넣으시면 됩니다. 사이드바에 소스 넣는 부분은 설명을 생략하겠습니다. 말주변이 없어서, 설명하기가 어렵네요... 제 블로그는 우측 마우스 금지되있으니 소스를 메모장으로 첨부합니다.
<div id="profileSidebarWrapMiddle" class="wrapMiddle">
<ul class="itemWrap"><li class="item first">
<div onmouseout="tistoryProfile.itemHover(this, 'out'); return false;"
onmouseover="tistoryProfile.itemHover(this, 'over');
return false;" class="innerItem">
Follow @
<a target="_blank" href="http://twitter.com/snowhug" id="pf55209200_1">twitter</a>
</div></li></ul> /div>
<script type="text/javascript">
asyncProfileItems.push([{"itemId":"pf55209200_1","screen_name":"snowhug",
"service":"twitter"}])
</script>
</s_sidebar_element>
twitter Follower Profle Layer.txt반응형
