티스토리는 게시판을 만들수가 없어서 아쉬워하던참에 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전용입니다. 주석을 달아놓았으니, 파란색 부분을 본인의 스킨에 맞게 수정하시면 됩니다.



    문제는 활용방안

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

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

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


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon thankspecialist
      2014.11.21 17:28 신고

      xe의 게시판 주소는 어디서 얻는가요?
      게시판 주소를 모르겠어요

      • BlogIcon 뭐하라
        2014.11.21 17:30 신고

        xe는 따로 만드셔야해요. 국내 호스팅업체는 거의다 xe를 자동으로 설치해쥬고요. 무료호스팅 찾아보셔도 좋습니다.

    • BlogIcon HappyChild
      2015.10.05 14:05 신고

      안녕하세요. 덕분에 게시물 하나를 만들고 아이프레임으로 넣긴했는데요. .. 문제는 ,, 다른 글들을 등록하게 되면 자연히 이 게시물은 뒤로 밀려나죠.. 그래서
      바라기는 티스토리에서 커테고리 한메뉴를 차지하게하거나 기본 메뉴들(방명록,글쓰기,관리자)처럼 한 메뉴를 차지하거나 하게끔 하면 좋겠는데요.
      기본 티스토리 스킨을 쓰면은 편법으로 상단메뉴 하나를 대신하여 쓸 수 있긴 한 것 같으나 , 커스텀된 스킨(유저님들이 배포한)을 쓰다보니 이것도 어려운것 같네요.
      xe게시판 하나가 메뉴에 차지할 수 있도록 할 수 있을 런지요

      • BlogIcon 뭐하라
        2015.10.05 16:13 신고

        이 스킨에서 예를 들면 사이드 드로워에있는 방명록처럼
        해당글 주소를 링크시키면 되죠~

    • BlogIcon HappyChild
      2015.10.05 16:58 신고

      아 그런.. 사이드 드로워란 뭔가요? 그리고 방명록이... 현재 화면에서 어디에 있는지 보이지 않아요... 운영자님 사이트가 모바일보기로 보이는것 같기도하고,,

    • BlogIcon HappyChild
      2015.10.05 16:59 신고

      아 상단에 있었군요. 상단 메인메뉴에.. 링크 추가도있고,, 이 스킨으로 바꾸어야겠네요^^.

    • BlogIcon HappyChild
      2015.10.05 17:25 신고

      사이드 드로워에 어떻게 추가하나요? 스킨 바꿔봤는데 우찌할지 모르겠네요^^

      • BlogIcon 뭐하라
        2015.10.05 19:07 신고

        html에서
        <li> <a href="/guestbook"><i class="ic-sms"></i> 방명록</a>
        </li>
        밑에
        <li> <a href="글 주소"><i class="ic-sms"></i> 게시판</a>
        </li>
        이런식으로 똑같이 추가하시면됩니다.
        ic-sms이건 아이콘인데 http://cfs.tistory.com/custom/blog/168/1686514/skin/images/material-desigin-icons-demo.html?=1060344286 여기서 목록확인가능합니다

    • BlogIcon Dear Memory
      2016.12.08 15:11 신고

      무료호스팅 중에 XE 자동으로 깔려있는곳 추천 가능할까요 ^^?

티스토리 툴바