iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
1

在我本來的規劃裡,有關 Blogging 的 API 是要嘗試的其中一個分類。經過一些嘗試之後,決定來用用 Tumblr API

首先先註冊一個 App。要注意的是,Default callback URL 要填上 App 的網址,才會讓 Tumblr 把你的網址放進白名單裡,開 Access-Control-Allow-Origin

然後回來繼續讀文件。
在此文件裡面,大括弧 {} 裡面的都是必要的參數,[] 裡則是可選的參數。

Tumblr API 都以 api.tumblr.com 起頭,後面根據需求不同接上不同的 endpoint。
在要呼叫特定 blog 的資料時,request URL 需要放入一個 blog-identifier。在大部分的情況下,這個 blog-identifier 都是 username.tumblr.com,但在對方有使用客製域名時,blog-identifier 就是整個域名 www.username.com

Tumblr API 根據不同的 API Call 有不同的授權,分別是

  • None : 不需要授權
  • API Key : 使用你的 OAuth Consumer Key 作為 API Key
  • OAuth : 需要其他用戶授權給你

Tumblr 的文件寫得相當詳盡,每個不同的 endpoint 都會寫上 Method ,包括 request URL、HTTP method 跟 authorization 方法。

那麼,現在來實作。我原本並沒有寫部落格的習慣,所以我的 Tumblr 帳號上沒什麼東西。
那這樣要來做什麼好呢?我突然想起 http://www.pusheen.com/ 是個 Tumblr 帳號,所以我決定要把他部落格裡面的 post 都抓出來做一個轉發/按讚排序。

抓 Blog Post 只需要 API Key 就行,所以我們的 Request API 如下:

'GET', "https://api.tumblr.com/v2/blog/{blog-identifier}/posts?api_key={API KEY}"

這邊我們的 blog-identifier 就是 www.pusheen.com

還有有一些可選的參數比如

  • type :選擇特定的 post type,videoquotephototext
  • tag : 選取特定標籤的 post
  • offset : 會從哪篇文開始傳。預設是0 也就是第一篇

由於之前抓到 Response 然後把裡面東西插進 HTML 的事情已經做過很多次了,這次不再贅述。
程式碼如下:

// HTML
<div id="container"></div>

// CSS
#container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  text-align:center;
  justify-content:center;
}
#container div{
  margin:10px;
}

img{
    max-height:250px;
}

// JS
var apiKey = "71MMwd3Pe6fzZNk67UJKJ6mav2RzHHIKQxrMwHWtxaVitGXTrN";
var url =
  "https://api.tumblr.com/v2/blog/www.pusheen.com/posts?api_key=" +
  apiKey +
  "&type=photo";

var container = document.querySelector("#container");

function insertPost(url, img, count) {
  var postBox = document.createElement("div");
  var postUrl = document.createElement("a");
  var postImg = document.createElement("img");
  var postText = document.createElement("p");

  postUrl.href = url;
  postImg.src = img;
  postText.innerHTML = count;

  container.appendChild(postBox);
  postBox.appendChild(postUrl);
  postUrl.appendChild(postImg);
  postBox.appendChild(postText);
}

function makeRequest() {
  xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    var data = response.response.posts;

    data
      .sort(function(post_a, post_b) {
        return post_b.note_count - post_a.note_count;
      })
      .map(function(post) {
        insertPost(
          post.post_url,
          post.photos[0].alt_sizes[post.photos[0].alt_sizes.length - 3].url,
          post.note_count
        );
      });
  };
  xhr.open("GET", url, true);
  xhr.send();
}

makeRequest();

不過,由於每次 API Request 最多只能抓出 20 篇文,所以必須要 loop 幾次才能把全部的文抓出來。
把全部文章 loop 出來的部分,就不在文章裡寫出來了,可以到 Codepen 去看完整版。


上一篇
[30apis] Day 10 : Nutritionix API
下一篇
[30apis] Day 12 : OMDb & TMDb API (電影)
系列文
我每天都接一個API30

尚未有邦友留言

立即登入留言