티스토리 공감 버튼에 문구 추가 Tistory empathy button
티스토리를 운영하다보면 가끔 사람들이 보고가는지 아니면 글의 내용이 부족해서 관심이 없는것인지 알고 싶은 경우가 있습니다. 이런 경우 티스토리에서는 "공감"이라는 버튼을 추가해놓아서 방문자들이 해당글이 좋은지 표현하고 갈 수 있게되어있습니다. 단순히 공감버튼만으로 만족이 안되는경우, 추가 문구를 넣어서 방문자들에게 공감버튼을 잘 보이게끔 할 수 있습니다.
공감 버튼이 추가된 글의 구조 파악
- 공감 버튼이 생성된 글의 소스코드를 보면 아래와 같은 구문이 추가되어있습니다.
- 각각 Class와 ID가 주어져있는것을 볼 수 있습니다.
<span style="font-family: arial, helvetica, sans-serif;"><div class="daum_like_wrapper"><iframe <span style="color: #0000ff;">class="daum_like_button"</span> <span style="color: #ff0000;">id="daum_like_button_659"</span> frameborder="0" scrolling="no" allowTransparency="true" </iframe></div></span>
공감문구를 삽입하기 위한 제이쿼리 스크립트 추가
- 공감버튼 부분에 문구를 추가하기 위해선 JQuery(제이쿼리)를 사용해야합니다.
- 관리자 메뉴에서 꾸미기 - HTML/CSS 메뉴를 클릭해서 HTML 편집기로 갑니다.
- <head> 와 </head> 사이에 아래 스크립트를 삽입합니다.
<span style="font-family: arial, helvetica, sans-serif;"><script src="http://code.jquery.com/jquery-git.js"></script></span>
문구를 삽입하기 위한 위치 지정 및 문구 삽입
- </body> 바로 윗부분에 아래 스크립트를 삽입합니다.
- 여기서 ".insertAfter"는 공감버튼 바로 아랫부분에 문구가 추가되며, ".insertBefore"로 변경하면 공감버튼 바로 윗부분에 문구가 추가됩니다.
<span style="font-family: arial, helvetica, sans-serif;"><script type='text/javascript'></span>
<span style="font-family: arial, helvetica, sans-serif;"> $('<p><center><font color="#b30000"><strong>"공감"</font>은 로그인 없이 클릭만으로 큰 힘이 됩니다.</strong></center></p>').insertAfter($('.daum_like_button'));</span>
<span style="font-family: arial, helvetica, sans-serif;"> </script></span>
- 이 스크립트는 모바일 버전에서는 적용되지 않습니다. (데스크탑 버전에서만 적용됩니다.)
업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org
