How to Make Facebook Apps
A 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
topvideo.html
<html>
<head>
<style type="text/css">
.ytThumb {
margin:5px;
margin-right:20px;
margin-left:22px;
};
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/
jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var linkToYouTube = "http://www.youtube.com/embed/";
// When a img of class ytThumb is clicked call the function changeTheVideo
$('.ytThumb').bind('click',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);
}
});
</script>
</head>
<body>
<!-- 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="http://connect.facebook.net/en_US/all.js" charset="utf-8"></script>
<script>
FB.init({appId: '147514068671652',
status: true, // Check login status
cookie: true, // Enables cookies so server can access the session
xfbml: true // Parse XFBML
});
</script>
<!-- Allows a facebook user to bookmark your tab -->
<fb:bookmark></fb:bookmark>
<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="http://www.youtube.com/embed/Fkxz0Tvhbd4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
<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",
"6bNwBJ4dky8"];
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 http://img.youtube.com/vi/YTCODE/default.jpg
document.write('<img class="ytThumb" src="http://img.youtube.com/vi/'+ 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;
}
insertABrk++;
}
-->
</script>
<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>
</body>
</html>
really tahnks for this amazing work
You’re very welcome
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
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
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.
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.
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.
You need to create all of these tools using a language like PHP. Do you know PHP?
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
As far as I have been able to see blip.tv doesn’t have a standard location for thumbnails like YouTube. I’ll check out the other video sites
Thanks for your response, I appreciate your time.
You’re very welcome 🙂
Can you make an application for Facebook for me????
I’m going to add on to this tutorial after Facebook makes their recent changes permanent.
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
168739973231046
i have it secure..
https://www.bigairbag.com/fb-video/
non secure
http://www.bigairbag.com/fb-video/
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
You should be able to search for the app in facebook? I looked for it, but it doesn’t show up. Is your app name BigAirBag-Hot-Videos?
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.
Cheers,
Raj
UK London
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 🙂
Lol true 🙂
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?
Hi, While I don’t accept work I will do my best to walk you through the process of making a FB page. What do you want it to do?
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
Do you have an ssl certificate? Facebook requires them now
I think i do, but i dont know which one to generate , crt/csi
I have generated ssl certificate, any advice on what to do next ? will it work now?
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
🙂 , i sorted the ssl thingy
Great! That is kind of a pain I know. I’m glad you worked it out
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.
Feel free to contact me at derekbanas@verizon.net
Trying to setup a app such as this one but cant find any tutorial.. Maybe you could help.
.. https://www.facebook.com/ocomico/app_161683100556760
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.
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
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..
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
okay…
thank you..
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
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
Great work and great advise. I look forward to watching more of your videos.
Thank you. I’m glad you like them
realy so good & thnks so much for video
You’re very welcome 🙂 I’m glad you liked it
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?
Facebook has changed, but my program still works. Here it is http://www.facebook.com/newthinktank/app_147514068671652
I’m sorry to say that it is not working now, All I see is an HTTPS warning. If you’re interested I have sent you a tutorial proposal at your derekbanas@verizon.net email. This tutorial idea could not only address the SSL issue, but also garner you a lot of interest from the GameMaker community.
Just check your inbox for something from St. John or stjohn3d.
-best!
That’s odd, but it is pretty much expected when developing anything for Facebook. Thanks for the input.
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 developer.facebook.com 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
Sorry it took so long. The number one reason why people have this happen is that they don’t have SSL certificate. Does your site start with https? I have an article on HTTPS certificates. If that isn’t it, tell me. I’ll watch for your comment
no sir it won’t start with https……can i publish it from free domain site like
no-ip.org………….or from the local host?………or if you have any other alternative for that?
No I’m sorry, as far as I know Facebook requires anything you put on their site to use an ssl certificate. That is probably your issue
ok thank you
Hello,
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.
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
if the app is a small game how can i display the result to the user on his wall
If it works on a stand alone web page you can make it show up in Facebook. Facebook just acts as a frame for any page you make on your own website
in most of the apps it is seen dat a picture gets posted in the users wall displaying da result…even it shows up details of da user(such as name) how to get da details of the user…thanks in advance
thanks @admin of this page
You’re very welcome 🙂 Thank you for stopping by
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…
reply pls
What do you need?
how to make an app dat will take da details of da user(such as name,city etc) and display the result based on these details in the form of an image on the user’s wall .getting detail of users is fine …but my main problem is how to display it in the form of an image and post it in da users wall.pls suggest
Here is a link to the most up to date way to do what you want Facebook Help. I’ll look into Facebook apps again soon. I hope that helps
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
hey i don’t have any website, what do i give in the canvasURL?
As far as I know you must still have a website to host Facebook pages like this
ohk.
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 005vinay@gmail.com or vinay5121991@gmail.com
Pass along what you are trying to accomplish and I’ll see if I can help. I personally ignore people that refuse to enable JavaScript, but I know sometimes that isn’t an option. My email is derekbanas@verizon.net
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!
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
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
I hope you were able to get this to work with the tips I gave on YouTube. I know making anything for Facebook can be quite a pain
sir can u make a website named as (Most Kamineyyy Friendssss……) PLEASE sir PLZZZ 😀 TNXXXX
I’m sorry, but I don’t know what that means
great work….
plz tell me How to make a Facebook Game App you have any ideas ?
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
I have a website but I have not purchased a SSL certificate yet. Are SSL certificates (https) now absolutely necessary to create FB apps?
Thanks!
As far as I know they are still required. They are pretty cheap now. You can find them for around $12 a year
Hi, i want to make app like stick run but not same. Any help?
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
give me an example web site builder to create a canvas url
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 🙂
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
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
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?
i want to make a fb app which is lile top 4 frendz i want to make it top 3 enemies
[plzzzzz help mee]
i have done all the things shown in part 1 except codding plllllllzzzzzzzzzz helppp
I’m sorry, but I don’t know what type of app you want to make? Do you know html, css, javascript, and php?
I would like some kind of app that will create more traffic,maybe FB ‘friends’ or Likes.
Thanks
Thanks for the request 🙂 I’ll see what I can do
Is der any oda fbk app code apart 4m dis?
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
Basically you just need to make a regular HTML / JavaScript web page and then insert it into a Facebook page like I did here. I have HTML, CSS, JavaScript and PHP tutorials to help you learn. I hope they help 🙂
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
Do you want to make a Android facebook app?