Navigation for applications, which run inside Facebook, has to be handled differently. In a multi-page based application, which runs inside Facebook, when a user clicks on a hyperlink, it will be loaded inside the iFrame. Suppose you want to direct the user to an external URL, in this case, you won't want it to appear in the same iFrame. Thus, navigation becomes ineffective and has to be implemented efficiently.
Suppose we have two files, index.php and about.php. We want to create a hyperlink for about.php in index.php, as well create a hyperlink to an external site, say www.example.com. Simply follow these steps:
Open
config.phpand add the following highlighted line to it:<?php require_once 'facebook.php'; $facebook = new Facebook(array( 'appId' => 'your_application_id', 'secret' => 'your_application_secret', 'cookie' => true, )); $appBaseUrl = 'http://apps.facebook.com/[your_app_canvas_name]'; ?>Replace
[your_app_canvas_name]accordingly and save the file.Now, add the following code to
index.php:<?php require_once 'config.php'; ?> <a href='<?php echo $appBaseUrl?>/about.php' target='_top'>About Us</a> <a href='http://www.example.com' target='_top'>External Link</a>
Save
index.php. Also, add some HTML code toabout.php. Now runindex.php.
Suppose our domain name is http://www.example.com and we have uploaded index.php and about.php inside a directory named my_app. If we specify http://www.example.com/my_app/ as our Canvas URL in Facebook, then by default when we access the application base URL, index.php is rendered inside the iFrame. If we wish to open some other page of our application inside Facebook, we just need to add the name of the file after the base URL of our application. For example, to open about.php inside Facebook, we need to go to: http://apps.facebook.com/[your_app_canvas_name]/about.php. Facebook automatically does this mapping. Whenever you enter a filename after your application's base URL, Facebook searches for it inside the predefined directory and renders that file inside its iFrame.
Here we have defined our application's base URL in config.php and while forming hyperlinks, we just concatenate the filename after this base URL if the file is in the same directory as index.php, otherwise we can form links accordingly. We have also set the target attribute of the hyperlink as _top. This makes sure that when we click on it, the URL of iFrame's parent changes.
Now, when we click on About us, we will be directed to http://apps.facebook.com/[your_app_canvas_name]/about.php, whereas clicking on External Link will direct us to the external site www.example.com.