sjoonk/photo_contest.html

## photo_contest.html

<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8">
<title>Photo Contest</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
	FB.init({
		appId: 'YOUR FACEBOOK APP ID',
		status: true,
		cookie: false,
		xfbml: true
	});
	FB.Canvas.setAutoGrow();
};
(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/ko_KR/all.js";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<h1>사진 콘테스트 데모</h1>

<p>
	<span class="label important">Notice</span> 이 DEMO는
	<a href="http://cookinfacebook.com/apps" target="_top">쿠킹 페이스북 앱 템플릿</a>&trade; 을 이용하여 제작되었습니다.
</p>

<style type="text/css">
	a img { border: 0; margin: 0; }
	div#photoset { margin: 50px 0 100px 100px; width: 600px; }
	#photoset img { display: block; padding-bottom: 3px; }
	.photo {
		float: left;
		width: 100px;
		margin: 10px;
	}
</style>

<div id="photoset"></div>
<div style="clear: both;"></div>

<script type="text/javascript">
$(document).ready(function() {

	var config = {
                api_key: 'Flickr API Key',
		photoset_id: 'Flickr photoset Id'
	};

	$.getJSON('https://secure.flickr.com/services/rest/?method=flickr.photosets.getPhotos'
		+ '&format=json&api_key=' + config.api_key + '&photoset_id=' + config.photoset_id
		+ '&jsoncallback=?', function(data){

			$.each(data.photoset.photo, function(i, photo){
				var base_photo_url = 'https://farm' + photo.farm + '.static.flickr.com/'
				            + photo.server + '/' + photo.id + '_' + photo.secret;
				var thumb_photo_url = base_photo_url + '_s.jpg';
				var medium_photo_url = base_photo_url + '.jpg';
				var photo_html = '<div class="photo"><a href="' + medium_photo_url + '" title="' + photo.title + '" class="lightbox">';
				photo_html += '<img src="' + thumb_photo_url + '"/>';
				photo_html += '<div class="fb-like" data-href="'+ medium_photo_url +'" data-width="100" data-layout="button_count"></div>';
				photo_html += '</a></div>';
				$('#photoset').append(photo_html);
			});
			$('#photoset a').lightBox();
	});

});
</script>
<hr />
<div class="fb-like" data-href="http://www.facebook.com/cookinthisbook" data-send="false" data-width="450" data-show-faces="true"></div>
<h6 class="right">&copy; 쿠킹 페이스북, 2012. All right reserved.</h6>
</html>

	<!DOCTYPE html>
	<html xmlns:fb="http://ogp.me/ns/fb#">
	<head>
	<meta charset="utf-8">
	<title>Photo Contest</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="fb-root"></div>
	<script>
	window.fbAsyncInit = function() {
	FB.init({
	appId: 'YOUR FACEBOOK APP ID',
	status: true,
	cookie: false,
	xfbml: true
	});
	FB.Canvas.setAutoGrow();
	};
	(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/ko_KR/all.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>

	<h1>사진 콘테스트 데모</h1>

	<p>
	<span class="label important">Notice</span> 이 DEMO는
	<a href="http://cookinfacebook.com/apps" target="_top">쿠킹 페이스북 앱 템플릿</a>™ 을 이용하여 제작되었습니다.
	</p>

	<style type="text/css">
	a img { border: 0; margin: 0; }
	div#photoset { margin: 50px 0 100px 100px; width: 600px; }
	#photoset img { display: block; padding-bottom: 3px; }
	.photo {
	float: left;
	width: 100px;
	margin: 10px;
	}
	</style>

	<div id="photoset"></div>
	<div style="clear: both;"></div>

	<script type="text/javascript">
	$(document).ready(function() {

	var config = {
	api_key: 'Flickr API Key',
	photoset_id: 'Flickr photoset Id'
	};

	$.getJSON('https://secure.flickr.com/services/rest/?method=flickr.photosets.getPhotos'
	+ '&format=json&api_key=' + config.api_key + '&photoset_id=' + config.photoset_id
	+ '&jsoncallback=?', function(data){

	$.each(data.photoset.photo, function(i, photo){
	var base_photo_url = 'https://farm' + photo.farm + '.static.flickr.com/'
	+ photo.server + '/' + photo.id + '_' + photo.secret;
	var thumb_photo_url = base_photo_url + '_s.jpg';
	var medium_photo_url = base_photo_url + '.jpg';
	var photo_html = '<div class="photo"><a href="' + medium_photo_url + '" title="' + photo.title + '" class="lightbox">';
	photo_html += '<img src="' + thumb_photo_url + '"/>';
	photo_html += '<div class="fb-like" data-href="'+ medium_photo_url +'" data-width="100" data-layout="button_count"></div>';
	photo_html += '</a></div>';
	$('#photoset').append(photo_html);
	});
	$('#photoset a').lightBox();
	});

	});
	</script>
	<hr />
	<div class="fb-like" data-href="http://www.facebook.com/cookinthisbook" data-send="false" data-width="450" data-show-faces="true"></div>
	<h6 class="right">© 쿠킹 페이스북, 2012. All right reserved.</h6>
	</html>