본문 바로가기
Story/Jquery

Simple Tumblr Blog Feed using jQuery

Stdio 2012. 10. 5. 14:46
반응형

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
div.posts {
margin-top: 25px;
padding: 5px;
}
#tumblrfeed {
width: 500px;
height:
}
</style>
<script type="text/javascript">
var limit = 15;
var url = 'http://musicseoultoday.tumblr.com';

$.getJSON(url+'/api/read/json?num='+limit+'&callback=?', function(data) {
    $.each(data.posts, function(i,posts){
        if(posts.type == 'video'){
            displayVideoPost(posts);
        } else if(posts.type == 'link'){
            displayLinkPost(posts);
        } else if(posts.type == 'regular'){
            displayTextPost(posts);
        }
    });
});

function displayTextPost(posts){
    if(posts == null) return;
    $('#tumblrfeed').append('<div class="posts"><h1>'+posts['regular-title']+'</h1>'+posts['regular-body']+'</div>');
}

function displayLinkPost(posts){
    if(posts == null) return;
    $('#tumblrfeed').append('<div class="posts"><h1>'+posts['link-text']+'</h1>'+posts['link-url']+posts['link-description']+'</div>');
}

function displayVideoPost(posts){
    if(posts == null) return;
    $('#tumblrfeed').append('<div class="posts"><h1>'+posts['video-caption']+'</h1>'+posts['video-player-250']+'</div>');
}
</script>
</head>

<body>

<div id="tumblrfeed">
</div>

</body>

</html>

 

출처 http://pastebin.com/h7fCv3Dz

 

위와 같이 가져온 json 데이타를 보면


var tumblr_api_read =
{
 "tumblelog":{
  "title":"MusicSeoul Today",
  "description":"\uc11c\uc6b8\uc2e4\uc6a9\uc74c\uc545\ud559\uad50 \ube14\ub85c\uadf8","name":"musicseoultoday","timezone":"Asia\/Seoul","cname":false,"feeds":[]},
  "posts-start":0,"posts-total":"76",
  "posts-type":false,
 "posts":[
  {
   "id":"31973244994",
   "url":"http:\/\/musicseoultoday.tumblr.com\/post\/31973244994",
   "url-with-slug":"http:\/\/musicseoultoday.tumblr.com\/post\/31973244994\/chaos-kiss-kiss",
   "type":"video",
   "date-gmt":"2012-09-21 06:17:00 GMT",
   "date":"Fri, 21 Sep 2012 15:17:00",
   "bookmarklet":0,
   "mobile":0,
   "feed-item":"",
   "from-feed-id":0,
   "unix-timestamp":1348208220,
   "format":"html",
   "reblog-key":"rAuMYgpS",
   "slug":"chaos-kiss-kiss",
   "video-caption":"<p>\uc878\uc5c5\uc0dd \ub450\ud658\uad70\uc774 \uc18d\ud574\uc788\ub294 ChAOS\uc758 \ub450\ubc88\uc9f8 \ub514\uc9c0\ud138\uc2f1\uae00 &#8216;Kiss Kiss&#8217; \uac00 \uacf5\uac1c\ub418\uc5c8\uc2b5\ub2c8\ub2e4! <br\/> \ub9ce\uc740 \uad00\uc2ec \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4~<br\/> Open the 2nd Digital Single of ChAOS &#8216;Kiss Kiss&#8217;&#160;!<\/p>",
   "video-source":"http:\/\/www.youtube.com\/watch?v=fT1U6NLaTkQ&feature=player_embedded",
   "video-player":"<iframe width=\"400\" height=\"225\" src=\"http:\/\/www.youtube.com\/embed\/fT1U6NLaTkQ?wmode=transparent&autohide=1&egm=0&hd=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&showsearch=0\" frameborder=\"0\" allowfullscreen><\/iframe>",
   "video-player-500":"<iframe width=\"500\" height=\"281\" src=\"http:\/\/www.youtube.com\/embed\/fT1U6NLaTkQ?wmode=transparent&autohide=1&egm=0&hd=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&showsearch=0\" frameborder=\"0\" allowfullscreen><\/iframe>",
   "video-player-250":"<iframe width=\"248\" height=\"139\" src=\"http:\/\/www.youtube.com\/embed\/fT1U6NLaTkQ?wmode=transparent&autohide=1&egm=0&hd=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&showsearch=0\" frameborder=\"0\" allowfullscreen><\/iframe>",
   "tags":["youtube"]
  },
  {
   "id":"31443399762",
   "url":"http:\/\/musicseoultoday.tumblr.com\/post\/31443399762",
   "url-with-slug":"http:\/\/musicseoultoday.tumblr.com\/post\/31443399762\/5",
   "type":"photo",
   "date-gmt":"2012-09-13 03:18:00 GMT","date":"Thu, 13 Sep 2012 12:18:00","bookmarklet":0,"mobile":0,"feed-item":"","from-feed-id":0,
   "unix-timestamp":1347506280,"format":"html","reblog-key":"9KBKIUvc","slug":"5",
   "photo-caption":"<p><span class=\"userContent\">\uc774\ubc88\uc8fc \uae08\uc694\uc77c \uc624\ud6c4 5\uc2dc<br\/> \uadf8\ub0a0\ubc24 \uadf8\ub4e4\uc758 \uc5f4\uc815\uc774 \ubd88\ud0c0\uc624\ub985\ub2c8\ub2e4.<br\/> \uc11c\uc6b8\uc2e4\uc6a9\uc74c\uc545\ud559\uad50 \uae30\ud0c0\ud398\uc2a4\ud2f0\ubc8c<br\/> &#8220;BURNING&#8221;<\/span><\/p>",
   "width":"720","height":"720",
   "photo-url-1280":"http:\/\/24.media.tumblr.com\/tumblr_ma9qi015JZ1ru4dgyo1_1280.jpg",
   "photo-url-500":"http:\/\/24.media.tumblr.com\/tumblr_ma9qi015JZ1ru4dgyo1_500.jpg",
   "photo-url-400":"http:\/\/24.media.tumblr.com\/tumblr_ma9qi015JZ1ru4dgyo1_400.jpg",
   "photo-url-250":"http:\/\/24.media.tumblr.com\/tumblr_ma9qi015JZ1ru4dgyo1_250.jpg",
   "photo-url-100":"http:\/\/25.media.tumblr.com\/tumblr_ma9qi015JZ1ru4dgyo1_100.jpg",
   "photo-url-75":"http:\/\/25.media.tumblr.com\/tumblr_ma9qi015JZ1ru4dgyo1_75sq.jpg","photos":[]
  }
 ]
};

