티스토리 블로그에 링크가 아닌 이웃 기능 추가하기

1. 개요

티네스^[각주:1]라고 하는 티스토리 블로그 전용의 이웃 서비스가 있어서, 블로그에 적용해 봤습니다.

티스토리에는 네이버 블로그의 이웃 개념에 대응하는 것으로서 기본적으로 '링크'가 있는데요.

티네스는 그 링크라는 기능이 어쩐지 어딘가 아쉽다 해서 어떤 프로그래머가 개인적으로 새롭게 만든 것입니다. (티스토리 API로 이런 것도 개발할 수 있구나. 신기합니다.)

블로그를 통해서 더 많은 사람들과 친목을 도모하고 싶다면, 블로그의 교류의 기능을 조금 더 활성화시키기 위해서, 이런 시스템을 이용해 보는 것도 나쁘지 않을 것 같습니다.

2. 티네스 회원 등록

티네스의 이웃 서비스를 이용하기 위해서는, 티네스에 회원 등록이 되어 있어야 합니다.

귀찮지만, 다행히도 회원 등록을 위해서 필요한 것은 티스토리 계정으로 티네스에서 로그인을 한 번 하는 것뿐이며, 그 이외의 별도의 회원가입 절차는 없습니다.

아래 링크를 통해서 티네스 홈페이지로 이동합니다.

https://tines.kr/

홈페이지 우측 상단의 로그인 버튼을 찾아서 클릭합니다.

로그인 버튼을 누르면, OAuth가 티스토리 계정으로 티네스에 로그인하는 것을 허용겠느냐는 창이 나타납니다.

여기에서 말하는 OAuth는 뭐냐면요.

어느 웹사이트들을 로그인할 때 보면 있는, 구글 계정으로 로그인하기, 페이스북 계정으로 로그인하기, 네이버 계정으로 로그인하기 따위의 로그인 기능을 가리키는 것입니다.

이 경우에는 티스토리가 제공하는 개발자용 API를 통해서 티스토리 계정으로 티네스에 로그인을 하는 거에요.

잘 읽어 보고, 이상의 설명에 대해서 납득할 수 있다면, 허가하기 버튼을 눌러서 로그인합니다.

이렇게 로그인을 한 번 하는 것만으로 회원 등록은 끝입니다.

티네스 홈페이지 메인의 블로그 목록에서 자신의 블로그가 등록된 것을 확인할 수 있습니다.

3. 내 티스토리 블로그에 이웃 목록 추가하기

티네스 API를 이용해서 블로그 스킨에 이웃 목록을 추가해 봅시다.

API의 사용법은 아래 가이드북에 잘 정리되어 있습니다.

https://docs.tines.kr/

제공되는 API 가운데에서 필요해 보이는 것은 구독자와 이웃의 조회 기능뿐입니다.

이를 이용해서, 이웃 목록을 받아오는 함수를 자바스크립트로 아래처럼 작성해 봤습니다.

---

1) 동기식 구현

인터페이스

// 동기식 구현 (쓰기 편함)

// 나의 이메일 주소를 인자로 받아서, 내'가' 팔로우(구독; 이웃 추가)한 사람들의 목록을 얻어옵니다.
// 반환형은 자바스크립트 배열입니다.
// 티네스에서 결과를 받아오기까지 최대 1초간 블록(대기)합니다. 실패시 null을 반환합니다.
function getFolloweesOf(email) {
	var ret = null
	$.ajax({
		dataType: "json",
		async: false,
		url: "https://api.tines.kr/v1/neighbors?email="+email,
		timeout: 1000,
		success: function(followees) {
			ret = followees
		}
	});
	return ret
}

// 나의 이메일 주소를 인자로 받아서, 나'를' 팔로우(구독; 이웃 추가)한 사람들의 목록을 얻어옵니다.
// 반환형은 자바스크립트 배열입니다.
// 티네스에서 결과를 받아오기까지 최대 1초간 블록(대기)합니다. 실패시 null을 반환합니다.
function getFollowersOf(email) {
	var ret = null
	$.ajax({
		dataType: "json",
		async: false,
		url: "https://api.tines.kr/v1/subscribers?email="+email,
		timeout: 1000,
		success: function(followers) {
			ret = followers
		}
	});
	return ret
}

동기 함수 사용 예시

// 사용 예시
var followees = getFolloweesOf("nanite@naver.com");
var list = $('.tab_tines .tines ul'); // 내 이웃 리스트가 담긴 HTML 엘리먼트입니다. (예시)
for (var i = 0; i < followees.length; i++) { 
	list.append('<li><a href=' + followees[i]['url'] + ' onclick="window.open(this.href); return false">' + followees[i]['title'] + '</a></li>')
}

---

2) 비동기로 처리

인터페이스

// 비동기식 (페이지 로드가 빠름)

// 내'가' 팔로우(구독; 이웃 추가)한 사람들의 목록을 얻어옵니다. // getFolloweesOf(email)
$.ajax({
	dataType: "json",
	url: "https://api.tines.kr/v1/neighbors?email="+email, // email을 내 이메일로 설정.
	success: function(followees) {
		// 정상 반환시의 콜백입니다. followees에 관한 처리를 기술하십시오.
	}
});

// 나'를' 팔로우(구독; 이웃 추가)한 사람들의 목록을 얻어옵니다. // getFollowersOf(email)
$.ajax({
	dataType: "json",
	url: "https://api.tines.kr/v1/subscribers?email="+email, // email을 내 이메일로 설정.
	success: function(followers) {
		// 정상 반환시의 콜백입니다. followers에 관한 처리를 기술하십시오.
	}
});

비동기 사용 예시

// 사용 예시
$.ajax({
	dataType: "json",
	url: "https://api.tines.kr/v1/neighbors?email=nanite@naver.com",
	success: function(followees) {
		var list = $('.tab_tines .tines ul'); // 내 이웃 리스트가 담긴 HTML 엘리먼트(DOM)입니다. (예시)
		for (var i = 0; i < followees.length; i++) { 
			list.append('<li><a href=' + followees[i]['url'] + ' onclick="window.open(this.href); return false">' + followees[i]['title'] + '</a></li>');
		}
	}
});

---

티네스는 재미있는 기능입니다. 티스토리 스킨을 제작하시는 분들에게 참고가 되기를 바랍니다.

(본문의 끝입니다.)

1. https://appwriter.tistory.com/133 [본문으로]