|
|
2#
楼主 |
发表于 31-12-2010 00:01:07
|
只看该作者
手把手教你开发Facebook 应用
FROM:http://article.yeeyan.org/view/fren/3299
目录- 引言
- 创建“Hello World”程序
- 在用户信息栏中使用FBML（FaceBook标记语言）
- 在用户信息栏中使用mock-AJAX技术
- 使用Mysql数据库创建计数器
- 将这些例子代码集合到一起
- 相关下载
引言
这个教程指导我们如何创建一个名为“tutorialapp”的应用，当你创建自己的程序的时候，它可以作为一个模板。使用这个教程需要你有一个支持php5的web服务器。
最新版本的“tutorialapp”可以在这里（http://tperry256.dreamhost.com/f8/tutorialapp/）找到。访问这个连接的时候，系统会要求你登录到facebook，并且增加“tutorialapp”程序。在很多公司像这样访问服务一个月只需要花费几美元而已。
当你创建了自己的应用，你会使用一个不同的名称和不同的服务器。我们把那些会使你的应用与众不同的地方用这种颜色高亮显示。
创建“hello World”程序
- 访问：http://developers.facebook.com/
- 点击“Get Started”
- 点击“Add Facebook Developer Application”
- 一个到“Developer”的链接将显示在Facebook的左边导航栏，进入应用开发
- 点击“Setup new Application”按钮
- 下面是一些表单的填写步骤
- Application Name：在本文中，我们填写“Tutorial Application”--对于你自己的应用，你要填写自己不同的名称。
- 点击“Terms of service”
- 点击“Optional Fields”链接，来进行更详细的配置
- Support E-mail：你在Facebook的注册Email会自动填入，但可能你并不希望自己的个人Email被所有使用你应用的人知道，所以也可以填写一个你可以使用的其他Email。
- CallBack Url：在本文中，我们填写“'http://tperry256.dreamhost.com/f8/tutorialapp/”。你应该填入不同的URL，通常情况下，你要填写你自己服务器上运行这个应用的目录的URL。
- Canvas Page URL：http://apps.facebook.com/：在本文中，我们填写“tutorialapp”--你必须为自己的应用填写一个不同的名称。
- Use FBML：保持默认设置即可。
- Application Type：保持此处设置为：“website”
- Can your application be added to Facebook：设置“yes”，然后进行详细设置
- TOS URL：留空即可。
- Post-Add Url：在本文中，我们填写“'http://apps.facebook.com/tutorialapp/”，对于你自己的应用，一般你应该填写自己一个不同的面板页的完整路径。
- Default FBML：输入“hello”
- 其他的设置按照安装默认即可。
- Side Nav Url：在本文中，我们填写“http://apps.facebook.com/tutorialapp”，对于你自己的应用，也应该填写自己不同面板页的完整路径。
- 其他设置使用默认即可。
点击“Submit”按钮提交。 进入“My Application”页面，检查刚才的应用是否已经创建。 拷贝php5最新版的客户端库文件到你的服务器端应用程序的目录。 在后面的“相关下载”中有库文件的一些下载地址。如果你使用一个类UNIX 的shell，并且当前位于应用程序的目录，那么可以运行下面的命令：
11. 建立一个“appinclude.php”文件，该文件要被你的应用的所有php文件在头部包含。将如下代码粘贴到文件中：
<?phprequire_once 'facebook.php';$appapikey = '
';$appsecret = '
';$facebook = new Facebook($appapikey, $appsecret);$user = $facebook->require_login();//[todo: change the following url to your callback url]$appcallbackurl = '
';//catch the exception that gets thrown if the cookie has an invalid session_key in ittry { if (!$facebook->api_client->users_isAppAdded()) { $facebook->redirect($facebook->get_add_url()); }} catch (Exception $ex) { //this will clear cookies for your application and redirect them to a login prompt $facebook->set_user(null, null); $facebook->redirect($appcallbackurl);} |
12. 将其中的“app_key”和“secret”替换成你自己的。他们将显示在应用开发网站的的“My Applications”页面中，你同时要将我们的“call back URL”换成你自己的。
13. 创建一个“index.php”文件，它将是你的应用的主页面，将如下代码粘贴进去：
| <?phprequire_once 'appinclude.php';echo "<p>hello $user</p>"$$ |
14. 在浏览器中输入你创建的应用的回调地址，你也可以输入面板页的路径，都会访问到“index.php”这个主页。总之，不管哪种方式，都是要在你的浏览器中输入地址 :-)
这是我们这个应用的回调地址：http://tperry256.dreamhost.com/f8/tutorialapp/
这是我们这个应用的面板页地址：http://apps.facebook.com/tutorialapp/
15. 点击“I agree”接受你的应用的服务条款，然后点击“Add [你的应用的名称]”。
16. 接着系统会自动转向到面板页，其中包含了“index.php”的运行的输出结果。
17. 在这个应用中，进入你的用户信息栏中，你会发现“hello”字符，这个是你在前面设置的默认FBML。
18. 最后，从左边的导航栏可以返回到面板页。
在个人信息栏中使用FBML
- 下面是“index.php”的一个扩展版本，它可以将用户在表单中填写的字符串显示在用户的信息栏中
- 注意：提交空字符串会导致用户信息栏的无法显示！
| <?phprequire_once 'appinclude.php';echo "<p>hello $user</p>"$$if (isset($_REQUEST['profiletext'])) { $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user); $facebook->redirect($facebook->get_facebook_url() . '/profile.php');}echo '<form action="" method="get">';echo '<input name="profiletext" type="text" size="30" value=""><br>';echo '<input name="submit" type="submit" value="Display text on profile">';echo '</form>'; |
在用户信息栏中使用mock-AjAX技术
- 下面的代码使用FBML的mock-AJAX技术在用户信息栏中增加一个表单，会给用户一种信息栏被动态更新的假象。
- 注意“index.php”文件的最上面对mock-AJAX进行调用的if语句。
| <?phpif (isset($_REQUEST['mockfbmltext'])) { echo $_REQUEST['mockfbmltext']; exit;}require_once 'appinclude.php';echo "<p>hello $user</p>"$$$fbml = <<<EndHereDoc<fb:subtitle>This is the subtitle</fb:subtitle><form><input name="mockfbmltext" type="text" size="30"><br /><input type="submit" clickrewriteurl="$appcallbackurl" clickrewriteid="preview" value="Draw text below"/><br /><div id="preview" style="border-style: solid; border-color: black; border-width: 1px; padding: 5px;"></div></form>EndHereDoc;$facebook->api_client->profile_setFBML($fbml, $user);echo "<p>the following form was added to the profile box:</p>"$$echo $fbml; |
使用Mysql数据库创建计数器
- 这个例子需要你在服务器上创建一个php脚本可以访问的数据库。
- 如果你没有数据库，就新建一个。
- 在这个数据库中新建一个名为“counter”的数据表，表中有一个名为“count”的integer类型的列。
- 创建一个新文件名为“dbappinclude.php”，将下面的代码粘贴进去，别忘了替换你自己的数据库地址，用户，密码和数据库名称。
<?phprequire_once 'appinclude.php';$dbhost = '
';$dbuser = '
';$dbpass = '
';$dbname = '
';$conn = mysql_connect($dbhost, $dbuser, $dbpass);mysql_select_db($dbname, $conn);function query($q) { global $conn; $result = mysql_query($q, $conn); if (!$result) { die("Invalid query -- $q -- " . mysql_error()); } return $result;} |
5. 现在在浏览器中访问下面这个新版本的“index.php”，主页将显示一个计数器，并且没访问一次“index.php”，计数器就会更新一次。
<?php
require_once 'dbappinclude.php';
echo "<p>hello $user</p>"$$
$rs = query("select count from counter");
if ($row = mysql_fetch_assoc($rs)) {
$count = $row['count'];
query("update counter set count=count+1");
} else {
query("insert into counter values (1)");
$count = 1;
}
echo "<p>the count is $count</p>"$$ |
将这些例子代码集合到一起
- 这里是一个最终版本的“index.php”，将上面的例子集合到了一起，假定你已经在前一个例子中创建了“dbappinclude.php”
| <?phpif (isset($_REQUEST['mockfbmltext'])) { echo $_REQUEST['mockfbmltext']; exit;}require_once 'dbappinclude.php';echo "<p>hello $user</p>"$$$rs = query("select count from counter");if ($row = mysql_fetch_assoc($rs)) { $count = $row['count']; query("update counter set count=count+1");} else { query("insert into counter values (1)"); $count = 1;}echo "<p>the count is $count</p>"$$if (isset($_REQUEST['profiletext'])) { $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user); $facebook->redirect($facebook->get_facebook_url() . '/profile.php');}echo '<form action="" method="get">';echo '<input name="profiletext" type="text" size="30" value=""><br>';echo '<input name="submit" type="submit" value="Display text on profile">';echo '</form>';$fbml = <<<EndHereDoc<form><input name="mockfbmltext" type="text" size="30"><br /><input type="submit" clickrewriteurl="$appcallbackurl" clickrewriteid="preview" value="Draw text below"/><br /><div id="preview" style="border-style: solid; border-color: black; border-width: 1px; padding: 5px;"></div></form>EndHereDoc;$facebook->api_client->profile_setFBML($fbml, $user);echo "<p>the following form was added to the profile box:</p>"$$echo $fbml; |
相关下载
|
|
发表于 30-12-2010 23:56:12
收藏
赞
踩
