티스토리에 XE게시판 삽입하기

티스토리는 게시판을 만들수가 없어서 아쉬워하던참에 iframe으로 xe게시판을 표시하는 방법을 알게되었습니다.

거기에 화면요소들을 조금만 조정해주면 정말 게시판처럼 사용할 수도 있겠더군요.

준비물

티스토리에 쓸 XE게시판(이것에 대해서는 나중에 시간되면 포스팅하겠습니다.)

기초적인 HTML지식

XE설정

미리 xe에서 레이아웃을 게시판만 표시되도록 설정해주면 좋습니다.

또한 xe를 반응형으로 꾸며야 티스토리에 삽입된 게시판도 반응형으로 동작합니다.

게시판으로 쓸 포스트 작성

티스토리 포스트 주소는 두가지 방식이 있는데요,

첫번째 방식은 블로그 주소 뒤에 바로 번호가 붙는 방식(예: nubiz.tistory.com/123)

두번째 방식은 entry뒤에 포스트 제목이 붙는 방식입니다.(예: nubiz.tistory.com/entry/티스토리에-XE게시판-삽입하기)

바로 두번째 방식을 활용하기위해 제목을 "board"등으로 작성합니다.

(그러면 앞으로 게시판 주소는'블로그주소/entry/board'가 됩니다.)

포스트에 iframe으로 게시판 삽입

위 그림처럼 HTML모드에 다음을 입력합니다.

<iframe src="게시판 주소" id="contentFrame" width="100%" height="1000px" frameborder="0">

이제 포스트를 공개로 저장합니다. (발행까지 할 필요는 없죠)

(iframe을 반응형으로 꾸미기가 쉽지 않습니다. iframe의 높이를 자동으로 늘려주는 스크립트가 있긴한데, 그것보다는 그냥 1000px정도로 넉넉히 잡으시면 됩니다.)

게시판용 티스토리 레이아웃 조절하기

포스트 내에서 style태그를 이용하여 css로 설정해주어도 좋지만, 그러기엔 날려버릴 내용이 너무 많습니다.

그래서 자바스크립트를 이용하여 게시판이 들어간 iframe만 남기고 다른요소들은 정리해줄 것입니다.

그런데 이 스크립트가 포스트에 포함되면 자기자신을 숨겨야하므로 잘 작동하지 않습니다.

그래서 스킨.html에서 주소(/entry/board)를 인식하여 작동하게 할것입니다.

skin.html에서 </body>위쪽에 다음을 붙여넣습니다.

<script>

var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];

var url = urlAddr.split('/');  // Fastboot Index화면 사용중이라면 생략 가능

if (url[2] == 'board') {  //게시글 주소를 board로 했을 때

    $(".adbox").remove();  //애드센스가 있다면 삭제처리(정책위반 회피)

    $("#paging,#sidebar,article").hide();  //페이지번호, 사이드바, 본문 숨김처리

    $("#content").prepend($("#contentFrame"));  //iframe을 #content로 이동

    document.write('<style>#leftContent{width:100%}<\/style>');  //CSS쓰기: 컨텐츠영역 가로크기 100%

}

</script> 

위 코드는 Readiz님의 Fastboot전용입니다. 주석을 달아놓았으니, 파란색 부분을 본인의 스킨에 맞게 수정하시면 됩니다.

문제는 활용방안

외부 서비스를 이용하긴 했지만, 티스토리에도 게시판을 달 수 있게되었습니다.

그런데 막상 달고나니 어디에 쓸지를 모르겠네요..

방문자 수가 많은 블로그는 질문게시판이나 자유게시판으로 활용해도 좋겠습니다.