Skip to content

Instantly share code, notes, and snippets.

@radermacher

radermacher/index.html

Created August 13, 2014 13:56
Show Gist options
  • Save radermacher/2f51285d5cdd07ca1fe2 to your computer and use it in GitHub Desktop.
Save radermacher/2f51285d5cdd07ca1fe2 to your computer and use it in GitHub Desktop.
Download ZIP
Facebook Card // source http://jsbin.com/zurec/17
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Facebook Card" />
<title>JS Bin</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://rawgit.com/briangonzalez/jquery.adaptive-backgrounds.js/master/dist/jquery.adaptive-backgrounds.min.js"></script>
<style id="jsbin-css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
a {
color: #000;
text-decoration: none;
font-weight: 600;
}
body {
position: relative;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
}
body.ab-light {
color: #000;
}
body.ab-light a {
color: #000;
}
body.ab-dark {
color: #fff;
}
body.ab-dark a {
color: #fff;
}
p,
h1 {
margin: 0;
padding: 0;
}
#start {
position: absolute;
z-index: 999;
}
#content {
height: 100%;
}
#page {
height: 100%;
}
#page header {
position: relative;
margin: 0 auto;
padding-top: 2%;
}
#page header .cover {
display: none;
}
#page header .profile_image {
margin: 0 auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.ab-light #page header .profile_image {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
}
.ab-dark #page header .profile_image {
box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.5);
}
#page header h1 {
font-size: 5.5em;
text-align: center;
font-weight: 300;
}
#page header .fb-like {
text-align: center;
display: block;
}
#page .posts {
padding: 1em;
margin: 0;
display: block;
list-style: none;
width: 50%;
max-width: 600px;
margin: 0 auto;
}
#page .posts .post {
padding: 20px 20px;
margin: 30px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ab-dark #page .posts .post {
background-color: rgba(255, 255, 255, 0.15);
}
.ab-light #page .posts .post {
background-color: rgba(0, 0, 0, 0.1);
}
#page .posts .attachment {
margin-top: 20px;
}
#page .posts .attachment p {
font-size: .85em;
}
#page .posts .link a.image {
float: left;
margin-right: 10px;
}
#page .posts .video img,
#page .posts .photo img {
width: 100%;
}
#page .posts .video a.image,
#page .posts .photo a.image {
margin-bottom: 10px;
display: block;
}
.clearfix {
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<section id="start"></section>
<section id="content"></section>
<script id="tmpl-form" type="text/x-handlebars-template">
<form>
<input type="text" id="pageurl" value="mercedesbenz">
<button id="connect">Profil laden ...</button>
</form>
</script>
<script id="tmpl-page" type="text/x-handlebars-template">
<div id="page">
<header>
<img src="{{cover cover.source}}" class="cover" data-adaptive-background="1">
<div class="profile_image" style="background-image: url({{profileImage id}})">
</div>
<h1>{{name}}</h1>
<div class="fb-like" data-href="{{link}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</header>
<ul class="posts">
{{#each posts.data}}
{{post}}
{{/each}}
</ul>
</div>
</script>
<script id="tmpl-posttype-link" type="text/x-handlebars-template">
<li class="post {{type}}">
{{#if message}}
<p>{{message}}</p>
{{/if}}
<div class="attachment">
{{#if picture}}
<a class="image" href="{{link}}" target="_blank"><img src="{{picture}}"></a>
{{/if}}
<a href="{{link}}" target="_blank">{{name}}</a>
{{#if description}}
<p>{{description}}</p>
{{/if}}
<span class="clearfix"></span>
</div>
</li>
</script>
<script id="tmpl-posttype-status" type="text/x-handlebars-template">
{{#if message}}
<li class="post {{type}}">
<p>{{message}}</p>
</li>
{{/if}}
</script>
<script id="tmpl-posttype-video" type="text/x-handlebars-template">
<li class="post {{type}}">
<a class="image" href="{{link}}" target="_blank"><img src="{{picture}}"></a>
{{#if message}}
<p>{{message}}</p>
{{/if}}
</li>
</script>
<script id="tmpl-posttype-photo" type="text/x-handlebars-template">
<li class="post {{type}}">
<a class="image" href="{{link}}" target="_blank">
{{#if object_id}}
<img src="{{feedImage object_id}}">
{{else}}
<img src="{{picture}}">
{{/if}}
</a>
{{#if message}}
<p>{{message}}</p>
{{/if}}
</li>
</script>
<script id="jsbin-javascript">
$(document).ready(function() {
var _content = $('#content'),
_form = $("#start");
var updateStatusCallback = function(data) {
console.log("loginStatus", data);
};
var getPageCallback = function(data) {
_content.html(getHtml("tmpl-page", data));
$(".posts p",_content).clickUrl();
if(data.cover) {
$('body').removeClass('ab-light ab-dark');
$.adaptiveBackground.run({parent: "body", normalizeTextColor: false});
}
FB.XFBML.parse();
console.log("page", data);
};
window.getTemplate = function(name) {
var source = $("#" + name).html() || '',
template = Handlebars.compile(source);
return template;
};
window.getHtml = function(name, json) {
var data = json || {},
template = getTemplate(name),
html = template(data);
return html;
};
var start = function() {
_form.html(getHtml("tmpl-form"));
$('#connect', _form).on('click', function(e) {
e.preventDefault();
var input = $('#pageurl').val(),
page = input;
FB.api('/' + page + '/?fields=id,name,link,cover,posts.limit(15).fields(id,object_id,type,message,link,name,description,picture)', 'get', {
access_token: "1415289772053336|KAFJuOEaC_xx3GSOxAsGB49d2J8"
}, getPageCallback);
});
$('form', _form).on('submit', function(e) {
e.preventDefault();
$('#connect', container).trigger('click');
});
};
$.ajaxSetup({
cache: true
});
$.getScript('//connect.facebook.net/en_US/sdk.js', function() {
FB.init({
appId: '1415289772053336',
xfbml: true,
version: 'v2.0'
});
FB.getLoginStatus(updateStatusCallback);
start();
});
$.fn.clickUrl = function() {
var regexp = /((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp, function(url) {
var full_url = url;
if (!full_url.match('^https?:\/\/')) {
full_url = 'http://' + full_url;
}
return '<a href="'+full_url+'" target="_blank">'+url+'</a>';
})
);
});
return $(this);
};
});
Handlebars.registerHelper('cover', function(url) {
url = Handlebars.Utils.escapeExpression(url);
// url = url.replace(/s720/i, 'l720');
url = url.replace(/s720x720/i, 's320x320');
return new Handlebars.SafeString(url);
});
Handlebars.registerHelper('feedImage', function(object_id) {
var url = 'https://graph.facebook.com/' + object_id + '/picture?type=normal';
url = Handlebars.Utils.escapeExpression(url);
return new Handlebars.SafeString(url);
});
Handlebars.registerHelper('profileImage', function(id) {
var url = 'https://graph.facebook.com/' + id + '/picture?type=large';
url = Handlebars.Utils.escapeExpression(url);
return new Handlebars.SafeString(url);
});
Handlebars.registerHelper('post', function() {
var html = '';
console.log(this.type);
html = getHtml('tmpl-posttype-' + this.type, this);
return new Handlebars.SafeString(html);
});
</script>
<script id="jsbin-source-css" type="text/css">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
a {
color: #000;
text-decoration: none;
font-weight: 600;
}
body {
position: relative;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
&.ab-light {
color: #000;
a {
color: #000;
}
}
&.ab-dark {
color: #fff;
a {
color: #fff;
}
}
}
p,h1 {
margin:0;
padding:0;
}
#start {
position: absolute;
z-index: 999;
}
#content {
height: 100%;
}
#page {
height: 100%;
header {
position: relative;
margin: 0 auto;
padding-top: 2%;
.cover {
display: none;
}
.profile_image {
margin: 0 auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
.ab-light &> {
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25);
}
.ab-dark &> {
box-shadow: 0px 0px 30px 0px rgba(255,255,255,0.5);
}
// border: 3px solid #fafafa;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
h1 {
font-size: 5.5em;
text-align: center;
font-weight: 300;
}
.fb-like {
text-align: center;
display: block;
}
}
.posts {
padding: 1em;
margin: 0;
display: block;
list-style: none;
width: 50%;
max-width: 600px;
margin: 0 auto;
.post {
padding: 20px 20px;
margin: 30px 0;
.ab-dark &> {
background-color: rgba(255,255,255,0.15);
}
.ab-light &> {
background-color: rgba(0,0,0,0.1);
}
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.attachment {
margin-top: 20px;
// padding: 10px;
// border: 1px solid #ccc;
p {
font-size: .85em;
}
}
.link {
a.image {
float:left;
margin-right: 10px;
}
}
.video,.photo {
img {
width: 100%;
}
a.image {
margin-bottom: 10px;
display: block;
}
}
}
}
.clearfix {
clear: both;
display:block;
}</script>
</body>
</html>
Raw
jsbin.zurec.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
a {
color: #000;
text-decoration: none;
font-weight: 600;
}
body {
position: relative;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
}
body.ab-light {
color: #000;
}
body.ab-light a {
color: #000;
}
body.ab-dark {
color: #fff;
}
body.ab-dark a {
color: #fff;
}
p,
h1 {
margin: 0;
padding: 0;
}
#start {
position: absolute;
z-index: 999;
}
#content {
height: 100%;
}
#page {
height: 100%;
}
#page header {
position: relative;
margin: 0 auto;
padding-top: 2%;
}
#page header .cover {
display: none;
}
#page header .profile_image {
margin: 0 auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.ab-light #page header .profile_image {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
}
.ab-dark #page header .profile_image {
box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.5);
}
#page header h1 {
font-size: 5.5em;
text-align: center;
font-weight: 300;
}
#page header .fb-like {
text-align: center;
display: block;
}
#page .posts {
padding: 1em;
margin: 0;
display: block;
list-style: none;
width: 50%;
max-width: 600px;
margin: 0 auto;
}
#page .posts .post {
padding: 20px 20px;
margin: 30px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ab-dark #page .posts .post {
background-color: rgba(255, 255, 255, 0.15);
}
.ab-light #page .posts .post {
background-color: rgba(0, 0, 0, 0.1);
}
#page .posts .attachment {
margin-top: 20px;
}
#page .posts .attachment p {
font-size: .85em;
}
#page .posts .link a.image {
float: left;
margin-right: 10px;
}
#page .posts .video img,
#page .posts .photo img {
width: 100%;
}
#page .posts .video a.image,
#page .posts .photo a.image {
margin-bottom: 10px;
display: block;
}
.clearfix {
clear: both;
display: block;
}
Raw
jsbin.zurec.js
$(document).ready(function() {
var _content = $('#content'),
_form = $("#start");
var updateStatusCallback = function(data) {
console.log("loginStatus", data);
};
var getPageCallback = function(data) {
_content.html(getHtml("tmpl-page", data));
$(".posts p",_content).clickUrl();
if(data.cover) {
$('body').removeClass('ab-light ab-dark');
$.adaptiveBackground.run({parent: "body", normalizeTextColor: false});
}
FB.XFBML.parse();
console.log("page", data);
};
window.getTemplate = function(name) {
var source = $("#" + name).html() || '',
template = Handlebars.compile(source);
return template;
};
window.getHtml = function(name, json) {
var data = json || {},
template = getTemplate(name),
html = template(data);
return html;
};
var start = function() {
_form.html(getHtml("tmpl-form"));
$('#connect', _form).on('click', function(e) {
e.preventDefault();
var input = $('#pageurl').val(),
page = input;
FB.api('/' + page + '/?fields=id,name,link,cover,posts.limit(15).fields(id,object_id,type,message,link,name,description,picture)', 'get', {
access_token: "1415289772053336|KAFJuOEaC_xx3GSOxAsGB49d2J8"
}, getPageCallback);
});
$('form', _form).on('submit', function(e) {
e.preventDefault();
$('#connect', container).trigger('click');
});
};
$.ajaxSetup({
cache: true
});
$.getScript('//connect.facebook.net/en_US/sdk.js', function() {
FB.init({
appId: '1415289772053336',
xfbml: true,
version: 'v2.0'
});
FB.getLoginStatus(updateStatusCallback);
start();
});
$.fn.clickUrl = function() {
var regexp = /((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp, function(url) {
var full_url = url;
if (!full_url.match('^https?:\/\/')) {
full_url = 'http://' + full_url;
}
return '<a href="'+full_url+'" target="_blank">'+url+'</a>';
})
);
});
return $(this);
};
});
Handlebars.registerHelper('cover', function(url) {
url = Handlebars.Utils.escapeExpression(url);
// url = url.replace(/s720/i, 'l720');
url = url.replace(/s720x720/i, 's320x320');
return new Handlebars.SafeString(url);
});
Handlebars.registerHelper('feedImage', function(object_id) {
var url = 'https://graph.facebook.com/' + object_id + '/picture?type=normal';
url = Handlebars.Utils.escapeExpression(url);
return new Handlebars.SafeString(url);
});
Handlebars.registerHelper('profileImage', function(id) {
var url = 'https://graph.facebook.com/' + id + '/picture?type=large';
url = Handlebars.Utils.escapeExpression(url);
return new Handlebars.SafeString(url);
});
Handlebars.registerHelper('post', function() {
var html = '';
console.log(this.type);
html = getHtml('tmpl-posttype-' + this.type, this);
return new Handlebars.SafeString(html);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment