티스토리 블로그에 이웃 커넥터 위젯을 추가하기 (쉽게)

1. 2018년 12월 18일자 (Deprecated method)

블로그에 이웃 기능을 추가해 주는 티네스라는 서비스가 있습니다.

지난번에 이것을 이용해서 나름대로 커스터마이징한 이웃 목록을 블로그에 추가해 봤는데요.

2018/11/27 - [Methods] - 티스토리 블로그에 링크가 아닌 이웃 기능 추가하기

이 서비스가 업데이트를 하면서, '이웃 커넥터'라고 해서, 그것보다 훨씬 더 쉽고 간단하게 이웃 목록을 추가하는 방법이 생겼답니다.

이 사람은 호기심이 조금 있기 때문에, 이렇게 새롭고 재미있는 기능을 지나치지 않고 가장 먼저 직접 적용해 봤습니다.

그 방법이란 것은 이렇습니다.

먼저, 티네스 홈페이지 (링크)에서 로그인합니다.

티네스 홈페이지에서 로그인하고, '내 블로그 관리' 페이지의 '커넥터 및 구독버튼'을 선택하면, 애드센스나 웹마스터 도구의 그것처럼 HTML 코드가 제공됩니다.

이웃 커넥터 위젯 하나를 표현하는 이 HTML 코드를 통째로 복사해서, 블로그 아무 곳에나 붙여넣습니다.

스킨이나, 배너 플러그인이나, 블로그 글 본문 중간 등 HTML이 적용되는 곳이면 어디든지 삽입할 수 있습니다.

이게 끝입니다.

이거라면...! 웹 문법을 전혀 모르는 사람도 쉽게 이웃 기능을 추가할 수 있겠지요.

아래 본문 중간에 예시로 실물 하나를 추가해 볼 게요.

사용한 코드는 다음과 같습니다. (복붙함)

<!-- 이웃커넥터 -->
<div id="tines-connector">
    <neighbor-connector email="nanite@naver.com" name="nanite" message="이웃으로 삼는다"></neighbor-connector>
</div>
<!-- Vue.js -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<!-- Components -->
<script src="https://unpkg.com/vue-tines-components"></script>
<script>
    Vue.component('neighbor-connector', NeighborConnector);

    let app = new Vue({ 
        el: '#tines-connector'
    });
</script>

그럼 여러분, 코코넛냠냠과 사이 좋게 지내고 싶은 분들은 이제 이 기능을 이용해서 이 사람을 이웃으로 추가해 주시기를 바랍니다.

코코넛냠냠은 오만가지 전자 오락과 더불어 프로그래밍/해킹을 즐기는 미치광이 컴퓨터 덕후입니다. 전문 분야를 빼고는, 세계 역사나 문화에도 관심 있고, 탈근대주의자라고 합니다.

티스토리 블로그를 예쁘게 꾸미는 것도 취미입니다.

흥미나 관심 주제 등이 일치하시는 분들이 계시다면, 부디 코코넛냠냠을 이웃으로 추가해 주세요.

이상입니다. xD

2. 2018년 12월 20일 업데이트

요약

1) 티네스 홈페이지에서 로그인 (tines.kr)

2) '내 블로그 관리' 선택

3) '커넥터 및 구독버튼' 선택

4) 팝업에서 '코드 생성' 선택

이웃 커넥터라는 위젯 하나를 표현하는 이 HTML 코드를 그대로 복사해서, 블로그 아무 곳에나 붙여넣습니다.

스킨이나, 배너 플러그인이나, 블로그 글 본문 중간 등 HTML이 적용되는 곳이면 어디든지 삽입할 수 있습니다.

이 아래에 실물을 예시로 하나 붙일 게요.

그러기 위해서 복붙한 코드는 불필요한 개행을 제외하면 다음의 한 줄뿐입니다.

<!-- 이웃커넥터 --><iframe src="https://tines.kr/widget/neighbor-connector?name=nanite&message=이웃으로 삼는다" width="320" height="420" frameborder="0"></iframe>

그럼 여러분, 이 재미있는 기능을 통해서 코코넛냠냠을 이웃으로 추가해 주시기를 바랍니다.

이상입니다. xD