How to get share and comment counts using graph API

Trong quá trình làm web, việc tương tác với các mạng xã hội đặc biệt là facebook để tăng traffic là điều thường thấy. Bài viết này sẽ hướng dẫn bạn cách sử dụng graph api facebook lấy dữ liệu, phục vụ cho việc hiển thị chúng lên website

Graph API facebook cung cấp cho ta một vài dữ liệu như số lượt chia sẻ, số lượt bình luận, mô tả... ứng với mỗi url. Bạn có thể check nhanh bằng việc ghép url theo cấu trúc sau

https://graph.facebook.com/your_url

Ví dụ: https://graph.facebook.com/https://www.facebook.com/. Ưu điểm của cách lấy dữ liệu này là bạn không cần thiết phải tích hợp sdk.js của facebook mà vẫn có thể hiển thị được số lượt bình luận cũng như chia sẻ lên trang của mình nhờ sử dụng ajax

Trước tiên tích hợp jQuery, bỏ qua nếu blog bạn đã có

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>

I. Lấy URL trong tiện ích Blog1

Theo đó ta sẽ lấy được url của bài đăng nhờ thẻ gọi dữ liệu <data:post.url/>

Đặt script sau nằm trong <b:includable id='post' var='post'>

<script type='text/javascript'>
var url=&quot;<data:post.url/>&quot;;
//<![CDATA[
$.ajax({
    url: "https://graph.facebook.com/" + url,
    type: "get",
    dataType: "jsonp",
    success: function(t) {
        $("#share_count").html(t.share.share_count);
        $("#cmt_count").html(t.share.comment_count);
    }
});
//]]></script>

Bây giờ bạn tạo thêm 2 thẻ html để hiển thị dữ liệu theo id ở trên, ví dụ

<span id='share_count'></span> Lượt chia sẻ
<span id='cmt_count'></span> Bình luận

CSS cho nó bạn tự viết theo ý thích của mình

II. Lấy URL ngoài tiện ích Blog1

Thay vì dùng thẻ gọi dữ liệu tôi có thể dùng location.href để lấy url hiện tại đang truy cập. Sử dụng thẻ điều kiện và chèn code trước thẻ đóng </body>

<b:if cond='data:view.isPost'> 
<script type='text/javascript'>//<![CDATA[
var url = location.href;
$.ajax({
    url: "https://graph.facebook.com/" + url,
    type: "get",
    dataType: "jsonp",
    success: function(t) {
        $("#share_count").html(t.share.share_count);
        $("#cmt_count").html(t.share.comment_count);
    }
});
//]]></script>
</b:if>

Tương tự bạn cũng chèn thêm 2 thẻ tag HTML như phần 1 để hiển thị dữ liệu

Ok bài viết không quá khó, hi vọng bạn áp dụng thành công lên blog của mình

Good Luck !