How to create a Facebook Application in a Tab on your Facebook Fan Page
NOTE: Facebook is ever evolving. Check the Facebook Developer's Roadmap for timelines and changes.
- 1. Create your Facebook profile page.
- 2. Log in to your profile.
- 3. Applications will not (currently) work in Tabs on Standard User Profiles. So, you must create a Facebook Fan Page - otherwise known as a business or organization page.
- 4. Read Get Started
- 5. Create an App with the Facebook Developer's App
- Use the following settings:
- BASIC: Application Name: My Application (or whatever you want)
- AUTHENTICATION: Installable to: Facebook Pages (IMPORTANT)
- PROFILES: Tab Name: My App (or whatever you want)
- PROFILES: Tab URL: MyApp (IMPORTANT:this points to your folder /facebook/myApp/)
- CANVAS: Canvas Page URL: MyAppPage (or whatever you want)
- CANVAS: Canvas Callback URL: http://yourWebServer.com/facebook (IMPORTANT: this points to your /facebook/ folder )
- CANVAS: Render Method: FBML (IMPORTANT: facebook markup language)
- 6. Create a folder on your personal web server called /facebook/.
- 7. Create another folder under /facebook/ called myApp
- 8. Create two files under /facebook/myApp/ called index.php and test.php.
NOTE: you can use asp.net on a windows server, or some other server-side language if you prefer.... which I do, but am not going to show you for the sake of making this less complicated than it needs to be.
- 9.
The Code
index.php
<h3>
Welcome <fb:name uid="<?=$user_id?>" useyou="true"/>
</h3>
<?php
$callbackurl='http://yourWebServer.com/facebook/myApp/test.php';
?>
<div width='100%' height='150px;'>
<img style='float:left; margin: 0 25px 0 15px;' src='http://profile.ak.fbcdn.net/object2/1319/1/n337170087546_5097.jpg' />
<a href='#' onclick='static_link("resultsDiv",0);' >
List all categories
</a>
<br/><br/><br/>
</div>
<div id="searchDiv">
<form id='myform' >
<input type='text' id='keyword' name='keyword' />
<input type='button' value='Search' onclick='do_ajax("resultsDiv",0);' />
</form>
</div>
<div id="resultsDiv">
</div>
<fb:js-string var="loading">Loading....</fb:js-string>
<fb:js-string var="noresults">Sorry, there were not results!</fb:js-string>
<fb:js-string var="externalresults"><!--<fb:iframe width="540" height="270" frameborder='0' src='http://your.other.iframe.location' />--></fb:js-string>
<script type="text/javascript">
<!--
function do_ajax(div,val) {
document.getElementById(div).setInnerFBML(loading);
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
document.getElementById(div).setInnerFBML(data);
}
var params={"adkeyword":document.getElementById('keyword').getValue(),"category":document.getElementById('keyword').getValue()}; //add parameters as comma separated "param":value
ajax.post('<?=$callbackurl?>?ctgry='+val,params); //GET values sended with "val" and POST values sended with "params"
}
function static_link(div,val) {
document.getElementById(div).setInnerFBML(loading);
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
document.getElementById(div).setInnerFBML(data);
}
var params={"action":"catlist","adkeyword":"categorylist"}; //add parameters as comma separated "param":value
ajax.post('<?=$callbackurl?>?all='+val,params); //GET values sended with "val" and POST values sended with "params"
}
//-->
</script>
test.php
<?php
$url='http://oswegofultonnycoc.weblinkconnect.com/cwt/external/wcpages/wcdirectory/blankdirectory.aspx';
if (isset($_REQUEST['ctgry'])){
$sourcecode = file_get_contents($url.'?category='.$_REQUEST['category'].'&adkeyword='.$_REQUEST['adkeyword'].'');
preg_match_all("/\<a href\=\".*\<\/a\>/iU", $sourcecode, $temparray);
foreach( $temparray as $key => $item) // temparray is an array inside of an array, so I did two foreach statements to spit out all the values
{
$count=0;
foreach( $item as $i => $itemurl)
{
$itemurl = preg_replace('/href\=\"/iU', 'href="'.$url.'', $itemurl);
echo $itemurl.'<br/>';
$count++;
}
}
if ($count<1) {
echo "Sorry, no results found!";
}
}
if (isset($_REQUEST['all'])){
$fetch_url = "?action=".$_REQUEST['action']."&adkeyword=".$_REQUEST['adkeyword'];
$sourcecode = file_get_contents($url."".$fetch_url);
$sourcecode = preg_replace('/href\=\"/iU','onclick="link_clicked(this.getHref);" href="'.$url."",$sourcecode);
echo $sourcecode;
}
?>
