Business Feasibility Planning- Web app session 2

Hi everyone, this post is written especially for my TE class. Its just notes and step by step guide of the 2nd session of developing a web app. Btw, some parts might be wrong lol. Sorry I missed little bits and pieces while I was typing.

Before you start, make sure you have registered as a Facebook app developer

How to get your friends details

1. open jsbin.com
2. go to http://developers.facebook.com
3a. click on apps---> click on '+ create new app' on top right
3b. a box will pop up, give your app a name
4. leave the other field and tick box blank
5.click continue
6. A page with a form will appear, on app domain field, put jsbin.com
7. select website with facebook login
8. fill in the site url: http://jsbin.com
9. click save changes
10. leave this facebook page on the side and open a new tab/ window and open another developer Facebook page
11. search for javascript SDK--> should be the first one of the results,click on it.
12. on the javascript SDK page, scroll down to Loading and Installization
13. copy those codes in the box

14. go to JSBIN page, (to keep your existing things but want to use the same codes, go to (top left) jsbin-->CLONE)

or

14. New page and paste those codes you copied from Facebook into body tag.
14b. if you're starting fresh, don't forget to go to Add library ---> Jquery latest. Otherwise the codes won'twork
15. within those codes, look for APP ID, replace it with your APP ID. You can find your app id on the Facebook developer app page you was working on earlier

To add button, input the following code
<button class='login'>
login
</button>

open up JavaScript panel-if you've cloned or have some code in the JavaScript part, delete everything in that section.

adding /* and */ in front and after a set of code, will tell the JavaScript not to run the code, it will be just a comment. for example.

/* loop 
for (var i=1; i<=100; i++) */

Next Step- adding behaviour to your buttons

1. open new tab and go to freeformers.com/snippets
2. scroll down and click on Adding Interactivity, you will find a set of codes. copy those codes
3. paste to JSBIN's javascript panel

Should look something like below;

// CLICK FUNCTION



$('.login').click(function(){

   //stuff to happen after click goes here. E.g.

alert('hello');

console.log('hi');

 }); //click

 // END CLICK FUNCTION

change $('.login') to what you called your button, for example if you called it submit, change login to submit.
to run the button, click run with JS at the top right and then click on the button you created

if it doesn't work, and maybe because you started from scratch, go to 'add library' ---> jQuery latest

try again, click run with JSBIN, click on your button.

If you're lost or page is a mess at this point, go to the following link:
http://jsbin.com/obediw/1/editand click clone
This is Josh's (freeformer guy) page that he is working on with us

console.log('hi'); 
this is to test your codes are working instead of always having things popping up.

click on console tab at the top of the page and then click your put. 'Hi' should appear on the console panel, if not delete the alert code.

Next step- Facebook login
1. back to freeformers page, scroll down to Facebook Login, copy those codes
2. delete console log

// FACEBOOK LOGIN

FB.login(function(response) {



// stuff you want to happen after login goes here

console.log(response);



},{scope: 'publish_actions'}); //FB.login



// END - FACEBOOK LOGIN

3. paste the codes between the curly brackets after .click(function(){ from the previous codes
4. test it by running it
5. a new page should appear asking you to login
6. click on Login to my facebook
7. a set of codes should appear in the console panel

Next Step- getting your Facebook Data

1. back to freeformers.com/snippet
2. scroll down to Using facebook Data
3. copy the codes

// GETTING FACEBOOK DATA



FB.api('/me', function(response) {



// stuff you want to happen after getting data goes here

alert(response.name);

console.log(response);



}); //FB.api



// END - FACEBOOK DATA

4. paste it after the curly brackets after fb.login(function(response){ codes from 'Facebook login'
.5. Test it by running it and your name should appear
6. if you have your console open you will see a bunch of codes, those are information about yourself.
7. If your console is closed open it and rerun.

Next Step- To get your friends data
1. where is says FB.api('/me, function(response) replace it with FB.api('/me/friends',function(response)

OR
2. go to freeformers.com/snippet
3. scroll down get Facebook data, its the second box. Copy those codes

// GETTING FACEBOOK DATA



FB.api('/me/friends', function(response) {



//stuff you want to happen after getting data goes here

console.log(response);

alert(response.data[0].name);



}); //FB.api



// END - GETTING FACEBOOK DATA

4. Paste it in the same place of html panel

alert(response.data[0].name);
where it says .name you can change it to .ID, .Hometown, etc

**For backup, click on JSBIN---> create milestone**

To get photos of your first six friends
1. After //stuff you want to happen after getting data goes here
2. add for (var i=0; i <= 5; i++){console.log(response.data[1].name);$('.FacebookPhotos').append("<img src='http://graph.facebook.com/"+response.data[i].id+"/picture?type=large'/>");}

or just

$('.FacebookPhotos').append("<img src='http://graph.facebook.com/"+response.data[i].id+"/picture?type=large'/>");



for (var i=0; i <= 5; i++){console.log(response.data[1].name);$('.FacebookPhotos').append("<img src='http://graph.facebook.com/"+response.data[i].id+"/picture?width=125&height=125'/><p>"+response.data[i].name+"</p>");}    

this will give your friends'name under their photos.

("<div class='column'><img src='http://graph.facebook.com/"+response.data[i].id+"/picture?width=125&height=125'/><p>"+response.data[i].name+"</p>");}  

The div class will align those pictures in columns

To style the border of the photos
1. Go to CSS and add the following:


.column{
   float: left;
}

.facebookPhotos{

  width:800px;
  margin:0 auto;
  
}

***Add <img class='img-circle' before src to make the images in round shapes. see below ***

$('.FacebookPhotos').append("<div class='column'><img class='img-circle'  src='http://graph.facebook.com/"+response.data[i].id+"/picture?width=125&height=125'/><p>"+response.data[i].name+"</p>");}  

Re run it. If it doesn't work, go to Add Library, boost strap Latest


for (var i=0; i <= 10; i++)

the 0 will show your first friend who joined your facebook
the 10 will show the additional 10 friends, so in total 11.
If you change 0 to 5 it will start showing the 5th friends of yours.