html 简单的“获取我所有的Facebook照片”facebook JS SDK + Graph API示例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 简单的“获取我所有的Facebook照片”facebook JS SDK + Graph API示例相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Photos with Friends!</title>
	<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script>
		/**
		 * This is the getPhoto library
		 */

		function makeFacebookPhotoURL( id, accessToken ) {
			return 'https://graph.facebook.com/' + id + '/picture?access_token=' + accessToken;
		}

		function login( callback ) {
			FB.login(function(response) {
				if (response.authResponse) {
					//console.log('Welcome!  Fetching your information.... ');
					if (callback) {
						callback(response);
					}
				} else {
					console.log('User cancelled login or did not fully authorize.');
				}
			},{scope: 'user_photos'} );
		}

		function getAlbums( callback ) {
			FB.api(
					'/me/albums',
					{fields: 'id,cover_photo'},
					function(albumResponse) {
						//console.log( ' got albums ' );
						if (callback) {
							callback(albumResponse);
						}
					}
				);

		}

		function getPhotosForAlbumId( albumId, callback ) {
			FB.api(
					'/'+albumId+'/photos',
					{fields: 'id'},
					function(albumPhotosResponse) {
						//console.log( ' got photos for album ' + albumId );
						if (callback) {
							callback( albumId, albumPhotosResponse );
						}
					}
				);
		}

		function getLikesForPhotoId( photoId, callback ) {
			FB.api(
					'/'+albumId+'/photos/'+photoId+'/likes',
					{},
					function(photoLikesResponse) {
						if (callback) {
							callback( photoId, photoLikesResponse );
						}
					}
				);
		}

		function getPhotos(callback) {

			var allPhotos = [];

			var accessToken = '';

			login(function(loginResponse) {
					accessToken = loginResponse.authResponse.accessToken || '';
					getAlbums(function(albumResponse) {
							var i, album, deferreds = {}, listOfDeferreds = [];

							for (i = 0; i < albumResponse.data.length; i++) {
								album = albumResponse.data[i];
								deferreds[album.id] = $.Deferred();
								listOfDeferreds.push( deferreds[album.id] );
								getPhotosForAlbumId( album.id, function( albumId, albumPhotosResponse ) {
										var i, facebookPhoto;
										for (i = 0; i < albumPhotosResponse.data.length; i++) {
											facebookPhoto = albumPhotosResponse.data[i];
											allPhotos.push({
												'id'	:	facebookPhoto.id,
												'added'	:	facebookPhoto.created_time,
												'url'	:	makeFacebookPhotoURL( facebookPhoto.id, accessToken )
											});
										}
										deferreds[albumId].resolve();
									});
							}

							$.when.apply($, listOfDeferreds ).then( function() {
								if (callback) {
									callback( allPhotos );
								}
							}, function( error ) {
								if (callback) {
									callback( allPhotos, error );
								}
							});
						});
				});
		}
	</script>

	<script>
		/**
		 * This is the bootstrap / app script
		 */

		// wait for DOM and facebook auth
		var docReady = $.Deferred();
		var facebookReady = $.Deferred();

		$(document).ready(docReady.resolve);

		window.fbAsyncInit = function() {
			FB.init({
			  appId      : '548466918497006',
			  channelUrl : '//conor.lavos.local/channel.html',
			  status     : true,
			  cookie     : true,
			  xfbml      : true
			});
			facebookReady.resolve();
		};

		$.when(docReady, facebookReady).then(function() {
			if (typeof getPhotos !== 'undefined') {
				getPhotos( function( photos ) {
					console.log( photos );
				});
			}
		});

		// call facebook script
		(function(d){
		 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
		 js = d.createElement('script'); js.id = id; js.async = true;
		 js.src = "http://connect.facebook.net/en_US/all.js";
		 d.getElementsByTagName('head')[0].appendChild(js);
		}(document));

	</script>
</head>
<body>
	<div id="fb-root"></div>
</body>
</html>



以上是关于html 简单的“获取我所有的Facebook照片”facebook JS SDK + Graph API示例的主要内容,如果未能解决你的问题,请参考以下文章

如何用html编写一个简单的网页

如何用html编写一个简单的网页

怎样用Python写一个Html的简单网页

简单的 html dom 抓取大的 html 文件

html 简单的html file.html

简单登录html页面