In previous tutorial we discussed some of HTML5 features, Now in this tutorial we will create HTML5 and php based facebook application. We will use "HTML5 Offline cache" feature with <audio> and <embed> tags.
Before proceeding you can view the app from here or download the full source package from here.
AS we are using HTML5 features in Facebook application for this we have to register our application, to do this use the following steps:
1. Go to developers page Click on “Setup New App”.
.jpg)
2. Fill the "application name", select "Agree" and click on "Create Application" button.
.jpg)
3. Fill the "site URL" under web site" tab.
.jpg)
4. Under "Facebook Integration" fill the "canvas page" and "canvas url".
.jpg)
Canvas page: Your application URL on facebook
Canvas Url: Location of directory where your code will be located
5. When you will go back to your “App Page” you will see your application ID, Secret and API key which you will use in your application.
.jpg)
Now extract the downloaded files in desired directory of your hosting server, open the “config.php” file, and change ID and keys to your own Application Id and keys, also change application URL’s to your own, for more information follow the comments on "config.php" file.
Now visit your canvas page to see your app running.
When you will open the index.php file first you will see the code in php short tags which is:
<?include_once "config.php";?>
We used this code to include config.php file which is configuration and authentication file, we want user to authenticate before using our application that’s why we have included this file, you can refer to previous tutorial for more information.
Here the facebook part has ended, now we will discuss HTML5 features which we used in index.php file,
In index.php file we have used javascript with some HTML5 features, but we will only discuss HTML5 features.
- Offline Cache.
- Playing Audio Files.
- Embedding Flash.
Offline Cache
To use offline cache first you have to change your .htaccess file in your server, for this open .htaccess file and put the following code in it:
AddType text/cache-manifest .manifest
Now create .manifest file and put the urls of file which you want to be cached. You can use both absolute and relative urls. If you have downloaded the code you will se we have cached files like this:
CACHE MANIFEST
cache:
http://www.onlytipsandtricks.com/html5/flash.swf
Now if look into index.php file you will see that after declaring document type we have used the following tag to specify the location of manifest file:
<html manifest="http://www.onlytipsandtricks.com/html5/cache.manifest">
you can also use relative URL like this:
<html manifest=" cache.manifest">
This is how it looks:
<!DOCTYPE HTML>
<html manifest="http://www.onlytipsandtricks.com/html5/cache.manifest">
</body>
Your Code Here
</body>
</html>
After visiting the application Check your browser's offline cache if files are cached or not.
Playing Audio Files
You can use audio tags to play mp3, wav and ogg file without any external plugin support like flash or any other, to do this use the following code:
<audio src="http://www.onlytipsandtricks.com/html5/ring.wav" controls="controls">
or
<audio src="ring.wav" controls="controls">
Embedding Flash
You can use embed tags to embed SWF files, without any external plugin support. To embed flash use the following code:
<embed src="http://www.onlytipsandtricks.com/html5/flash.swf" width="400" height="300"/>
or
<embed src="flash.swf" width="400" height="300"/>
NOTE: You can check the test results conducted by W3c about different browser support for HTML5.
Please give your suggestion to make this code work better.
[...] - http://www.onlytipsandtricks.com/facebook/html5-and-php-based-facebook-application-development/ [...]
ReplyDelete