Hiển thị data từ Google sheet lên WordPress bằng Sheet API

Issue: 

Nhúng iframe Google Sheet vào WordPress có độ trễ về hiển thị dữ liệu & khó tương tác đối với người dùng. 

Solution: 

Hiển thị data từ Google sheet lên WordPress thông qua Sheet API để tăng trải nghiệm người dùng. 

Các bước thực hiện: 

1. Chuẩn bị Google sheet data:

+ chuẩn bị data trong Google sheet

+ Chuyển sheet thành json data endpoint (Google Sheet API V4): 

Theo Sheet API v4, endpoint url như sau: 

https://docs.google.com/spreadsheets/d/id/gviz/tq?tqx=out:json&tq&gid;

Với: 

+ id: spreadsheet id

+ gid: Google grid ID – ID của tab trong spreadsheet

Chú ý:

+ Nếu spreadsheet được share publicly, có thể lấy data từ endpoint

+ Nếu spreadsheet không được share, cần sử dụng access token từ OAuth2 và service account để lấy dữ liệu từ spreadsheet.

 

2. Tạo function để WordPress đọc dữ liệu từ Sheet API:

Example function:
function sheet_value_shortcode($atts) {
$API = '[Insert API Key Here]’;
$google_spreadsheet_ID = '[Insert Google Spreadsheet ID Here]';
$api_key = esc_attr( $API);
$location = $atts['location'];
$get_cell = new WP_Http();
$cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";
$cell_response = $get_cell -> get( $cell_url);
$json_body = json_decode($cell_response['body'],true);
$cell_value = $json_body['values'][0][0];
return $cell_value;
}
add_shortcode('get_sheet_value', 'sheet_value_shortcode');

Ref:
https://www.bpwebs.com/pull-data-from-google-sheets-to-html-table/  => show only 1 cell
https://stackoverflow.com/questions/21009898/display-the-content-of-a-google-sheet-cell-in-a-wordpress-site
https://www.freecodecamp.org/news/cjn-google-sheets-as-json-endpoint/   => using googe sheet as a Json endpoint
https://stackoverflow.com/questions/58328325/authenticate-with-google-sheet-api-v4   authenticate with API v4
Detail explanation on sheet API: https://www.sharperlight.com/uncategorized/2022/04/06/accessing-the-google-sheets-api-via-sharperlight-query-builder/