从脸谱中的个人资料图片相册生成图像
嘿伙计们正在尝试获取用户在个人资料图片相册中上传的照片。但是图片没有正确获取。代码是
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
FB.api('/me/albums?fields=id,name', function(response) {
for (var i=0; i<response.data.length; i++) {
var album = response.data[i];
if (album.name == 'Profile Pictures'){
FB.api('/'+album.id+'/photos', function(photos){
if (photos && photos.data && photos.data.length){
for (var j=0; j<photos.data.length; j++){
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.src = photo.picture;
document.body.appendChild(image);
}
}
});
break;
}
}
});
window.fbAsyncInit = function() {
FB.init({
appId : '606714542734115',
cookie : true,
xfbml : true,
version : 'v2.0'
};
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
但是，当我运行此代码时，它显示一个空白页面..我知道我的代码中有错误..因为我对fb-js-sdk不熟悉我无法弄清楚..希望你们可以帮助我。
1 个答案:
答案 0 :(得分：0)
我帮助您在脚本标记内填写 html，head，body 标记和 3个缺失行：
<html>
<head>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
} else {
document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() { //####################### 1st missing line
//############## added count fields
FB.api('/me/albums?fields=id,name,count', function(response) {
for (var i = 0; i < response.data.length; i++) {
var album = response.data[i];
if (album.name == 'Profile Pictures') {
//############ debug album total photos
console.log("you have uploaded " + album.count + " pictures");
FB.api('/' + album.id + '/photos', function(photos) {
if (photos && photos.data && photos.data.length) {
for (var j = 0; j < photos.data.length; j++) {
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.src = photo.picture;
document.body.appendChild(image);
}
}
});
break;
}
}
});
} //####################### 2nd missing line
window.fbAsyncInit = function() {
FB.init({
appId: '606714542734115',
cookie: true,
xfbml: true,
version: 'v2.0'
}); //####################### 3rd missing line
};
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<h1>Testing</h1>
<img src="http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png" alt="Fb Connect" title="Login with facebook" onclick="checkLoginState();"/>
<h1 id="status" onclick="getValue()"></h1>
<div id="fb-root"></div>
</body>
</html>
另外，请确保正确设置您的应用程序配置Given URL is not permitted by the application configuration
更新：
更新（最终工作完成代码）：
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '606714542734115',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
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 + '!';
});
//############## added count fields
console.log('Welcome! Fetching your information2.... ');
FB.api('/me/albums?fields=id,name,count', function(response) {
for (var i = 0; i < response.data.length; i++) {
console.log('Welcome! Fetching your information3.... ');
var album = response.data[i];
if (album.name == 'Profile Pictures') {
//############ debug album total photos
document.getElementById('photos_total').innerHTML = "you have uploaded " + album.count + " pictures";
console.log("you have uploaded " + album.count + " pictures");
FB.api('/' + album.id + '/photos', function(photos) {
if (photos && photos.data && photos.data.length) {
for (var j = 0; j < photos.data.length; j++) {
var photo = photos.data[j];
// photo.picture contain the link to picture
var image = document.createElement('img');
image.src = photo.picture;
document.body.appendChild(image);
}
}
});
break;
}
}
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email,user_photos" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
<div id="photos_total">
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？