티스토리에서 올블릿 사용하기

"각 블로그 포트스에 달리는 태그를 사용해서 소셜네트워크를 구성해 보자."라는 취지로 올블로그에서 시작한 것이 있다. 이것이 바로 올블릿인데, 이미 태터툴즈나 워드프레스 등, 다른 블로깅 툴에서는 플러그인의 형태로 제공이 되어 잘 쓰고 있었다.

나도 태터 사용시절에 이걸 써서 같은 태그를 쓴 다른 글들을 굳이 올블로그에 가지 않고서도 본문을 보면서 볼 수 있었는데, 티스토리로 이사온 후 같은 기능을 구현하고 싶었다. 그래서 잠시 머리를 굴려보니 쉽게 구현 가능했다. 그런데 이런, 원래 올블로그를 구현하신 하늘이님의 블로그를 가 보니 이미 그 내용이 설명되어 있는 것이다. 쉽게 생각하고 구현한 만큼, 이미 준비되어 있었다.

올블릿이 구현되어 블로그에서 동작하는 모습은 다음 그림과 같다.

올블릿을 펴기 이전

올블릿을 편 후

더 상세한 내용은 올블릿에 대한 하늘이님의 소개글에 잘 나와 있다.

위 하늘이님의 글에서도 소개한 바와 같이 올블릿을 블로그에 다는 것은 쉽다. 스킨만 고치면 된다. 이 과정을 좀 더 쉽게 알려주도록 하겠다.

티스토리 역시 태터의 변형에 불과하므로 태터에서 사용하는 코드를 아무런 변형없이 가져다 쓸 수 있다. 그러나 실제로 적용해 보니 주의할 곳이 있는데, 태터 및 티스토리서의 치환자는 permlink^[각주:1]를 나타내는 것이기는 하지만 게시한 사이트에 대한 상대경로만을 제공한다. (ex : /99) 그러나 올블릿을 구성하기 위해 사용하는 permlink는 포스트한 게시물의 사이트가 포함된 절대 주소를 말한다. 그러므로 올블릿 프로그램에 permlink를 넘겨줄때는 파라미터를 손봐서 사이트의 주소까지 같이 넘겨야 한다.

위와 같은 기능을 구현하기 위하여 스킨을 수정하는 방법은 다음과 같다.
스킨 중 원하는 위치에(게시물의 폭 관계로 사이드바에는 안된다. 꼭 본문 중에 하도록 한다.) 다음 소스를 넣으면 되는데, 이때 주의할 것은 빨간색으로 표시된 블로그 사이트 URL을 자신의 것에 해당하는 것으로 바꿔야 한다.

<!--//Display Allblet 시작//-->
<div class="rep_holder">
<!div id="allblet_embed" style="border: 1px dotted rgb(0, 0, 128); padding: 9px; color: rgb(106, 111, 126); background-color: rgb(238, 238, 238); text-align: left;">
<div id="allblet_more_" style="display: block;"><a href="#" onclick="hideLayer('allblet_more_');showLayer('allblet_less_');return false"> [+] Allblet 관련글 표시 </a></div>
<div id="allblet_less_" style="display: none;"><a href="#" onclick="showLayer('allblet_more_');hideLayer('allblet_less_');return false"> [-] Allblet 관련글 닫기 </a><br>
<script language="JavaScript" src="http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html?http://blog.mymap.name" type="text/javascript"></script></div><!/div>
</div>
<!--//Display Allblet 끝//-->

위 소스를 카피할 때, 는 이미지이므로 소스를 주의깊게 복사하여야 한다.
디자인 조정은 <div> 태그의 style을 조정하여 입맛대로 하면 된다.

그럼 이제 티스토리에서도 올블릿을 즐겨보자.

1. 블로그에서 게시한 글의 절대 주소 [본문으로]