Bài đăng theo nhãn, bài đăng gần đây, bài đăng ngẫu nhiên, nhận xét gần đây, thống kê blog... những keyword đó chắc đã quá quen thuộc với những blogger. Và để làm được điều đó bạn sẽ cần sử dụng tới Blogger JSON Feed API để lấy dữ liệu. Trong bài viết này và một cơ số bài viết nữa tôi sẽ cùng các bạn tìm hiểu về nó.
Ưu điểm của việc tải feed lấy dữ liệu đó là lấy được dữ liệu :)) khi đã lấy được dữ liệu bạn có thể kết hợp với html + css để build ra rất nhiều tiện ích phục vụ cho việc thiết kế blog, tuy nhiên nhược điểm của nó là làm trang tải chậm hơn rất nhiều. Để có thể quẩy được với feed yêu cầu bạn cần có kiến thức về json, javascript bên cạnh đó là html và css để build giao diện khi đã lấy được dữ liệu
Trước tiên để lấy được dữ liệu từ feed bạn cần chỉnh sửa phần cài đặt nguồn cấp, ở đây tôi khuyên bạn nên chọn chế độ "Cho đến dấu ngắt"
Với post blogger cung cấp cho bạn 2 dạng
- /feeds/posts/default (mặc định trả về cho 25 bài đầu)
- /feeds/posts/summary (mặc định trả về cho 25 bài đầu)
Bạn có thể copy nội dung trong đó, truy cập trang http://jsonviewer.stack.hu/ dán nội dung vào tab Text và chuyển qua tab Viewer để xem rõ hơn cấu trúc của file json
Tiếp theo ta có thêm một vài tiền tố nữa như sau
- /feeds/posts/default?alt=json&max-results=50 (lấy 50 bài đầu, con số tối đa là 150)
- /feeds/posts/default?alt=json&max-results=50&orderby=published (lấy 50 bài đầu và sắp xếp theo "published")
Sự khác biệt của /default và /summary đó là node chứa nội dung bài đăng
Vì vậy khi build các tiện ích bạn cần chú ý sự khác biệt giữa /default và /summary
Tiếp theo ta sẽ dùng script để lấy dữ liệu
Lý thuyết callback tôi sẽ không nhắc lại nữa, ở đây tôi đã viết sẵn cho bạn đoạn js lấy toàn bộ dữ liệu cần thiết cho việc build tiện ích và có comment rất kĩ. Code như sau
Tiếp theo ta sẽ dùng script để lấy dữ liệu
1. Sử dụng callback
Lý thuyết callback tôi sẽ không nhắc lại nữa, ở đây tôi đã viết sẵn cho bạn đoạn js lấy toàn bộ dữ liệu cần thiết cho việc build tiện ích và có comment rất kĩ. Code như sau
<script type="text/javascript">
function myCallback(json) {
// id mỗi blog chỉ có 1 nên cho ra ngoài vòng lặp
a = json.feed.id.$t;
document.write("ID Blog: " + a.substring(26, 45));
document.write("<br />-------------------------")
for (var i = 0; i < json.feed.entry.length; i++) {
// lấy thời gian đăng bài cho mỗi bài viết
b = json.feed.entry[i].published.$t;
document.write("<br />Ngày đăng của bài thứ " + i + ": " + b)
// lấy thời gian cập nhật bài viết
c = json.feed.entry[i].updated.$t;
document.write("<br />Ngày cập nhật của bài thứ " + i + ": " + c)
// lấy danh sách nhãn, do một bài có thể có nhiều nhãn nên phải dùng thêm 1 vòng lặp
var labels = [];
for (var j = 0; j < json.feed.entry[i].category.length; j++) {
labels.push(json.feed.entry[i].category[j].term);
}
document.write("<br />Danh sách nhãn của bài thứ " + i + ": " + labels)
// lấy tiêu đề cho mỗi bài đăng
d = json.feed.entry[i].title.$t;
document.write("<br />Tiêu đề của bài thứ " + i + ": " + d)
// lấy đoạn trích ngắn gồm 100 kí tự, dùng dấu cách để cắt chuỗi, phần còn lại thay bằng dấu ...
e1 = json.feed.entry[i].summary.$t;
e2 = e1.substring(0, 100);
e3 = e2.lastIndexOf(" ");
e = e2.substring(0, e3) + '...';
document.write("<br />Đoạn trích ngắn của bài thứ " + i + ": " + e)
// lấy link bình luận, do node link có 5 child nên phải sử dụng vòng lặp và lấy node thứ 2
for (var k = 0; k < json.feed.entry[i].link.length; k++) {
if (json.feed.entry[i].link[k].rel == 'replies' && json.feed.entry[i].link[k].type == 'text/html') {
f = json.feed.entry[i].link[k].href;
break; // lấy được link rồi thì chuồn thôi
}
}
document.write("<br />Link bình luận của bài thứ " + i + ": " + f)
// lấy link bài viết, tương tự như trên nhưng lần này sẽ lấy node thứ 5
for (var k1 = 0; k1 < json.feed.entry[i].link.length; k1++) {
if (json.feed.entry[i].link[k1].rel == 'alternate') {
g = json.feed.entry[i].link[k1].href;
break;
}
}
document.write("<br />Link bài viết của bài thứ " + i + ": " + g)
// lấy thông tin của tác giả bao gồm tên, url và ảnh đại diện
h = json.feed.entry[i].author[0].name.$t;
l = json.feed.entry[i].author[0].uri.$t;
m = json.feed.entry[i].author[0].gd$image.src;
document.write("<br />Tên tác giả của bài thứ " + i + ": " + h)
document.write("<br />Profile tác giả của bài thứ " + i + ": " + l)
document.write("<br />Avatar tác giả của bài thứ " + i + ": " + m)
// lấy thumbnail của bài viết, do ảnh mặc định 72x72 nên ta sẽ thay đổi kích thước ảnh luôn
n = json.feed.entry[i].media$thumbnail.url.replace("s72-c", "s1600")
document.write("<br />Thumbnail độ phân giải cao của bài thứ " + i + ": " + n)
document.write("<br />")
}
}
</script>
<!-- Callback với feed mặc định 25 bài -->
<!-- <script src="https://hunghoangvan1001nd.blogspot.com/feeds/posts/summary?alt=json&callback=myCallback"></script> -->
<!-- Callback với feed 50 bài -->
<script src="https://hunghoangvan1001nd.blogspot.com/feeds/posts/summary?alt=json&max-results=50&callback=myCallback"></script>
<!-- Call back với feed 50 bài và sắp xếp theo published -->
<!-- <script src="https://hunghoangvan1001nd.blogspot.com/feeds/posts/summary?orderby=published&max-results=50&alt=json&callback=myCallback"></script> -->Ở đây tôi dùng document.write để show ra cho bạn xem kết quả thôi, nhiệm vụ của bạn không phải là show ra như vậy, ta sẽ dùng js để tạo ra các div,span,... rồi append các dữ liệu đã lấy được vào, sau đó là css để hiển thị đẹp hơn. Một khi đã có móng rồi thì xây nhà không thành vấn đề đúng không :)
2. Sử dụng ajax
Phương pháp callback ở trên hay làm trang bị giật giật khi tải, vì vậy các thiết kế template blogger mới gần đây lập trình viên thường dùng ajax để get dữ liệu, code lấy dữ liệu hoàn toàn giống ở trên chỉ khác 1 chút như sau
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'https://hunghoangvan1001nd.blogspot.com/feeds/posts/summary',
type: 'GET',
dataType: 'jsonp',
data: {
'orderby': 'published',
'max-results': '20',
alt: 'json'
},
}).done(function(json) {
a = json.feed.id.$t;
document.write("ID Blog: " + a.substring(26, 45));
document.write("<br />-------------------------")
for (var i = 0; i < json.feed.entry.length; i++) {
// lấy thời gian đăng bài cho mỗi bài viết
b = json.feed.entry[i].published.$t;
document.write("<br />Ngày đăng của bài thứ " + i + ": " + b)
// lấy thời gian cập nhật bài viết
c = json.feed.entry[i].updated.$t;
document.write("<br />Ngày cập nhật của bài thứ " + i + ": " + c)
// lấy danh sách nhãn, do một bài có thể có nhiều nhãn nên phải dùng thêm 1 vòng lặp
var labels = [];
for (var j = 0; j < json.feed.entry[i].category.length; j++) {
labels.push(json.feed.entry[i].category[j].term);
}
document.write("<br />Danh sách nhãn của bài thứ " + i + ": " + labels)
// lấy tiêu đề cho mỗi bài đăng
d = json.feed.entry[i].title.$t;
document.write("<br />Tiêu đề của bài thứ " + i + ": " + d)
// lấy đoạn trích ngắn gồm 100 kí tự, dùng dấu cách để cắt chuỗi, phần còn lại thay bằng dấu ...
e1 = json.feed.entry[i].summary.$t;
e2 = e1.substring(0, 100);
e3 = e2.lastIndexOf(" ");
e = e2.substring(0, e3) + '...';
document.write("<br />Đoạn trích ngắn của bài thứ " + i + ": " + e)
// lấy link bình luận, do node link có 5 child nên phải sử dụng vòng lặp và lấy node thứ 2
for (var k = 0; k < json.feed.entry[i].link.length; k++) {
if (json.feed.entry[i].link[k].rel == 'replies' && json.feed.entry[i].link[k].type == 'text/html') {
f = json.feed.entry[i].link[k].href;
break; // lấy được link rồi thì chuồn thôi
}
}
document.write("<br />Link bình luận của bài thứ " + i + ": " + f)
// lấy link bài viết, tương tự như trên nhưng lần này sẽ lấy node thứ 5
for (var k1 = 0; k1 < json.feed.entry[i].link.length; k1++) {
if (json.feed.entry[i].link[k1].rel == 'alternate') {
g = json.feed.entry[i].link[k1].href;
break;
}
}
document.write("<br />Link bài viết của bài thứ " + i + ": " + g)
// lấy thông tin của tác giả bao gồm tên, url và ảnh đại diện
h = json.feed.entry[i].author[0].name.$t;
l = json.feed.entry[i].author[0].uri.$t;
m = json.feed.entry[i].author[0].gd$image.src;
document.write("<br />Tên tác giả của bài thứ " + i + ": " + h)
document.write("<br />Profile tác giả của bài thứ " + i + ": " + l)
document.write("<br />Avatar tác giả của bài thứ " + i + ": " + m)
// lấy thumbnail của bài viết, do ảnh mặc định 72x72 nên ta sẽ thay đổi kích thước ảnh luôn
n = json.feed.entry[i].media$thumbnail.url.replace("s72-c", "s1600")
document.write("<br />Thumbnail độ phân giải cao của bài thứ " + i + ": " + n)
document.write("<br />")
}
})
</script>
Bạn có thể dán code vào trang https://hung1001-demo.blogspot.com/ để xem nhanh kết quả thu được nhé
Ngoài ra blogger còn cung cấp feed theo label, feed cho bình luận, feed cho trang,... tôi sẽ dần giới thiệu cho các bạn ở bài viết sau...
Chúc bạn tự build thành công các tiện ích sử dụng feed theo ý mình. Có gì thắc mắc để lại bình luận để cùng giải quyết nhé !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên