티스토리 최신버전 신고 버튼 바꾸기 (23.03.21 수정)

https://mellowapricot.tistory.com/234

스크립트 없이 티스토리 신고버튼, 좋아요버튼 커스텀하기

 

해당 글을 참고하세요

 

 

 

 

 

 

---

 

 

혹시 모를 오류가 있을 수 있으니 적용 전 백업은 필수입니다.

 

신고버튼 디자인 변경으로 인한 불이익은 제가 책임지지 않습니다.

이러한 방법은 티스토리 측에서 치환자를 제공하기 전까지만 사용하시기를 권장드립니다.

<이 글은 신고 버튼 삭제하는 법이 아닌 디자인을 바꾸는 법을 안내하는 것임을 알려드립니다. 

신고 버튼을 노출하지 않을 시 티스토리 이용에 제한이 있을 수 있습니다.>

 

안녕하세요. TISTORY입니다.

신고 기능 제공은 법률에 따른 의무 사항이어서 플러그인 등으로 선택 노출할 수 있도록 지원하기는 어렵습니다. 

신고 기능 제공은 법률에 따른 의무 사항이어서 사용자가 임의로 노출을 제한할 경우 문제가 될 수 있습니다. 

치환자 제공 등을 검토 중이나, 신고 기능은 법적 의무 사항으로 늘 노출하는 게 원칙이라서 다각도로 고려 중입니다. 이점 양해 부탁드립니다.

http://notice.tistory.com/2328 티스토리 측 댓글 발췌

 

(1) 현재 티스토리 신고버튼 html

여기서 취해야 할 것은 17번째 줄 UrlID 부분이다.

신고버튼 html에서는 각 글의 고유 id가 저장되어 있음

(주소 location 속성을 이용해서 따와도 되겠지만 그냥 html에서 추출하는 걸로..)

 

 

(2) 티스토리 글 url

해당 숫자가 해당 블로그의 고유 글 url id다. 글을 작성하는 순서대로 부여됨

 

 

http://티스토리주소.tistory.com/toolbar/popup/abuseReport/?entryId=글 url id

(3) 현재 신고하기 버튼의 주소

글 id에 따라서 어떤 글을 신고할 것인지 결정된다.

 

(2)티스토리 글url에 따르면 (3)신고하기 버튼의 글id값은 112가 되는 것임

ex) http://mellowapricot.tistory.com/toolbar/popup/abuseReport/?entryId=112

 

티스토리가 제공하는 기본 신고 버튼을 누른다면,

(2)티스토리 글url과 (3)신고하기 버튼에 부여되어 있는 글id가 자동으로 일치되어 있기 때문에 

 

112번째로 작성한 해당 글을 신고하게 해준다.

 

 

 

 

본 글에서는 못생긴 신고 버튼의 html(<div class="container_postbtn">~</div>)을 전부 날려버릴 것이므로 

꼭, 각 id의 값을 저장해두어야 한다.

 

(저장해두어야 신고 버튼 주소가 글 id 주소와 일치함.

값을 저장시키지 않고 display:none과 함께 신고버튼의 주소만 임의로 바꾸는 경우에는 

1번 글의 신고버튼을 눌러도 2번 글의 신고 창이 뜸)

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//apricot abuse script
	$(".container_postbtn").each(function () {
		var postbtnID =  $(this).find(".wrap_btn_etc").attr("data-entry-id");
		$(this).html("<div class='a_report'><a href='/toolbar/popup/abuseReport/?entryId=" + postbtnID + "' onclick='window.open(this.href, \"tistoryThisBlogPopup\", \"width=500, height=300, toolbar=no, menubar=no, status=no, scrollbars=no\"); return false;' target='_blank'>신고</a></div>"); // container_postbtn의 html을 초기화하고 <div class="a_report">~</div>를 안에 추가
		$(this).removeClass("container_postbtn").addClass("a_postbtn") // container_postbtn에 대한 티스토리 기본 css값이 있으므로 해당 class명을 a_postbtn으로 변경
	});
</script>

 

△ 적용 스크립트 

html의 </body> 바로 위에 넣어주면 좋다.

 

1. 스크립트의 html 안에(6번째줄) 신고라는 글자 말고 fontawesome, xeicon등 웹아이콘을 넣어서 꾸며도 무방

2. css로 꾸밀 시에는 .a_postbtn { }, .a_report { } 등의 값을 넣어주면 된다

 

 

20.02.19 이전에 수정하신 분들은 

간단히

var postbtnID = $(this).find("label[data-entry-id]").attr("data-entry-id");를

Var postbtnID = $(this).find(".wrap_btn_etc").attr("data-entry-id");로 바꿔주면 된다