Hướng dẫn Get Data Blogger JSON Feed API

Hướng dẫn Get Data Blogger JSON Feed API đơn giản ngắn gọn, các bạn có thể áp dụng để lấy dữ liệu từ bài viết blogspot hiển thị ra ngoài trang blog của các bạn.

Các bạn có thể nhìn vô cây JSON bên dưới đó chính là các API để chúng ta có thể sử dụng để Get dữ liệu.

Đoạn code lấy 3 dữ liệu chính là: Tên bài, Link bài, Link hỉnh ảnh, với cách viết này chúng ta không cần sử dụng thư viện jQuery

<script>

  //<![CDATA[

  function datajson(json) {

    for (var n = 0; n < json.feed.entry.length; n++) {

      var entry = json.feed.entry[n];

      for (var s = 0; s < json.feed.entry[n].link.length; s++) {

        if (json.feed.entry[n].link[s].rel === "alternate") {

          var link = json.feed.entry[n].link[s].href;

          break

        }

      }

      var title = json.feed.entry[n].title.$t;

      var thumb = json.feed.entry[n].media$thumbnail.url;

      var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';

      document.write(html)

    }

  }

  //]]>

</script>

Hoặc gắn cho một ID có tên là result ở một vị trí nào đó

<script>

  //<![CDATA[

  function datajson(json) {

    for (var n = 0; n < json.feed.entry.length; n++) {

      var entry = json.feed.entry[n];

      for (var s = 0; s < json.feed.entry[n].link.length; s++) {

        if (json.feed.entry[n].link[s].rel === "alternate") {

          var link = json.feed.entry[n].link[s].href;

          break

        }

      }

      var title = json.feed.entry[n].title.$t;

      var thumb = json.feed.entry[n].media$thumbnail.url;

      var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';

      document.getElementById("result").innerHTML += html;

    }

  }

  //]]>

</script>

Sau khi viết xong đoạn Script để xử lý dữ liệu thì chúng ta cần gọi đoạn script trên như sau

1. Lấy toàn bộ bài viết

<script src='/feeds/posts/default?max-results=8&amp;orderby=published&amp;alt=json&amp;callback=datajson'/>

2. Lấy theo Label

<script src='/feeds/posts/default/-/Tên Label?max-results=8&amp;orderby=published&amp;alt=json&amp;callback=datajson'/>

Cũng đoạn script trên và viết theo kiểu Ajax như sau:

Đầu tiên chúng ta cần thêm thư viện jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" />

Viết code theo kiểu Ajax chúng ta có thể chọn một trong hai

1. Chia làm hai

<script>

  //<![CDATA[

  function datajson(json) {

    for (var n = 0; n < json.feed.entry.length; n++) {

      var entry = json.feed.entry[n];

      for (var s = 0; s < json.feed.entry[n].link.length; s++) {

        if (json.feed.entry[n].link[s].rel === "alternate") {

          var link = json.feed.entry[n].link[s].href;

          break

        }

      }

      var title = json.feed.entry[n].title.$t,

        thumb = json.feed.entry[n].media$thumbnail.url;

      var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';

      $('#result').append(html);

    }

  }

  $.ajax({

    url: "/feeds/posts/default",

    type: "get",

    data: {

      alt: "json",

      "max-results": 5

    },

    dataType: "jsonp",

    jsonpCallback: "datajson"

  })

  //]]>

</script>

2. Gộp chung

<script>

  //<![CDATA[

  $.ajax({

    url: "/feeds/posts/default",

    type: "get",

    data: {

      alt: "json",

      "max-results": 5

    },

    dataType: "jsonp",

    success: function(json) {

      for (var n = 0; n < json.feed.entry.length; n++) {

        var entry = json.feed.entry[n];

        for (var s = 0; s < json.feed.entry[n].link.length; s++) {

          if (json.feed.entry[n].link[s].rel === "alternate") {

            var link = json.feed.entry[n].link[s].href;

            break

          }

        }

        var title = json.feed.entry[n].title.$t,

          thumb = json.feed.entry[n].media$thumbnail.url;

        var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';

        $('#result').append(html);

      }

    }

  })

  //]]>

</script>

Trong đó bạn cần có 1 thẻ <div> hoặc <span> có id là result để hiển thị dữ liệu vào vị trí đó

<span id = 'result'/>

Để lấy theo label các bạn sửa chỗ url thành

    url: "/feeds/posts/default/-/Tên label"

Cái var entry = json.feed.entry[n]; bạn có thể gọi lại của các thẻ data bên dưới cho ngắn gọn, hoặc có thể xoá đi.

Dựa vào đoạn code trên chúng ta có thể thiết kế các mẫu giao diện blogspot bán hàng, mẫu giao diện blogspot bất động sản...

Hướng dẫn Get Data Blogger JSON Feed API được thiết kế đẹp hiện đại chuyên nghiệp chuẩn seo, tối ưu code giúp trang blogspot load nhanh

Chi tiết liên hệ ĐT / Zalo: 097 1539 681

Khi mua template các bạn được hỗ trợ cài đặt hoàn chỉnh, hỗ trợ qua Teamviewer, Ultraviewer

Tags: Blog Json