├── .gitignore
├── LICENSE
├── README.md
├── demo
    ├── html
    │   ├── fb-albums.html
    │   ├── fb-photos.html
    │   └── index.html
    └── js
    │   └── script.js
├── package.json
└── src
    └── fb-code.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 WebsiteBeaver.com
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Facebook API JavaScript SDK get all Albums and Photos
  2 | 
  3 | ![](https://s3.amazonaws.com/websitebeaver/blog/facebook-api-javascript-sdk-get-all-albums-and-photos/main.jpg)
  4 | 
  5 | A simple demo of how to use the Facebook API with the JavaScript SDK to get all of your albums and photos. Luckily the [Cordova Facebook plugin](https://github.com/jeduan/cordova-plugin-facebook4) is pretty similar to it also.
  6 | 
  7 | A full writeup can be found here https://websitebeaver.com/facebook-api-javascript-sdk-get-all-albums-and-photos, along with a [demo video](https://www.youtube.com/watch?v=s8kasi_8nIo).
  8 | 
  9 | ## Install
 10 | 
 11 | ### NPM
 12 | 
 13 | ```
 14 | npm install facebook-javascript-all-photos
 15 | ```
 16 | 
 17 | **Import**
 18 | 
 19 | ```javascript
 20 | import FbAllPhotos from 'facebook-javascript-all-photos';
 21 | ```
 22 | 
 23 | ### Git
 24 | 
 25 | ```
 26 | git clone https://github.com/WebsiteBeaver/facebook-javascript-all-photos.git
 27 | ```
 28 | 
 29 | **Import**
 30 | 
 31 | ```javascript
 32 | import FbAllPhotos from 'facebook-javascript-all-photos/src/fb-code.js';
 33 | ```
 34 | 
 35 | ## How to Use?
 36 | 
 37 | Firstly, you must get approved by [approved by Facebook](https://developers.facebook.com/docs/facebook-login/review/how-to-submit) to use `user_photos` permissions.
 38 | 
 39 | Once you're aproved, you just need to change the `appId` property on `FB.init()`, which is located in **index.html**.
 40 | 
 41 | ```javascript
 42 | FB.init({
 43 |   appId            : ENTER APP ID HERE,
 44 |   autoLogAppEvents : true,
 45 |   xfbml            : true,
 46 |   version          : 'v3.0'
 47 | });
 48 | ```
 49 | 
 50 | <a name="FbAllPhotos"></a>
 51 | 
 52 | ## FbAllPhotos
 53 | Class to simplify getting all Facebook albums and photos and albums using Facebook API.
 54 | 
 55 | **Kind**: global class  
 56 | **Properties**
 57 | 
 58 | | Name | Type | Description |
 59 | | --- | --- | --- |
 60 | | fullObj | <code>object</code> | Full object of Facebook albums, photos and pagination. |
 61 | | errorObj | <code>object</code> | Facebook-specific error object. |
 62 | | profilePictureURL | <code>string</code> | Facebook profile picture URL. |
 63 | 
 64 | 
 65 | - [Facebook API JavaScript SDK get all Albums and Photos](#facebook-api-javascript-sdk-get-all-albums-and-photos)
 66 |   - [Install](#install)
 67 |     - [NPM](#npm)
 68 |     - [Git](#git)
 69 |   - [How to Use?](#how-to-use)
 70 |   - [FbAllPhotos](#fballphotos)
 71 |     - [new FbAllPhotos()](#new-fballphotos)
 72 |     - [fbAllPhotos.getProfilePicture()](#fballphotosgetprofilepicture)
 73 |     - [fbAllPhotos.getAlbums([limitAlbums])](#fballphotosgetalbumslimitalbums)
 74 |     - [fbAllPhotos.getPhotosInAlbum(albumId, [limitPhotos])](#fballphotosgetphotosinalbumalbumid-limitphotos)
 75 |     - [fbAllPhotos.getMoreAlbums()](#fballphotosgetmorealbums)
 76 |     - [fbAllPhotos.getMorePhotosInAlbum(albumId)](#fballphotosgetmorephotosinalbumalbumid)
 77 | 
 78 | <a name="new_FbAllPhotos_new"></a>
 79 | 
 80 | ### new FbAllPhotos()
 81 | Create empty object.
 82 | 
 83 | **Example**  
 84 | ```js
 85 | const fbAllPhotos = new FbAllPhotos();
 86 | ```
 87 | <a name="FbAllPhotos+getProfilePicture"></a>
 88 | 
 89 | ### fbAllPhotos.getProfilePicture()
 90 | Get Facebook profile picture.
 91 | 
 92 | **Kind**: instance method of [<code>FbAllPhotos</code>](#FbAllPhotos)  
 93 | **Fulfil**: <code>string</code> - The url of the Facebook profile picture.  
 94 | **Reject**: <code>Error</code> - Rejected promise with message.  
 95 | **Example**  
 96 | ```js
 97 | fbAllPhotos.getProfilePicture()
 98 |   .then(profilePictureURL => { console.log(profilePictureURL); })
 99 |   .catch(errorMsg => {
100 |     if(errorMsg === 'fbError') {
101 |       console.log(fbAllPhotos.errorObj.message);
102 |     } else if(errorMsg === 'noProfilePicture') {
103 |       console.log('No profile picture');
104 |     }
105 |   });
106 | ```
107 | <a name="FbAllPhotos+getAlbums"></a>
108 | 
109 | ### fbAllPhotos.getAlbums([limitAlbums])
110 | Get Facebook albums.
111 | 
112 | **Kind**: instance method of [<code>FbAllPhotos</code>](#FbAllPhotos)  
113 | **Fulfil**: <code>object</code> - The full Facebook albums and photos object.  
114 | **Reject**: <code>Error</code> - Rejected promise with message.  
115 | 
116 | | Param | Type | Default | Description |
117 | | --- | --- | --- | --- |
118 | | [limitAlbums] | <code>int</code> | <code>25</code> | The number of albums to retrieve. |
119 | 
120 | **Example**  
121 | ```js
122 | fbAllPhotos.getAlbums(15)
123 |   .then(fullObj => { console.log(fullObj); })
124 |   .catch(errorMsg => {
125 |     if(errorMsg === 'fbError') {
126 |       console.log(fbAllPhotos.errorObj.message);
127 |     } else if(errorMsg === 'noAlbums') {
128 |       console.log('No albums');
129 |     }
130 |   });
131 | ```
132 | <a name="FbAllPhotos+getPhotosInAlbum"></a>
133 | 
134 | ### fbAllPhotos.getPhotosInAlbum(albumId, [limitPhotos])
135 | Get Facebook photos in a specified album.
136 | 
137 | **Kind**: instance method of [<code>FbAllPhotos</code>](#FbAllPhotos)  
138 | **Fulfil**: <code>object</code> - Object with only specified album and its photos.  
139 | **Reject**: <code>Error</code> - Rejected promise with message.  
140 | 
141 | | Param | Type | Default | Description |
142 | | --- | --- | --- | --- |
143 | | albumId | <code>int</code> |  | The album id to get photos from. |
144 | | [limitPhotos] | <code>int</code> | <code>25</code> | The number of photos in an album to retrieve. |
145 | 
146 | **Example**  
147 | ```js
148 | const albumId = 8395830308572754;
149 | 
150 | fbAllPhotos.getPhotosInAlbum(albumId, 15)
151 |   .then(albumObj => { console.log(albumObj); })
152 |   .catch(errorMsg => {
153 |     if(errorMsg === 'fbError') {
154 |       console.log(fbAllPhotos.errorObj.message);
155 |     } else if(errorMsg === 'noAlbum') {
156 |       console.log('Album does not exist');
157 |     } else if(errorMsg === 'noPhotos') {
158 |       console.log('No photos in album');
159 |     }
160 |   });
161 | ```
162 | <a name="FbAllPhotos+getMoreAlbums"></a>
163 | 
164 | ### fbAllPhotos.getMoreAlbums()
165 | Get more Facebook albums.
166 | 
167 | **Kind**: instance method of [<code>FbAllPhotos</code>](#FbAllPhotos)  
168 | **Fulfil**: <code>object</code> - The full Facebook albums and photos object.  
169 | **Reject**: <code>Error</code> - Rejected promise with message.  
170 | **Example**  
171 | ```js
172 | fbAllPhotos.getMoreAlbums()
173 |   .then(fullObj => { console.log(fullObj); })
174 |   .catch(errorMsg => {
175 |     if(errorMsg === 'fbError') {
176 |       console.log(fbAllPhotos.errorObj.message); //Error message from Facebook
177 |     } else if(errorMsg === 'serverError') {
178 |       console.log(fbAllPhotos.errorObj); //Fetch API response object
179 |     } else if(errorMsg === 'noMore') {
180 |       console.log('No more albums to retrieve');
181 |     }
182 |   });
183 | ```
184 | <a name="FbAllPhotos+getMorePhotosInAlbum"></a>
185 | 
186 | ### fbAllPhotos.getMorePhotosInAlbum(albumId)
187 | Get more Facebook photos in a specified album.
188 | 
189 | **Kind**: instance method of [<code>FbAllPhotos</code>](#FbAllPhotos)  
190 | **Fulfil**: <code>object</code> - Object with only specified album and its photos.  
191 | **Reject**: <code>Error</code> - Rejected promise with message.  
192 | 
193 | | Param | Type | Description |
194 | | --- | --- | --- |
195 | | albumId | <code>int</code> | The album id to get more photos from. |
196 | 
197 | **Example**  
198 | ```js
199 | const albumId = 8395830308572754;
200 | 
201 | fbAllPhotos.getMorePhotosInAlbum(albumId)
202 |   .then(albumObj => { console.log(albumObj); })
203 |   .catch(errorMsg => {
204 |     if(errorMsg === 'fbError') {
205 |       console.log(fbAllPhotos.errorObj.message); //Error message from Facebook
206 |     } else if(errorMsg === 'serverError') {
207 |       console.log(fbAllPhotos.errorObj); //Fetch API response object
208 |     } else if(errorMsg === 'noAlbum') {
209 |       console.log('Album does not exist');
210 |     } else if(errorMsg === 'noMore') {
211 |       console.log('No more photos in album to retrieve');
212 |     }
213 |   });
214 | ```


--------------------------------------------------------------------------------
/demo/html/fb-albums.html:
--------------------------------------------------------------------------------
 1 | <div class="page" data-name="fb-albums">
 2 | 	<div class="navbar">
 3 | 		<div class="navbar-inner sliding">
 4 | 			<div class="left">
 5 | 				<a href="/" class="link back">
 6 | 					<i class="icon icon-back"></i>
 7 | 				</a>
 8 | 			</div>
 9 | 			<div class="title">Facebook Albums</div>
10 | 			<div class="right">
11 | 				<a id="load-more-albums-link" class="link">Load More</a>
12 | 			</div>
13 | 		</div>
14 | 	</div>
15 | 	<div class="page-content">
16 | 		<div class="list media-list">
17 | 			<ul id="fb-album-list">
18 | 				{{#albums}}
19 | 				<li>
20 | 					<a class="album-thumb-link item-link item-content" data-album-id="{{id}}">
21 | 						<div class="item-media"><img class="album-thumb" src="{{cover_photo}}"></div>
22 | 						<div class="item-inner">
23 | 							<div class="item-title-row">
24 | 								<div class="item-title">{{name}}</div>
25 | 							</div>
26 | 							<div class="item-subtitle">{{count}}</div>
27 | 						</div>
28 | 					</a>
29 | 				</li>
30 | 				{{/albums}}
31 | 			</ul>
32 | 		</div>
33 | 	</div>
34 | </div>


--------------------------------------------------------------------------------
/demo/html/fb-photos.html:
--------------------------------------------------------------------------------
 1 | <div class="page" data-name="fb-photos">
 2 | 	<div class="navbar">
 3 | 		<div class="navbar-inner sliding">
 4 | 			<div class="left">
 5 | 				<a href="/fb-albums/" class="link back">
 6 | 					<i class="icon icon-back"></i>
 7 | 				</a>
 8 | 			</div>
 9 | 			<div class="title">{{album_name}}</div>
10 | 			<div class="right">
11 | 				<a id="load-more-photos-link" data-album-id="{{album_id}}" class="link">Load More</a>
12 | 			</div>
13 | 		</div>
14 | 	</div>
15 | 	<div class="page-content">
16 | 		<div>
17 | 			{{#photos}}
18 | 			<img class="photo-thumb-link" data-full-photo-url="{{picture_full}}" src="{{picture}}">
19 | 			{{/photos}}
20 | 		</div>
21 | 	</div>
22 | </div>


--------------------------------------------------------------------------------
/demo/html/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
 6 | 		<meta name="apple-mobile-web-app-capable" content="yes">
 7 | 		<title>My App</title>
 8 | 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.1.0/css/framework7.css" />
 9 | 		<style>
10 | 			.photo-thumb-link {
11 | 				object-fit: cover;
12 | 				object-position: center top;
13 | 				width: 60px;
14 | 				height: 60px;
15 | 			}
16 | 			.album-thumb {
17 | 				width: 60px;
18 | 				height: 60px;
19 | 			}
20 | 			#all-albums-link, #log-in-out-fb-link {
21 | 				width: 100%;
22 | 			}
23 | 			#log-in-out-text {
24 | 				margin-left: 5px;
25 | 			}
26 | 		</style>
27 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.1.0/js/framework7.min.js"></script>
28 | 	</head>
29 | 	<body>
30 | 		<script>
31 | 		window.fbAsyncInit = function() {
32 | 			FB.init({
33 | 				appId            : ENTER APP ID HERE,
34 | 				autoLogAppEvents : true,
35 | 				xfbml            : true,
36 | 				version          : 'v3.0'
37 | 			});
38 | 
39 | 			FB.getLoginStatus(response => {
40 | 				app.dialog.close();
41 | 				$$('.page-current').show();
42 | 
43 | 				if(response.status === 'connected') {
44 | 					$$('#log-in-out-text').text('logged in')
45 | 						.addClass('text-color-green');
46 | 					$$('#log-in-out-fb-link').text('Logout')
47 | 						.attr('data-status', 'in')
48 | 						.addClass('color-red');
49 | 				} else {
50 | 					$$('#log-in-out-text').text('logged out')
51 | 						.addClass('text-color-red');
52 | 					$$('#log-in-out-fb-link').text('Login')
53 | 						.attr('data-status', 'out')
54 | 						.addClass('color-green');
55 | 				}
56 | 			});
57 | 		};
58 | 
59 | 		(function(d, s, id){
60 | 			 var js, fjs = d.getElementsByTagName(s)[0];
61 | 			 if (d.getElementById(id)) {return;}
62 | 			 js = d.createElement(s); js.id = id;
63 | 			 js.src = "https://connect.facebook.net/en_US/sdk.js";
64 | 			 fjs.parentNode.insertBefore(js, fjs);
65 | 		 }(document, 'script', 'facebook-jssdk'));
66 | 		</script>
67 | 
68 | 		<div id="app">
69 | 			<div class="view view-main">
70 | 				<div data-name="index" class="page">
71 | 					<div class="navbar">
72 | 						<div class="navbar-inner sliding">
73 | 							<div class="title">Facebook All Photos</div>
74 | 						</div>
75 | 					</div>
76 | 					<div class="page-content">
77 | 						<div class="card">
78 | 							<div class="card-header">
79 | 								<p style="margin: 0px;">Status:<span id="log-in-out-text"></span></p>
80 | 							</div>
81 | 							<div class="card-content card-content-padding">
82 | 								<a id="all-albums-link" href="/fb-albums/" class="button button-fill">Fb Albums</a>
83 | 							</div>
84 | 							<div class="card-footer">
85 | 								<a id="log-in-out-fb-link" class="button button-fill"></a>
86 | 							</div>
87 | 						</div>
88 | 					</div>
89 | 				</div>
90 | 			</div>
91 | 		</div>
92 | 		<script src="/src/fb-code.js"></script>
93 | 		<script src="../js/script.js"></script>
94 | 	</body>
95 | </html>


--------------------------------------------------------------------------------
/demo/js/script.js:
--------------------------------------------------------------------------------
  1 | let currentAlbum;
  2 | const pageLoaded = {fbAlbums: false, fbPhotos: false};
  3 | 
  4 | const fbAllPhotos = new FbAllPhotos();
  5 | 
  6 | const app = new Framework7({
  7 | 	root: '#app',
  8 | 	name: 'Get all Facebook Album Photos',
  9 | 	routes: [
 10 | 		{
 11 | 			path: '/',
 12 | 			url: 'index.html'
 13 | 		},
 14 | 		{
 15 | 			path: '/fb-albums/',
 16 | 			async: async (routeTo, routeFrom, resolve, reject) => {
 17 | 				function getDataTemplate(response) {
 18 | 					resolve(
 19 | 						{
 20 | 							templateUrl: 'fb-albums.html'
 21 | 						},
 22 | 						{
 23 | 							context: {
 24 | 								albums: response.data
 25 | 							}
 26 | 						}
 27 | 					);
 28 | 				}
 29 | 
 30 | 				if(pageLoaded.fbAlbums) { //If page already loaded
 31 | 					getDataTemplate(fbAllPhotos.fullObj);
 32 | 				} else {
 33 | 					try {
 34 | 						getDataTemplate(await fbAllPhotos.getAlbums(7));
 35 | 						pageLoaded.fbAlbums = true;
 36 | 					} catch(errorMsg) {
 37 | 						let userMsg = '';
 38 | 
 39 | 						if(errorMsg === 'fbError') {
 40 | 							userMsg = fbAllPhotos.errorObj.message;
 41 | 						} else if(errorMsg === 'noAlbums') {
 42 | 							userMsg = 'No albums';
 43 | 						}
 44 | 
 45 | 						app.dialog.alert('', userMsg);
 46 | 					}
 47 | 				}
 48 | 			}
 49 | 		},
 50 | 		{
 51 | 			path: '/fb-photos/',
 52 | 			async: async (routeTo, routeFrom, resolve, reject) => {
 53 | 				try {
 54 | 					const photosObj = await fbAllPhotos.getPhotosInAlbum(currentAlbum, 5);
 55 | 
 56 | 					resolve(
 57 | 						{
 58 | 							templateUrl: 'fb-photos.html'
 59 | 						},
 60 | 						{
 61 | 							context: {
 62 | 								photos: photosObj.data,
 63 | 								album_id: photosObj.data.id,
 64 | 								album_name: photosObj.data.name
 65 | 							}
 66 | 						}
 67 | 					);
 68 | 
 69 | 					pageLoaded.fbPhotos = true;
 70 | 				} catch(errorMsg) {
 71 | 					let userMsg;
 72 | 
 73 | 					if(errorMsg === 'fbError') {
 74 | 						userMsg = fbAllPhotos.errorObj.message;
 75 | 					} else if(errorMsg === 'noAlbum') {
 76 | 						userMsg = 'Album does not exist';
 77 | 					} else if(errorMsg === 'noPhotos') {
 78 | 						userMsg = 'No photos';
 79 | 					}
 80 | 
 81 | 					app.dialog.alert('', userMsg);
 82 | 					reject();
 83 | 				}
 84 | 			}
 85 | 		}
 86 | 	],
 87 | 	on: {
 88 | 		pageInit: page => {
 89 | 			if(page.name === 'index') {
 90 | 				 $$('#log-in-out-fb-link').click(function() {
 91 | 					 const $this = $$(this);
 92 | 					 const currStatus = $this.data('status');
 93 | 					 let setStatus, setText, setAnchorText, setStatusColor, setBtnColor; //status and btn color are opposites
 94 | 
 95 | 					 function setNewVals() {
 96 | 						 $$('#log-in-out-text').text(setText)
 97 | 							.removeClass('text-color-' + setBtnColor)
 98 | 							.addClass('text-color-' + setStatusColor);
 99 | 						 $this.text(setAnchorText)
100 | 							.attr('data-status', setStatus)
101 | 							.removeClass('color-' + setStatusColor)
102 | 							.addClass('color-' + setBtnColor);
103 | 					 }
104 | 
105 | 					 //set to opposite
106 | 					 if(currStatus === 'in') { //logging in
107 | 						 setText = 'logged out';
108 | 						 setAnchorText = 'Login';
109 | 						 setStatus = 'out';
110 | 						 setStatusColor = 'red';
111 | 						 setBtnColor = 'green';
112 | 
113 | 						 FB.logout(response => {
114 | 							 setNewVals();
115 | 						 });
116 | 					 } else { //logging out
117 | 						 setText = 'logged in';
118 | 						 setAnchorText = 'Logout';
119 | 						 setStatus = 'in';
120 | 						 setStatusColor = 'green';
121 | 						 setBtnColor = 'red';
122 | 
123 | 						 FB.login(response => {
124 | 							if(response.authResponse) setNewVals();
125 | 							else app.dialog.alert('', 'User cancelled authorization');
126 | 						 }, {scope: 'user_photos'});
127 | 					 }
128 | 				 });
129 | 			} else if(page.name === 'fb-albums') {
130 | 				$$('.album-thumb-link').click(function() {
131 | 					currentAlbum = $$(this).attr('data-album-id');
132 | 					mainView.router.navigate('/fb-photos/');
133 | 				});
134 | 
135 | 				$$('#load-more-albums-link').click(async function() {
136 | 					try {
137 | 						await fbAllPhotos.getMoreAlbums();
138 | 
139 | 						mainView.router.refreshPage();
140 | 					} catch(errorMsg) {
141 | 						let userMsg;
142 | 
143 | 						if(errorMsg === 'fbError') {
144 | 							userMsg = fbAllPhotos.errorObj.message;
145 | 						} else if(errorMsg === 'serverError') {
146 | 							userMsg = 'Server error';
147 | 						} else if(response === 'noMore') {
148 | 							userMsg = 'No more albums to retrieve';
149 | 						}
150 | 
151 | 						app.dialog.alert('', userMsg);
152 | 					}
153 | 				});
154 | 			} else if(page.name === 'fb-photos') {
155 | 				$$('#load-more-photos-link').click(async function() {
156 | 					currentAlbum = $$(this).data('album-id');
157 | 
158 | 					try {
159 | 						await fbAllPhotos.getMorePhotosInAlbum(currentAlbum);
160 | 
161 | 						mainView.router.refreshPage();
162 | 					} catch(errorMsg) {
163 | 						let userMsg;
164 | 
165 | 						if(errorMsg === 'fbError') {
166 | 							userMsg = fbAllPhotos.errorObj.message;
167 | 						} else if(errorMsg === 'serverError') {
168 | 							userMsg = 'Server error';
169 | 						} else if(errorMsg === 'noMore') {
170 | 							userMsg = 'No more photos in album to retrieve';
171 | 						} else if(errorMsg === 'noAlbum') {
172 | 							userMsg = 'Album does not exist';
173 | 						}
174 | 
175 | 						app.dialog.alert('', userMsg);
176 | 					}
177 | 
178 | 				});
179 | 
180 | 				$$('.photo-thumb-link').click(function() {
181 | 					const photoUrl = $$(this).data('full-photo-url');
182 | 
183 | 					app.photoBrowser.create({
184 | 						photos : [photoUrl],
185 | 						theme: 'dark',
186 | 						toolbar: false
187 | 					}).open();
188 | 				});
189 | 			}
190 | 		}
191 | 	}
192 | });
193 | 
194 | const $$ = Dom7;
195 | 
196 | const mainView = app.views.create('.view-main', {
197 | 	url: '/',
198 | 	stackPages: true
199 | });
200 | 
201 | $$('.page-current').hide();
202 | app.dialog.preloader('Loading Facebook JavaScript SDK');


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "facebook-javascript-all-photos",
 3 |   "version": "1.0.3",
 4 |   "description": "Get all Facebook albums and photos https://websitebeaver.com/facebook-api-javascript-sdk-get-all-albums-and-photos",
 5 |   "main": "src/fb-code.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/WebsiteBeaver/facebook-javascript-all-photos.git"
12 |   },
13 |   "keywords": [
14 |     "Facebbok",
15 |     "Facebook",
16 |     "API",
17 |     "Facebook",
18 |     "Javascript",
19 |     "Facebook",
20 |     "JavaScript",
21 |     "SDK"
22 |   ],
23 |   "author": "Daniel Marcus",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/WebsiteBeaver/facebook-javascript-all-photos/issues"
27 |   },
28 |   "homepage": "https://github.com/WebsiteBeaver/facebook-javascript-all-photos#readme",
29 |   "devDependencies": {}
30 | }
31 | 


--------------------------------------------------------------------------------
/src/fb-code.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Class to simplify getting all Facebook albums and photos and albums using Facebook API.
  3 |  */
  4 | 
  5 | class FbAllPhotos {
  6 | 
  7 | 	/**
  8 | 	 * Create empty object.
  9 | 	 * @property {object} fullObj - Full object of Facebook albums, photos and pagination.
 10 | 	 * @property {object} errorObj - Facebook-specific error object.
 11 | 	 * @property {string} profilePictureURL - Facebook profile picture URL.
 12 | 	 * @example 
 13 | 	 * const fbAllPhotos = new FbAllPhotos();
 14 | 	 */
 15 | 	constructor() {
 16 | 		this.fullObj = {};
 17 | 		this.errorObj = {};
 18 | 		this.profilePictureURL = '';
 19 | 	}
 20 | 
 21 | 	/**
 22 | 	 * Get Facebook profile picture.
 23 | 	 *
 24 | 	 * @fulfil {string} - The url of the Facebook profile picture.
 25 | 	 * @reject {Error} - Rejected promise with message.
 26 | 	 * @example
 27 | 	 * fbAllPhotos.getProfilePicture()
 28 | 	 *   .then(profilePictureURL => { console.log(profilePictureURL); })
 29 | 	 *   .catch(errorMsg => {
 30 | 	 *     if(errorMsg === 'fbError') {
 31 | 	 *       console.log(fbAllPhotos.errorObj.message);
 32 | 	 *     } else if(errorMsg === 'noProfilePicture') {
 33 | 	 *       console.log('No profile picture');
 34 | 	 *     }
 35 | 	 *   });
 36 | 	 */
 37 | 	getProfilePicture() {
 38 | 		return new Promise((resolve, reject) => {
 39 | 			let errorReturnMsg = '';
 40 | 
 41 | 			this.errorObj = {}; //Reset error object
 42 | 
 43 | 			if(this.profilePictureURL) resolve(this.profilePictureURL); //If already set
 44 | 
 45 | 			FB.api('/me?fields=picture.height(9999)', async response => { //Arbitrarily large number for largest pic
 46 | 				if(response && response.error) { //If response exists and error
 47 | 					errorReturnMsg = 'fbError';
 48 | 					this.errorObj = response.error;
 49 | 				} else if(!response || !response.hasOwnProperty('picture') || response.picture.data.is_silhouette) { //No picture
 50 | 					errorReturnMsg = 'noProfilePicture';
 51 | 				} else { //No errors
 52 | 					this.profilePictureURL = response.picture.data.url;
 53 | 					resolve(this.profilePictureURL);
 54 | 				}
 55 | 
 56 | 				if(errorReturnMsg) reject(errorReturnMsg); //Return error message if error
 57 | 			});
 58 | 		});
 59 | 	}
 60 | 
 61 | 	/**
 62 | 	 * Get Facebook albums.
 63 | 	 *
 64 | 	 * @param {int} [limitAlbums = 25] - The number of albums to retrieve.
 65 | 	 * @fulfil {object} - The full Facebook albums and photos object.
 66 | 	 * @reject {Error} - Rejected promise with message.
 67 | 	 * @example
 68 | 	 * fbAllPhotos.getAlbums(15)
 69 | 	 *   .then(fullObj => { console.log(fullObj); })
 70 | 	 *   .catch(errorMsg => {
 71 | 	 *     if(errorMsg === 'fbError') {
 72 | 	 *       console.log(fbAllPhotos.errorObj.message);
 73 | 	 *     } else if(errorMsg === 'noAlbums') {
 74 | 	 *       console.log('No albums');
 75 | 	 *     }
 76 | 	 *   });
 77 | 	 */
 78 | 	getAlbums(limitAlbums = 25) {
 79 | 		return new Promise((resolve, reject) => {
 80 | 			let errorReturnMsg = '';
 81 | 
 82 | 			this.errorObj = {}; //Reset error object
 83 | 
 84 | 			FB.api('/me?fields=albums.limit(' + limitAlbums + '){name,count,cover_photo{picture}}', response => {
 85 | 				if(response && response.error) { //If response exists and error
 86 | 					errorReturnMsg = 'fbError';
 87 | 					this.errorObj = response.error;
 88 | 				} else if(!response || !response.hasOwnProperty('albums')) {
 89 | 					errorReturnMsg = 'noAlbums';
 90 | 				} else { //No errors
 91 | 					response.albums.data.forEach(album => {
 92 | 						album.cover_photo = (album.cover_photo) ? album.cover_photo.picture : ''; //All we need is picture
 93 | 					});
 94 | 
 95 | 					this.fullObj = response.albums;
 96 | 					resolve(this.fullObj);
 97 | 				}
 98 | 
 99 | 				if(errorReturnMsg) reject(errorReturnMsg); //Return error message if error
100 | 			});
101 | 		});
102 | 	}
103 | 
104 | 	/**
105 | 	 * Get Facebook photos in a specified album.
106 | 	 *
107 | 	 * @param {int} albumId - The album id to get photos from.
108 | 	 * @param {int} [limitPhotos = 25] - The number of photos in an album to retrieve.
109 | 	 * @fulfil {object} - Object with only specified album and its photos.
110 | 	 * @reject {Error} - Rejected promise with message.
111 | 	 * @example
112 | 	 * const albumId = 8395830308572754;
113 | 	 *
114 | 	 * fbAllPhotos.getPhotosInAlbum(albumId, 15)
115 | 	 *   .then(albumObj => { console.log(albumObj); })
116 | 	 *   .catch(errorMsg => {
117 | 	 *     if(errorMsg === 'fbError') {
118 | 	 *       console.log(fbAllPhotos.errorObj.message);
119 | 	 *     } else if(errorMsg === 'noAlbum') {
120 | 	 *       console.log('Album does not exist');
121 | 	 *     } else if(errorMsg === 'noPhotos') {
122 | 	 *       console.log('No photos in album');
123 | 	 *     }
124 | 	 *   });
125 | 	 */
126 | 	getPhotosInAlbum(albumId, limitPhotos = 25) {
127 | 		return new Promise((resolve, reject) => {
128 | 			let errorReturnMsg = '';
129 | 
130 | 			this.errorObj = {}; //Reset error object
131 | 
132 | 			const index = this.fullObj.data.findIndex(album => album.id == albumId); //Get index of album. Loose checking due to id as string
133 | 
134 | 			if(index === -1) { //Album specified not in object
135 | 				reject('noAlbum');
136 | 			} else if(this.fullObj.data[index].hasOwnProperty('photos')) { //album already retrieved
137 | 				resolve(this.fullObj.data[index].photos);
138 | 			}
139 | 
140 | 			FB.api(albumId + '/?fields=photos.limit(' + limitPhotos + '){picture,images}', response => {
141 | 				if(response && response.error) { //If response exists and error
142 | 					errorReturnMsg = 'fbError';
143 | 					this.errorObj = response.error;
144 | 				} else if(!response || !response.hasOwnProperty('photos')) { //No photos
145 | 					errorReturnMsg = 'noPhotos';
146 | 				} else { //No errors
147 | 					response.photos.data.forEach(photo => {
148 | 						photo.picture_full = photo.images[0].source; //[0] is the largest image
149 | 						delete photo.images; //Only need one full image
150 | 					});
151 | 
152 | 					this.fullObj.data[index].photos = response.photos;
153 | 					resolve(this.fullObj.data[index].photos);
154 | 				}
155 | 
156 | 				if(errorReturnMsg) reject(errorReturnMsg); //Return error message if error
157 | 			});
158 | 		});
159 | 	}
160 | 
161 | 	/**
162 | 	 * Get more Facebook albums.
163 | 	 *
164 | 	 * @fulfil {object} - The full Facebook albums and photos object.
165 | 	 * @reject {Error} - Rejected promise with message.
166 | 	 * @example
167 | 	 * fbAllPhotos.getMoreAlbums()
168 | 	 *   .then(fullObj => { console.log(fullObj); })
169 | 	 *   .catch(errorMsg => {
170 | 	 *     if(errorMsg === 'fbError') {
171 | 	 *       console.log(fbAllPhotos.errorObj.message); //Error message from Facebook
172 | 	 *     } else if(errorMsg === 'serverError') {
173 | 	 *       console.log(fbAllPhotos.errorObj); //Fetch API response object
174 | 	 *     } else if(errorMsg === 'noMore') {
175 | 	 *       console.log('No more albums to retrieve');
176 | 	 *     }
177 | 	 *   });
178 | 	 */
179 | 	async getMoreAlbums() {
180 | 		let errorReturnMsg = '';
181 | 
182 | 		this.errorObj = {}; //Reset error object
183 | 
184 | 		if(!this.fullObj.paging.hasOwnProperty('next')) { //If there are no more albums
185 | 			throw 'noMore';
186 | 		}
187 | 
188 | 		const response = await fetch(this.fullObj.paging.next);
189 | 
190 | 		if(!response.ok) {
191 | 			errorReturnMsg = 'serverError'; //If server error
192 | 			this.errorObj = response;
193 | 		} else {
194 | 			response = await response.json();
195 | 
196 | 			if(response && response.error) {
197 | 				errorReturnMsg = 'fbError';
198 | 				this.errorObj = response.error;
199 | 			} else if(!response || !response.hasOwnProperty('data')) { //If no response or data. Likely redundant due to check of next
200 | 				errorReturnMsg = 'noMore';
201 | 			} else { //No errors
202 | 				response.data.forEach(album => {
203 | 					album.cover_photo = (album.cover_photo) ? album.cover_photo.picture : ''; //All we need is picture
204 | 				});
205 | 
206 | 				this.fullObj.data.push(...response.data); //Append albums
207 | 				this.fullObj.paging = response.paging; //Set paging to new values
208 | 			}
209 | 		}
210 | 
211 | 		if(errorReturnMsg) throw errorReturnMsg; //Return error message if error
212 | 
213 | 		return this.fullObj;
214 | 	}
215 | 
216 | 	/**
217 | 	 * Get more Facebook photos in a specified album.
218 | 	 *
219 | 	 * @param {int} albumId - The album id to get more photos from.
220 | 	 * @fulfil {object} - Object with only specified album and its photos.
221 | 	 * @reject {Error} - Rejected promise with message.
222 | 	 * @example
223 | 	 * const albumId = 8395830308572754;
224 | 	 *
225 | 	 * fbAllPhotos.getMorePhotosInAlbum(albumId)
226 | 	 *   .then(albumObj => { console.log(albumObj); })
227 | 	 *   .catch(errorMsg => {
228 | 	 *     if(errorMsg === 'fbError') {
229 | 	 *       console.log(fbAllPhotos.errorObj.message); //Error message from Facebook
230 | 	 *     } else if(errorMsg === 'serverError') {
231 | 	 *       console.log(fbAllPhotos.errorObj); //Fetch API response object
232 | 	 *     } else if(errorMsg === 'noAlbum') {
233 | 	 *       console.log('Album does not exist');
234 | 	 *     } else if(errorMsg === 'noMore') {
235 | 	 *       console.log('No more photos in album to retrieve');
236 | 	 *     }
237 | 	 *   });
238 | 	 */
239 | 	async getMorePhotosInAlbum(albumId) {
240 | 		let errorReturnMsg = '';
241 | 
242 | 		this.errorObj = {}; //Reset error object
243 | 
244 | 		const index = this.fullObj.data.findIndex(album => album.id == albumId); //Get index of album. Loose checking due to id as string
245 | 
246 | 		if(index === -1) { //If album doesn't exist
247 | 			throw 'noAlbum';
248 | 		} else if(!this.fullObj.data[index].photos.paging.hasOwnProperty('next')) { //If there are no more photos in specific album
249 | 			throw 'noMore';
250 | 		}
251 | 
252 | 		const response = await fetch(this.fullObj.paging.next);
253 | 
254 | 		if(!response.ok) {
255 | 			errorReturnMsg = 'serverError'; //If server error
256 | 			this.errorObj = response;
257 | 		} else {
258 | 			response = await response.json();
259 | 
260 | 			if(response && response.error) { //If response exists and error
261 | 				errorReturnMsg = 'fbError';
262 | 				this.errorObj = response.error;
263 | 			} else if(!response || !response.hasOwnProperty('data')) { //If no response or data. Likely redundant due to check of album existence and next
264 | 				errorReturnMsg = 'noMore';
265 | 			} else { //No errors
266 | 				response.data.forEach(photo => {
267 | 					photo.picture_full = photo.images[0].source; //[0] is the largest image
268 | 					delete photo.images; //Don't need the rest, only one
269 | 				});
270 | 
271 | 				this.fullObj.data[index].photos.data.push(...response.data); //Append photos in album
272 | 				this.fullObj.data[index].photos.paging = response.paging; //Set paging to new values
273 | 			}
274 | 		}
275 | 
276 | 		if(errorReturnMsg) throw errorReturnMsg; //Return error message if error
277 | 
278 | 		return this.fullObj.data[index].photos;
279 | 	}
280 | }
281 | 
282 | export default FbAllPhotos;


--------------------------------------------------------------------------------