-
Notifications
You must be signed in to change notification settings - Fork 1
/
sample.html
87 lines (77 loc) · 2.33 KB
/
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample app</title>
<link rel="stylesheet" href="css/normalize.css">
<style>
body {
color: #333;
}
code {
color: #333;
border: 1px solid grey;
padding: 2px 3px;
border-radius: 3px;
box-shadow: 0px 1px 2px grey;
font-size: 0.8em;
}
p {
font-family: arial;
line-height: 1.6em;
}
a {
color: #4083D8;
text-decoration: none;
}
a:visited {
color: #7190B8;
}
a:hover {
text-decoration: underline;
}
ul {
padding-left: 17px;
}
</style>
</head>
<body>
<h2>Simple styled frame to simulate facebook tab apps</h2>
<p>
Because a psd is not the same, and deploy and app just to see if it is ok sucks... So now we have this little better way to test our work. BUT I need your help to make this idea better and a powerful tool <a target="_blank" href="https://github.com/octavioamu/facebook-app-frame">Github repository</a>.
</p>
<h3>How to use</h3>
<p>
- You can test from here :) but if you are making and app maybe is better to clone the repo and use it local.
</p>
<p>
- Clone the git repo — <code>git clone https://github.com/octavioamu/facebook-app-frame.git</code> and use it local (better for working projects due an security policy using iframes to access localhost)
</p>
<p>
Write the app's url, you want to see inside de iframe, on the input of the top ( without http:// ) and then hit <code>enter</code>
</p>
<h3>About facebook app tabs and canvas</h3>
<ul>
<li>
<a href="https://developers.facebook.com/docs/javascript/reference">Facebook JS Reference API</a>
</li>
<li>
<a href="https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/">FB.Canvas.setAutoGrow</a>
</li>
<li>
<a href="http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/">Facebook iFrame Apps (auto height tutorial)</a>
</li>
<li>
<a href="https://developers.facebook.com/docs/games/canvas/fluid-canvas">Facebook Fluid canvas</a>
</li>
</ul>
<h3>TODO</h3>
<ul>
<li>Add more options</li>
<li>Make height option working</li>
<li>Work with urls like: www.url.com?url=www.domain.com</li>
<li>Better visual configuration</li>
<li>https / http working</li>
</ul>
</body>
</html>