<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Download Facebook Album Photos - A Free Tool from @siamkreative</title>
<!-- Standard meta tags -->
<meta name="description" content="Using this free tool you can very easily download all photos from any public Facebook Album.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Julien Vernet">
<!-- Facebook Open Graph tags -->
<meta property="og:url" content="https://labs.siamkreative.com/Facebook-Download-Album/">
<meta property="og:title" content="Download Photos from Facebook Albums">
<meta property="og:image" content="https://labs.siamkreative.com/Facebook-Download-Album/assets/og-image.jpg">
<meta property="og:site_name" content="SiamKreative Labs">
<meta property="og:description" content="Use this free tool to download photos from Facebook albums in seconds!">
<meta property="fb:app_id" content="1117073418349661">
<meta property="fb:admins" content="1195757341">
<!-- Stylesheets -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href="//cdn.jsdelivr.net/pure/0.6.0/pure-min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div id="login">
<span id="status">Loading...</span>
<span class="fb-login-button" data-size="large" data-show-faces="false" scope="public_profile,email" onlogin="checkLoginState();"></span>
</div>
<div id="about">
<h2>Download Photos from a Facebook Album</h2>
<div class="intro">
<p id="howto">Simply login with Facebook, paste the URL of a public album below and hit "Get Photos". That's it. Learn <a href="#readmore">why I build this tool</a>.</p>
<hr>
<h3>About</h3>
<p>I wanted to download all photos of the album <a target="_blank" href="https://www.facebook.com/media/set/?set=a.1001938423194815.1073741836.429911787064151">Happiness of Thailand</a> from a talented Thai photographer, namely Sarawut Intarob.</p>
<p>There's a few browser extension like <a target="_blank" href="http://getphotolive.com/">PhotoLive</a> but I didn't want to install one just to download an album. Therefore I decided to digg into the Graph API, and figure out if it was possible to build a tool with front-end technologies only. Here it is!</p>
<p>Feel free to <a href="https://github.com/SiamKreative/Facebook-Download-Album" target="_blank">contribute on Github</a>.</p>
</div>
<form id="form" class="pure-form form-disabled">
<input class="pure-input-2-3" id="album_url" type="url" placeholder="Album URL" required>
<button type="submit" class="pure-button pure-button-primary">Get Photos</button>
</form>
</div>
<div id="results" style="display: none;">
<button id="download_all" class="pure-button pure-button-primary" style="display: none;">Download all <span class="count"></span><span aria-hidden="true" class="icon"></span></button>
<p id="download_single" style="display: none;">Clicking on an image will start its download.</p>
<div id="list">
<img src="assets/ball-triangle.svg" width="50" alt="Loading...">
</div>
</div>
<small id="copy">Built in Bangkok by <a href="http://siamkreative.com/">@siamkreative</a><br> Download icon made by <a href="http://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a><br> <a href="https://github.com/SiamKreative/Facebook-Download-Album">Code on Github</a></small>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/vendor/jquery-2.2.4.min"><\/script>')</script>
<script src="assets/app.js"></script>
</body>
</html>