seevaa.net

css-tricks.com에서 본 Build Your Own Social Home! 라는 글을 보고 따라 해본 겁니다. 2008년 6월 작성한걸 저는 이제야 신기해하며 적용해봤습니다.

View DEMO, 적용한 페이지
Download FILE

트위터같은 경우 많이 사용하는 것 같아요. 트위터에 빠져 블로그는 뒷전이라고 말하는 주위분들도 있고, 블로그에 트위터 위젯이나 리트윗버튼 같은 것도 자주 볼 수 있구요. 개인적으로 플리커나 트위터는 계정만 있지 잘 활용하지 못합니다만 블로그에 따로 페이지를 만들면 좋을 듯 합니다. 방문하지 않고도 데이터를 가져와 모아볼수 있으니 티스토리나 텍스트큐브 블로그는 테터데스크같은 '첫화면꾸미기'에 같이 넣어 놓아도 좋을 듯 하네요.

우선 Build Your Own Social Home!에 나와있는 sample을 다운받으셔서 압축을 풀고 js폴더에 있는 jquery-1.2.6.min.js를 업로드 합니다.

index.html을 열어서 스크립트 부분의 주소(또는 계정)만 바꿔주시고

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?ids=52723107@N00〈=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(index, item){
	$("<img/>").attr("src", item.media.m).appendTo("#flickr")
	  .wrap("<a href='" + item.link + "'></a>");
  });
});

$.getJSON('http://twitter.com/status/user_timeline/chriscoyier.json?count=10&callback=?', function(data){
	$.each(data, function(index, item){
		$('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p><strong>' + relative_time(item.created_at) + '</strong></p></div>');
	});

});

$.getJSON("http://www.scrnshots.com/users/chriscoyier/screenshots.json?callback=?", function(screenshots){
	$.each(screenshots, function(index, screenshot){
		$("#scrnshots").append("<a href='" + screenshot.url + "'><img src='" + screenshot.images.small + "' /></a>");
	});
});

index.html 아래부분의 형식처럼 자기가 만들고자 하는 레아아웃을 구성하시고 css로 꾸며서 활용하시면 됩니다.

<div id="flickr">
	나중에 데이터 출력되는 자리
</div>		
<div id="twitter">
	데이터
</div>		
<div id="scrnshots">
	데이터
</div>

이렇게 위의 스크립트로 불러온 데이터들이 각각의 id 박스요소로 들어가게 됩니다.

딜리셔스 부분은 제가 추가한 것

$.getJSON("http://feeds.delicious.com/v2/json/seevaa?count=11&callback=?", function(data){
	$.each(data, function(index, item){
		$('#delicious').append('<div class="tweet"><p>' + item.d + '</p><p class="tweet-time"><a href="' + item.u + '">' + item.u + '</a></p></div>');
	});
});

<div id="delicious">
	나중에 데이터 출력되는 자리
</div>

저도 이런 데 베이스가 없어서 어떻게 설명을 잘 못하겠습니다. 일단 다운받으셔서 index.html파일을 열어보면 생각하는 것보다 좀더 파악이 될겁니다.

아, scrnshots라는 서비스를 사용하지 않는다면 flickr를 좀 더 활용하셔도 될꺼 같아요, 저도 해보진 않았지만 flickr에 세트라고 사진을 나눌 수 있는 기능이 있어요. 위처럼 플리커에서 불러오는 데이터(사진)가 20개가 한계인 것 같은데, 이 세트별로 불러오면 좀더 많은 데이터를 활용할 수 있으니까요.