이 방법은 공감버튼이 나타나면 함께 나타나며 공감버튼이 생성되지 않으면 나타나지 않습니다.
응용하시면 다른 부분에도 사용 하실수 있을 것입니다.
아래 그림에서 보이는 것같이 공감 버튼 아래에 표시하도록 하겠습니다.
티스토리의 공감버튼이 생성된 페이지의 소스를 보면 아래와 같은 형식으로 이루어 져있습니다.
<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(지정대상)
위와 같은 형식으로 사용합니다.
중요한 차이점은 지정 대상과 지정 요소의 위치가 어디에 붙냐의 차이가 있습니다.
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>').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는 #(샵)으로 표현 됩니다.
수정을 마쳤으면 저장하고 페이지를 확인 합니다.
정상적으로 작업을 마쳤다면 공감버튼 아래에 자신이 지정한 글귀가 보이게 될 것입니다.
질문은 언제나 환영합니다. 저도 하나씩 배우면서 하는 입장이라 최선을 다하여 답변해 드리도록 하겠습니다.
정말 큰 도움이 되었습니다. 정말 감사드려요~^^
답글삭제