<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// when the button is clicked, this function will fire
function get_json_data() {
// get HTML tag ID of the databox that will show the result we get & put it as a variable called 'databox'
var databox = document.getElementById("databox");
// URL API facebook + access token
var url = "https://graph.facebook.com/[PAGE_ID_HERE]/posts?access_token=[ACCESS_TOKEN_HERE]";
// start the http request
var hr = new XMLHttpRequest();
// open & set http request parameters
hr.open("GET", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// if we received OK status from API server
hr.onreadystatechange = function () {
if (hr.readyState == 4 && hr.status == 200) {
// parse data from server to JSON format
var data = JSON.parse(hr.responseText);
// put it in the databox HTML tag ID
// 0 in square bracket is data array - you change it base on your needs
// why 0? because 0 is the latest one
databox.innerHTML = data.data[0].name;
}
}
// send the http request
hr.send();
}
</script>
</head>
<body>
<p id="databox"></p>
<input type="button" value="Get Latest Post" onclick="get_json_data()" />
</body>
</html>