SampleFBApplication/index.html at master · bandhavya/SampleFBApplication · GitHub

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<title>
    Sample FB application
</title>

<head></head>

<body>
    <div class="fb-like" data-share="true" data-width="450" data-show-faces="true">
    </div>
    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
    </fb:login-button>
    <br>
    <img id="photo" />
    <br>
    </hr>
    <div id="status">
    </div>
    <br>
    <hr>
    <div id="photoContainer"></div>
    <script>
    var photosCollections = [];

    window.fbAsyncInit = function() {
        FB.init({
            appId: 'Your App Id',
            xfbml: true,
            version: 'v2.3'
        });
    };

    (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/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function checkLoginState() {
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    }

    function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);

        if (response.status === 'connected') {
            // Logged into your app and Facebook.
            testAPI();
        } else if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log ' +
                'into this app.';
        } else {
            // The person is not logged into Facebook, so we're not sure if
            // they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log ' +
                'into Facebook.';
        }
    }

    function testAPI() {
        console.log('Welcome!  Fetching your information.... ');

        FB.login(function(res) {
            FB.api('/me/feed', function(response) {
                //gets all the feeds...

            });

            FB.api('/me/photos', function(response) {
                console.log("photos ..." + response.data);
                for (var i = 0; i < response.data.length; i++) {
                    photosCollections.push(response.data[i].picture);
                    var parentElem = document.getElementById("photoContainer");
                    var childElem = document.createElement("div");
                    childElem.style.width = "200px";
                    childElem.style.height = "200px";
                    childElem.style.display = 'inline-block';
                    childElem.style.padding = "30px";

                    childElem.style.backgroundColor = 'grey';
                    childElem.style.border = '1px solid red';

                    var imgElem = document.createElement('img');
                    imgElem.src = response.data[i].picture;
                    childElem.appendChild(imgElem);

                    parentElem.appendChild(childElem);
                }


            });

            FB.api(
                "/me/friendlists",
                function(response) {
                    if (response && !response.error) {
                        /* handle the result */
                    }
                }
            );

        }, {
            scope: "read_stream,read_custom_friendlists,user_photos"
        });

        FB.api('/me', function(response) {
            console.log('Successful login for: ' + response.name);
            document.getElementById('status').innerHTML =
                'Thanks for logging in, ' + response.name + '!';
        });

        FB.api('/me?fields=posts,name,picture', function(response) {
            console.log(response);
            console.log(response.picture);
            console.log(response.posts);
            document.getElementById('photo').src =
                response.picture.data.url;
        });


    }
    </script>
</body>

</html>