-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
125 lines (110 loc) · 3.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login Integration</title>
</head>
<body>
<h2>Add Facebook Login to your webpage</h2>
<!-- Display the user's profile info -->
<p id="profile"></p>
<!-- Display the list of pages managed by the user -->
<h3>Your Pages:</h3>
<ul id="pages"></ul>
<!-- Display page insights -->
<h3>Page Insights:</h3>
<div id="insights"></div>
<!-- Add the Facebook SDK for JavaScript -->
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : '519808893821077',
xfbml : true,
version : 'v13.0'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
fetchUserProfile();
fetchPages();
} else {
FB.login(function(response) {
if (response.authResponse) {
fetchUserProfile();
fetchPages();
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email, pages_show_list, pages_read_engagement, read_insights'});
}
});
};
function fetchUserProfile() {
FB.api('/me', {fields: 'name, email'}, function(response) {
document.getElementById("profile").innerHTML =
"Good to see you, " + response.name + ". I see your email address is " + response.email;
});
}
function fetchPages() {
FB.api('/me/accounts', function(response) {
console.log(response); // Log the entire response for debugging
if (response && !response.error) {
if (response.data && response.data.length > 0) {
let pagesList = document.getElementById("pages");
response.data.forEach(page => {
let listItem = document.createElement('li');
listItem.innerHTML = `<b>${page.name}</b> (ID: ${page.id})`;
pagesList.appendChild(listItem);
fetchPageInsights(page.id);
});
} else {
document.getElementById("pages").innerHTML = "No pages found.";
}
} else {
console.log('Error fetching pages:', response.error);
document.getElementById("pages").innerHTML = "Error fetching pages. Please check console for details.";
}
});
}
function fetchPageInsights(pageId) {
FB.api(`/${pageId}/insights`, function(response) {
let insightsDiv = document.getElementById("insights");
if (response.data && response.data.length > 0) {
response.data.forEach(insight => {
let insightItem = document.createElement('p');
insightItem.innerHTML = `<b>${insight.name}</b>: ${insight.values[0].value}`;
insightsDiv.appendChild(insightItem);
});
} else {
insightsDiv.innerHTML = "No insights available.";
}
});
}
function logout() {
FB.logout(function(response) {
document.getElementById("profile").innerHTML = "You have logged out.";
document.getElementById("pages").innerHTML = "";
document.getElementById("insights").innerHTML = "";
});
}
</script>
<!-- Button to trigger Facebook login -->
<div class="fb-login-button"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
data-use-continue-as="true"></div>
<!-- Logout button, shifted to the bottom -->
<br><br>
<button onclick="logout()" style="background-color: #4267b2; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
Logout
</button>
</body>
</html>