<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(response); // The current login status of the person.
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '400706684811642',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v20.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
var page_access_token;
var page_id;
var ig_id;
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
FB.api('/me/accounts?fields=instagram_business_account,access_token', function(response) {
ig_id = response.data[0].instagram_business_account.id;
page_access_token = response.data[0].access_token;
page_id = response.data[0].id;
});
FB.api('/17841466475166254/media?fields=media_url', function(response) {
response.data.forEach(function(item) {
console.log(item.media_url);
var img = document.createElement('img');
img.src = item.media_url;
img.width=200;
img.addEventListener('click', function() {
// Run your JavaScript function here
console.log('Image clicked');
document.getElementById('selected').innerHTML = item.id;
});
var a = document.createElement('a');
a.href = '#'
a.appendChild(img);
document.getElementById('posts').appendChild(a);
});
});
}
function submit() {
var post_id = document.getElementById('selected').innerHTML;
var keywords = document.getElementById('keywords').value.split(",");
var reply = document.getElementById('reply').value;
var li = document.createElement('li');
var a_del = document.createElement('a');
a_del.href = '#';
a_del.textContent= 'Delete';
li.innerHTML = document.getElementById('keywords').value + reply;
li.appendChild(a_del);
document.getElementById('automations').appendChild(li);
document.getElementById('keywords').value = "";
document.getElementById('reply').value = "";
// FB.api('/'+post_id+'/comments', function(response) {
// response.data.forEach(function(item) {
// var comment = item.text;
// var comment_id = item.id;
// var keywords = document.getElementById('keywords').value.split(",");
// var containsKeyword = keywords.some(function(keyword) {
// return comment.includes(keyword);
// });
//
// if (!containsKeyword) {
// return;
// }
//
// // send private reply
// var reply = document.getElementById('reply').value;
// FB.api('/'+page_id+'/messages', 'POST',
// {
// recipient: { comment_id: comment_id },
// message: { text: reply },
// access_token: page_access_token
// },
// function(response) {
// console.log(response);
// }
// );
//
// });
// });
}
</script>
<!-- The JS SDK Login Button -->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="asd">
<ul id="automations"></ul>
</div>
<div id="status">
</div>
<div id="posts">
</div>
<div id="control">
<p id="selected"></p>
<label for="keywords">Keywords:</label>
<input type="text" id="keywords" name="keywords">
<br>
<label for="reply">Reply:</label>
<textarea id="reply" name="reply"></textarea>
<button onclick="submit()">Submit</button>
</div>
<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>