How to Make Facebook Apps

How to Make Facebook AppsA while back I promised to make this video series and it’s finally here!

In this video series you will learn How to Make Facebook apps. I’ll cover every subject imaginable. If you want to see this first app look for the tab named Top Video in my left sidebar on my Facebook page.

I made this app because someone was actually charging to allow people to post their YouTube videos. It was fun to make and useful.

All of the code for this video and the next video is available below. You can do whatever you want with it.

If you have any ideas you’d like covered leave a comment below. I’ll do my best to cover everything.

If you like this let others know

Code From the Video


<style type="text/css">
.ytThumb {
<script type="text/javascript" src="

<script type="text/javascript">

$("document").ready(function() {

	var linkToYouTube = "";
	// When a img of class ytThumb is clicked call the function changeTheVideo
	function changeTheVideo() {
		// Gets the value for alt for the thumbnail that was clicked
		var videoCode = $(this).attr('alt');
		// Saves the url for the video that I want to display in the iframe
		var newVideoLoc = linkToYouTube + videoCode + "?wmode=transparent";
		// Assigns the YouTube URL to the src for the video in the iframe
		$('#ytVideo').attr("src", newVideoLoc);



<!-- FB.init initializes the JavaScript SDK with your app id, allowing you to then make calls against the Facebook API -->
<div id="fb-root"></div>
<script src="" charset="utf-8"></script>
FB.init({appId: '147514068671652', 
status: true, // Check login status
cookie: true, // Enables cookies so server can access the session
xfbml: true // Parse XFBML

<!-- Allows a facebook user to bookmark your tab -->

<h2>Top Videos</h2>
<div id="topVideo">

<!-- iframe contains my YouTube video. It will change if the thumbnails below are clicked. wmode=transparent must be used or the iframe will be at the highest z-index and cover any popups -->
<iframe id="ytVideo" width="500" height="311" src="" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
<!-- Hide JavaScript Code

// Used to track when I need to insert a new line break
var insertABrk = 1;

// Creates an array that contains all my YouTube video codes
var arrayOfVideos = ["ZUXtGQkJcQ0","OzDd8z8vIFY","UQi-L-_chcc","DRR9fOXkfRE","BDo0lL_MqYo","_cLvpJY2deo","_iRIPJHrdXg",

document.write('<br />');

// Cycles through all of the YouTube codes that are stored in the array
for(i in arrayOfVideos)
	// Prints out the img tag with the src being the default YouTubethumbnail
	// YouTube thumbnails are at
	document.write('<img class="ytThumb" src="'+ arrayOfVideos[i] + '/default.jpg" alt="' + arrayOfVideos[i] + '" />');

	// Outputs a line break after every fourth img is displayed
	if(insertABrk == 3)
		document.write('<br />');
		insertABrk = 0;


<br /><br />

<!-- Allows the user to post to their wall from in your app. Also allows them to like your app -->
<div id="comments"><fb:comments numposts="4" title="My Blog Comments" simple="1"></fb:comments></div>


95 Responses to “How to Make Facebook Apps”

  1. supprof1 says:

    really tahnks for this amazing work

    • admin says:

      You’re very welcome

      • abrar says:

        I want to built a app to show online friends in faceboook post , can u help me out or guide a bit for that please

        • admin says:

          I’m going to revisit making Facebook apps as soon as the API stabilizes a bit. What you want to do was easy under the old system. I’ll look into what has changed

          • archie says:

            can i ask?can i use php in making a facebook application. in our thesis were making a facebook application so can you please tell me what will be the easiest language that i can use in making a facebook app. thank you please reply in my email.

            • Derek Banas says:

              Yes you can definitely make Facebook apps using PHP. It is a web page just like any other. The only difference is that it is displayed in the Facebook interface.

          • Theresa Esparza says:

            I am having difficulties trying to make an app on face book for my friends and I. I wanted to make an app which allows my friends and I to share links with each other so we can help each other out on a game. It is sort of a link exchange where we can post a link and have others lick on the link in order to help each other out on the game. Can you help me with this? Add link button. I want to be able to post the name of the person, location, description, Posted (UTC)time of post, time left, and how many clicks on link. If there is any way to help me please let me know.. oh and a refresh button link and add as a friend link.

  2. JKK says:

    Thank you so much for this amazing tuts. I just want to know if this work for videos hosted by BLIP.TV or other video hosts. Thanks

  3. JKK says:

    Thanks for your response, I appreciate your time.

  4. zia says:

    Can you make an application for Facebook for me????

  5. Marcel Kraan says:

    Hello thanks for the great tutorial.
    I have everything the same as you and i change the id to myid 168739973231046

    But i can’t find my app?

    App ID/API Key

    i have it secure..

    non secure

    app-display name = BigAirBag-Hot-Videos
    page-tab-name = BigAirBag Top Videos

    Your java is really nice and i want to make a lot of cool thinks..
    but i’am fighting to find/add the app on facebook

  6. Raj says:

    Can fbml still be used. Alot has changed, is it possible that you could have an update on how to do this with iframes.

    Also would like to add that I love your site, informative and interesting. A bookmark for me.

    UK London

    • admin says:

      I’m getting very close to understanding all of the FB changes. I’ll make a new tutorial as soon as possible. In the meanwhile they’ll probably change everything again πŸ™‚

  7. Raj says:

    Lol true πŸ™‚

  8. Eric says:

    As much as I’d like to think myself capable of recreating this app for my company FB page, I know my limitations. Do you have time and interest in creating this (or other) app(s) for others?

  9. prince says:

    Hi , nice tutorial , i did everything like you instructed, but when i go to the facebook side, nothing seems to happen ,i have uploaded the codes to my filezilla , and nothing happens after that

  10. prince says:

    I have generated ssl certificate, any advice on what to do next ? will it work now?

  11. prince says:

    Hi, thanks for your speedy repy, i have generated the ssl certificate , but i am guessing i have to implement it differently , but am not so sure what the next step is .. thanks

  12. prince says:

    πŸ™‚ , i sorted the ssl thingy

  13. Static says:

    Hello, Would you have an email or could create one for public people to contact you? I have many questions that I would look stupid typing in a comment box with hahaha.

  14. Dio Barus says:

    Trying to setup a app such as this one but cant find any tutorial.. Maybe you could help.


    What this app does is that it takes the name of the user, match randomly with a picture in the server and publishes the final result in the wall for all the friends to see and also know the user is using such app.

    • admin says:

      Sorry, but I don’t understand the language. I’m going to revisit Facebook apps in the future. You basically just make them exactly like you make any other web page. It is just that the Facebook interface surrounds whatever you make. If you learn JavaScript you should be able to make most any type of FB app.

      Here is a fast and slow JavaScript Video Tutorial

  15. Punit says:

    hello, i have a question, regarding to facebook app.
    can we create any facebook app or any application, that do something like this:-
    whenever someone tag me on any pic or that pic needs to be filter i mean, if the pic is invalid(something illegal, or any naked pic), that person cannot tag me on that pic.
    is it possible to filter images..?

    Thank you..

    • admin says:

      I’m not sure about that. That sounds like something that would be controlled by Facebook. You could adjust your privacy settings to be alerted anytime someone tags you in a photo though.

      Go to facebook and click on the downward arrow in the upper right hand corner
      Click privacy settings
      Click timeline and tagging
      Check that you want to review all tags assigned to you

  16. Punit says:

    thank you..

  17. GeeTee says:

    I am the Online Social Media Manager for a small company. I have not dealt a ton with code so I would consider myself a novice in it.
    I know things that are needed for the social media (i.e. Facebook) and one of those things is apps to have more control. I don’t mind making them myself… and my job allows for me to learn since my work is somewhat of an experiment. However, I do not have access to a website to build the app or store app information. I also don’t have control over finances for the purchasing of such a space.
    What do I need exactly to exactly to build apps for Facebook? I need to know what I will need so I can inform my employer. Thanks

    • admin says:

      Well a Facebook page is just like every other web page. They tend to come in 2 forms. Games are almost always made in Flash, but that is starting to go away. Everything else is made using HTML, CSS, JavaScript, PHP, and SQL. You just make a page on a domain you own and then ask Facebook to display it on your Facebook page.

      You are required to have a hosting plan and domain name. Both are very cheap. I use a Linux Deluxe plan with Go Daddy.

      If you don’t want to learn all of these languages your best bet would probably be to post videos on YouTube. It is 100% free and I’ve never seen any social network drive more traffic than YouTube. I’m ranked in the top 99.9% of sites online for generating traffic. Over 73% of that traffic comes from YouTube.

      People also love to watch videos about a business. They’d love to meet the people and know that they know what they are doing. I don’t think there is a better way to showcase products and services. And, the best part is that YouTube is the least used social network for building brand loyalty.

      I hope that helps

  18. Jeremy says:

    Great work and great advise. I look forward to watching more of your videos.

  19. awnyrlife says:

    realy so good & thnks so much for video

  20. Viking says:

    From reading the string of comments, it seems like Facebook has made changes that will require the code you included to be modified. Will the code above still work?

  21. bharat patel says:

    Helll sir,,

    i am very inspired by your video tutorial….so.i have created FB app as a part of my semester project,……..but now a days fb had mad some changes like only iframe is used and so so…….when i login to account and open my app with canvas page URL …it works but other user cant see it…..i think there is some mistake…….find me way so other use can add my app to profile….it is very importanat for my curriculam . please help me si as soon as possible

  22. MAC says:


    I am quite looking forward to the continuation in this series of tutorials. I am having the hardest time wrapping my head around the social plugins and the facebook sdk to have the dynamic interactions on my app.

    Meanwhile, I am taking in as much javaScript as I can! I really appreciate your tutorials.

    • admin says:

      Thank you πŸ™‚ There really isn’t much to basic Facebook apps. You just make the application on your website and then get Facebook to display it. I’ll improve on these applications by showing how to make better website apps using php, javascript, html 5, etc. in the near future. Thanks for watching

  23. ravidra says:

    if the app is a small game how can i display the result to the user on his wall

  24. nil says:

    in most of the apps it is seen dat after da user uses da app a picture gets posted in the users wall displaying da result(such as some content)…even it shows up details of da user(such as name) how to get da details of the user …thanks in advance…

  25. nil says:

    Thanks …:)yeah i knw.but how do the apps generate an image by based on the users details its still not clear to me.thanks for ur reply

  26. Punit says:

    hey i don’t have any website, what do i give in the canvasURL?

  27. Vinay Pandya says:

    Javascript it creating problem, bcz some people disable javasciprt in the browser.
    and can you make wordpress facebook apps which can display recent post from the wordpress blog ?
    please email me if you can.
    my email is or

  28. Neil says:

    Hello and thank you! I’m going to use this to make a game and post it.

    If you would like to give more of yourself and make another awesome tutorial… :0)… How to connect/listen for connection on your FB app would be awesome! I’m thinking a card game.

    Either way, thanks for a great start!

    • admin says:

      You are very welcome πŸ™‚ I’ll be revisiting Facebook apps in the future when I improve on my PHP tutorial. I’ll make sure I make a more complete solution to help you guys make FB apps. Thank you for the request

  29. jassim says:

    hi mr derek i followed ur steps and made the app my app called learning arabic is easy but i didnt get the script part of the video and where should we put it ,and how can i start the app

  30. rohan rajput chauhan says:

    sir can u make a website named as (Most Kamineyyy Friendssss……) PLEASE sir PLZZZ πŸ˜€ TNXXXX

  31. sheckotop says:

    great work….
    plz tell me How to make a Facebook Game App you have any ideas ?

    • Derek Banas says:

      Thank you πŸ™‚ You make them just like any other game made for a website. Then they are just placed in the Facebook page. I’ll cover this soon as I get into game development

  32. Thomas says:

    I have a website but I have not purchased a SSL certificate yet. Are SSL certificates (https) now absolutely necessary to create FB apps?


  33. matej says:

    Hi, i want to make app like stick run but not same. Any help?

    • Derek Banas says:

      What language? I can easily do that and I will cover games like that and more when I start making Android games. Since everything will be written in Java it can be used most anywhere

  34. nithin tata says:

    give me an example web site builder to create a canvas url

  35. Almira says:

    Hi, thank you for sharing your knowledge πŸ˜€
    My question is:
    Instead of youtube video I want to put photo with same options (that people could like it and comment it) in application … which part of the code would change and how?
    Thank you very much πŸ™‚

    • Derek Banas says:

      You’re very welcome πŸ™‚ A Facebook page is just a regular website inside of the Facebook interface. Just create everything like you would with any website and put it inside of the code required by Facebook. Sorry about the confusion

  36. Hamada says:

    Hi, thank you for sharing your knowledge

    My question is:

    how can i make an app that takes my blog posts (on blogger) and publish them for users who apply for the app on their wall automatically

    • Derek Banas says:

      You’re very welcome πŸ™‚ This is kind of a complex task because you are going to have to deal with the oauth login process. Have you tried pulling data from pages using my Android tutorial on parsing xml and json yet?

  37. Ashish says:

    i want to make a fb app which is lile top 4 frendz i want to make it top 3 enemies
    [plzzzzz help mee]

  38. Sam Stark says:

    I would like some kind of app that will create more traffic,maybe FB ‘friends’ or Likes.

  39. demola says:

    Is der any oda fbk app code apart 4m dis?

  40. Hey Admin PLease tellme how to create a facebook report card app or which celebrity u like apps please i need an help from u sir
    please help me its urgent

  41. Venkat says:

    I want to make fb app for linking my website to make facebook covers how can i make it could you please help me . I will be awaiting for your valuable reply

Leave a Reply

Your email address will not be published.