Wednesday, 20 February 2013

Developing Facebook App Session

Hi guys, this blog is written especially for my TE class. We had a....programming session? Freeformers an app developer company (I think that's what they are lol) came in to our BFP class to teach us how to programme using HTML, CSS and Javascript. They were suppose to teach us how to develop an app for Facebook but I don't see what they taught us towards the end was relevant. But anyways, below is a step-by-step guide of what we did in class and may be useful for this weeks deliverable.

1) Go to
2) Register on top right hand corner
3) In the HTML section enter content between body tag. E.g. <body> blah blah blah </body>

HTML for content

Tags Classify content

<h1> title </h1>

<h2> subheading </h2>

New Paragaph 
<p> this is a paragraph </p>

Button- this will appear as a button
<Button> Click me! </button>

Link tag
<a href=""> link</a>

*Note: The tags/ html codes can be on any line, same line or whatever. Doesn't matter. But space it out to make it neater or / and easier to read.

<img src="ieducase.jpg">

 or if its an image on web, right click on the image, select 'copy image location'

<img src="">

Bullet points/ Unnumbered list
<li> this is a bullet point </li>

Numbered list. e.g. 1, 2, 3,
<li> this is numbered list</li>

To style your website click CSS on the tab at the top- CSS define how your tags look

1. h1{ <--- this refers to the heading in HTML
2.  Color: red; <--- this makes the header red
3. Text-align: center; <---- the aligns the heading to the center
4. font-size: 14px
5. text-decoration: underline;
6.font-weight: bold;
7. font-family: helvetica;
9. p
11. font family: helvetica;
12. }

To make reference to certain paragraph. go to html and go to a paragraph <p class="paragraphone">
The go to CSS

.paragraphone{font-style: italic;}

Twitter Bootstrap is useful for getting codes

New page

JS BIN on top left hand corner--> New page

How to add Youtube video onto your page

On youtube, click on Share underneath the video--> select Embed--> The html code will appear, copy it--> paste it into your jsbin html page between the body tags.

You can always change the size of the video, by adjusting the width and height in the code.

Top right hand corner untick 'Auto-run JS' for the page to load quicker.

How to add like button for your Facebook page

1. Go to
2. search like button
3. scroll down to step 1
4. copy the jsbin address (the url,
5. paste into the URL to like field box. and add latest to the end of the url. e.g.
6. make any adjustments
7. click on Get code
8. copy the first bit of code in the box
9. paste it just under the body tag
10. copy the 2nd bit of code and paste it back to html.
11. If you want it to be below the video for example, paste it under the video code

To add a Comment pluggin, 
1. go back to facebook developer
2. search for comments pluggin
3. copy the jsbin url
4. paste it the URL comment field box
5. get code
6. Copy the second bit of html code
7paste it into the HTML section,

*note* the first bit of the code is to show your connection with Facebook (ideally right under the opening body tag), second bit (short code) of the code is for the pluggin. 

You only need to the first bit (long code) of code once for Facebook pluggins. So you may have 3 Facebook pluggins but only need the long code once and 3 different short codes. 

add <br/> under the pluggins' code to have a gap between pluggins.

To have something in the center, video for example.
Add <center> before the video code
Add </center> after the code

For more pluggins go to,

For custom fonts, Google fonts.

For a background image, go to CSS

4. background size: 2000px 1000px;
5. background-repeat: no-repeat;
6. }

If you see someone else's website and you like certain components of their page and would like to copy it. Right click--> inspect element (firefox)/ view page source (other browser)

How to "STALK" people, LOL!
Go to Facebook personal profile picture
change the url to basically add "graph" in front of facebook

Copy ID number
paste it on the url after, replace your username in the url address.

to see the picture of that person
add 'picture' after the ID
?type=large will make the picture large

New Page
Add library-->jquery latest
Click Java script
inside body tag add <div class='facebookPhotos'>
go to
scroll down for Javascript

In the Javascript;
1. //adding an image
2. $('.facebookPhotos').append('<img src="http://fbfbfbdg'/>"};

for (var i = 1; i <= 100; i++){
// Stuff you want to happen on each loop goes here
} //for

add the code in 2, after //stuff you want to happen...

How to find personal information
Go to
Click Tools on the top
Click Graph API explorer
Add the info you want to know about in box on the left.
Click get access code

That's about it I think. There's more next lesson.

No comments:

Post a Comment