[Tistory] 티스토리 블로그 공감 버튼아래 클릭 유도 글귀 넣는 방법
JQuery(제이쿼리)를 이용하여 티스토리에서 공감 버튼 클릭 유도 문구를 넣는 방법에 대하여 알아보겠습니다.
이 방법은 공감 버튼이 나타나면 함께 나타나며 공감 버튼이 생성되지 않으면 나타나지 않습니다.
응용하시면 다른 부분에도 사용하실 수 있을 것입니다.
아래 그림에서 보이는 것같이 공감 버튼 아래에 표시하도록 하겠습니다.
티스토리의 공감 버튼이 생성된 페이지의 소스를 보면 아래와 같은 형식으로 이루어져 있습니다.
<div class="daum_like_wrapper"> <iframe class="daum_like_button" id="daum_like_button_558" frameborder="0" scrolling="no" allowTransparency="true" src="URL" style="width: 100%; height: 44px; margin: 10px auto"></iframe> </div>
분석하자면 공감 버튼은 <div class="daum_like_wrapper">안에 iframe로 표현됩니다. 여기서 주의 깊게 보실 점은 iframe에도 ID와 Class가 주어져 있다는 것입니다.
이제 공감 버튼이 나타나는 부분을 찾았으니 당부의 글을 삽입해 보도록 하겠습니다.
JQuery(제이쿼리)를 사용하기 위하여 우선 JQuery(제이쿼리)를 불러와야 합니다.
JQuery(제이쿼리)를 사용하기 위하여 직접 내 블로그에 삽입해 버리는 방법도 있지만 여기서는 공식 웹에서 끌어오겠습니다.
아래 소스 코드를 블로그 HTML 편집기에서 <head>와 </head> 사이에 붙여넣습니다.
이때 다른 소스 코드들을 변경하지 않도록 주의하셔야 합니다.
<script src="http://code.jquery.com/jquery-git.js"></script>
위 코드의 삽입이 끝났다면 이제 JQuery(제이쿼리)를 사용할 준비가 끝났습니다.
여기서 사용할 JQuery(제이쿼리) 함수는 After() 함수입니다.
.after() 와 .insertAfter() 함수는 지정 대상의 뒤에 지정한 요소를 삽입하는 같은 기능을 합니다. 중요한 차이점은 지정 대상과 지정 요소의 위치가 어디에 붙냐의 차이가 있습니다. after() 함수의 경우 지정대상.after(지정요소) insertAfter() 함수의 경우 지정요소.insertAfter(지정대상) 위와 같은 형식으로 사용합니다.
여기서는 insertAfter를 사용하겠습니다.
블로그의 HTML 편집기에서 </body> 위에 아래 코드를 넣습니다.
(</body> 위에 코드를 넣는 것은 웹은 모든 코드를 위에서 아래로 차례로 실행하기 때문에 여기서는 "공감" 버튼이 뿌려진 이후에 공감 버튼에 대한 제어 스크립트가 적용되는 것이기 때문입니다. 만일 공감 버튼이 뿌려지기 이전에 아래의 소스코드로 제어가 먼저 일어난다면 아무런 일이 일어나지 않습니다.)
<script type='text/javascript'>
<!--
$('<p><center><font color="#b30000"><strong>"공감"</strong></font>을 표해 주시면 블로그 주인에게 큰 힘이 될 것입니다.</center></p>').insertAfter($('.daum_like_button'));
//-->
</script>
여기서 지정요소인 $('<p><center><font color="#b30000"><strong>"공감"</strong></font>을 표해 주시면 블로그 주인에게 큰 힘이 될 것입니다.</center></p>') 부분은 보시는 것과 같이 HTML로 클릭해 달라 요청하는 글입니다. 작성 시 따옴표에 주의하세요.
지정대상인 $('.daum_like_button') 부분은 위의 공감 버튼의 iframe의 class 명입니다.
class 명이 아닌 ID를 사용하고 싶다면 혹은 class가 없고 ID만 있다면 $('#daum_like_button_558')로 바꿔 줍니다.
Class는 .(닷,점)으로 표현되고 ID는 #(샵)으로 표현됩니다.
수정을 마쳤으면 저장하고 페이지를 확인합니다.
정상적으로 작업을 마쳤다면 공감 버튼 아래에 자신이 지정한 글귀가 보이게 될 것입니다.