How to Make Facebook Apps 2
In the previous tutorial on How to Make Facebook Apps, I showed you how to get all of the tools you need and how to use a few XFBML tags.
In this part of the tutorial, I’ll finish everything up. I’ll show you how the Facebook app we are building actually works outside of Facebook. You can see it here Facebook Movie App.
I also show you how to grab YouTube thumbnails and how to dynamically load new videos.
I talked a lot about HTML, CSS, JavaScript and JQuery above. If you’d like to learn more about them just click the corresponding link for more video tutorials.
If you liked this video share it with others
Code From the Video
<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>
Hi Great tutorial
Please help, i need to create a Facebook App that will have a competition , when a user clicks like, is taken to the next page to enter the email and the App should also say thank you for entering
A Facebook app is just like any other web page. If you can program a way for them to enter their email, you can easily do this. Why don’t you just use the Facebook interface to get their email instead though?
Thanks for the reply
do you have any example I can use?
An awesome tutorial, but I wonder how to publish the apps created….
your tutorial is very good and very helpful.
i have a small question about the code
how can i make it take all video from my channel automatically ?
suppose i add new videos on my channels. with this code i nee to add the videos everytime I upload new video to my youtube channels.
thanks
Thank you 🙂 Create a regular expression that grabs the v code for the video link off of the YouTube channel you want to pull videos from. You could create a cron job that runs the link grabbing code when ever you want on a schedule
You are really good.
Can you make an updated video of what is going on nowadays on this theme for us who are not so “in” the Facebook programming?
Thank you 🙂 I’m going to cover PHP / JavaScript again very soon and include some Facebook apps. I’m also going to make a Facebook app for Android very soon. Thank you for the request and I’ll see what I can come up with
🙂 All of my cells of my body and whatever is my soul consist of are waiting for your PHP/Javascript Facebook apps! Please don’t take so long… 🙂
By the way, thank you for your answers at my e-mail.
I’m sorry, but I have to go and investigate all of the changes made to Facebook. When I was starting this tutorial they changed a bunch of things and messed up the rest of what I was planning. That is why I ended the tutorial prematurely. I’ll see what I can do about answering your questions soon.
Thank you for your answer!
I have another question:
Can i make an application for a user profile or it is absolutely required to make a Facebook Page and create the application for that Page?
Also, can you tell me how can i get some announcements from a web page and put them to my NewsFeed after someone Likes my Facebook Page?
I would like to make a fb app.i have little bit doubts on tmaking apps based on your method.Can you show me an simple video exampple to making an fb app.
I haven’t done anything with Facebook recently on Android because it changes constantly. This is what you’re looking for Facebook SDK for Android. I hope it helps