와 같은 형태이다...

 

또다른 참고로 http://userscripts.org/scripts/review/44683

여기에 보면

function searchTumblelog(username, post_id, id) {
    //console.log(username, post_id, start, num);

    var e = jQuery('.post')[id];
GM_xmlhttpRequest({
method: 'GET',
url: 'http://' + username + '.tumblr.com/api/read/json?start=' + start + '&num=' + num,
onload: function(details) {
eval(details.responseText);

jQuery.each(tumblr_api_read.posts, function(i, item) {
if (item.id == post_id) {
switch(item.type) {
case 'regular':
key = 'regular-body';
break;
case 'link':
key = 'link-description';
break;
case 'quote':
key = 'quote-source';
break;
case 'photo':
key = 'photo-caption';
break;
case 'conversation':
key = 'conversation-text';
break;
case 'video':
key = 'video-caption';
break;
case 'audio':
key = 'audio-caption';
break;
}
full = item[key];
found = true;
}
});

if (!found && tumblr_api_read['posts-total'] > (tumblr_api_read['posts-start'] + num)) {
// fetch more if needed
start = tumblr_api_read['posts-start'] + num;
num = Math.min(num, tumblr_api_read['posts-total'] - start);
searchTumblelog(username, post_id, id);
} else if (found) {
// found
jQuery('.post_content, .post_title + div, .quote_source, .caption, .post_body', jQuery(e)).html(full).highlightFade('yellow');
jQuery('#f_' + id).text('');
} else {
// failed
// should never ever happen!
jQuery('#f_' + id).text('error code ' + jQuery(jQuery('.post')[id]).attr('id').match(/post([0-9]*)/)[1]);
}
}
});
}

도 참고
반응형
저작자표시

'Story > Jquery' 카테고리의 다른 글

Basic JQuery Selector  (0) 2012.12.31
구글 지도 사용 google map 언어 ( 중국어 zh_CN )  (0) 2012.12.27
Simplemodal Popup 에서 팝업 부분만 print 하는 방법  (0) 2012.10.10
메뉴 클릭시 클릭된 메뉴가 맨 위로 올라오도록 순서 바꿔주기  (0) 2012.09.12
jQuery Image Galleries & Sliders  (0) 2012.07.20

'Story/Jquery' Related Articles

티스토리툴바