[Facebook]利用Iframe和PHP SDK实作应用

最后编辑于 2020-05-22
709 10 515

Facebook的应用程式开发支援多种程式语言,像是PHP、Java、ASP.NET、JSP等都可以,但其中以PHP的支援程度比较好,而且网路上可以找到的资料也比较多,门槛应该也属于比较低的。以PHP开发来说,想要将开发好的应用程式嵌入到Facebook应用程式之中,目前提供两种模式,一种是Iframe框架模式,另一种是FBML。

虽然FBML(Facebook Markup Language)对于Facebook的应用程式比较好开发,不过官方建议新使用者要开发应用程式的话,希望新手尽量改用Iframe来开发。在个人的应用程式介面中的範例程式码,官方也是使用PHP SDK来实作,所以本篇我们将针对官方的应用程式,来做一个实际演练的测试。

目前关于FBML停用的争议,在这篇文章中有解了,FBML语言会继续支援,只是希望未来开发尽量改用IFrame并搭配JavaScript SDK and social plugins去处理,不过大家也别担心太多,因为Facebook的应用程式常常在改来改去,今天看到的明天可能就不一样了。所以就让我们直接透过Ifame配上PHP SDK来测试一下吧!

尚未加入开发人员,请先加入:按这里

第1步 首先请来到你的应用程式管理页面,先选择你的应用程式后,然后找到该页面下方的「範例程式」区域,会有个「程式码範例」,点一下吧!补充一下,在这区域会看到下方还有一些开发文件可以参考,有兴趣可以点进去看看。

[Facebook]利用Iframe和PHP SDK实作应用

第2步 点开后,会跳出一个框框,里面会有建置程式的说明,你可以照着说明内容实作,或是跟着本文的步骤走。首先请先下载PHP Library。

[Facebook]利用Iframe和PHP SDK实作应用

第3步 下载后请用压缩软体打开,将里面的「examples」和「src」两个资料夹取出。取出后请将「examples」资料夹内的「example.php」档案名称改成「index.php」。

[Facebook]利用Iframe和PHP SDK实作应用

第4步 接着将刚刚改名好的「index.php」利用笔记本将档案开启,修改一下里面的资料,将其中的「appId」后面的字串改成「应用程式ID」,将「secret」后面的字串改成「应用程式密钥」,然后储存档案。

应用程式ID和应用程式金钥,可在这边找到,仍不清楚,可以参考这篇文章。

[Facebook]利用Iframe和PHP SDK实作应用

第5步 将刚刚解压缩取出的档案上传到您的主机空间,这边就不对主机空间多做说明,如果还不知道主机空间是什幺?可能您要先Goolge一下这些基本的资料啰!

[Facebook]利用Iframe和PHP SDK实作应用

第6步 将档案上传好后,来到你的应用程式管理页面,找到你的应用程式并进入编辑画面,切换到【网站】部分,请修改「Site URL」栏位,改成您程式的主目录(也就是前面修改的index.php档案之所在目录)。

假设index.php的档案是在:/public_html/myapp/examples/index.php

那Site URL的路径请填:http://你的网站网址/myapp/examples/

[Facebook]利用Iframe和PHP SDK实作应用

第7步 切换到【Facebook整合】页面,这边的「Canvas URL」也请修改成和刚刚一样的路径即可,修改完毕后请点﹝储存﹞。

别忘记,在Canvas Type要记得选成「Iframe」,否则会失败喔!

下方的Iframe大小,建议勾选「Auto-resize」(自动调整大小)。

[Facebook]利用Iframe和PHP SDK实作应用

第8步 来到您的Facebook应用程式页面,你会发现看到的是以下画面,若有看到就表示您成功啰!

】应用程式在哪边?

可以在这边,找到你的应用程式,并点击「应用程式专案页」,进入后画面左边应该有个﹝前往应用程式﹞,进入后就是了。

通常网址会是:http://apps.facebook.com/myapp/ (myapp请改成你先前订定的名称)

[Facebook]利用Iframe和PHP SDK实作应用

第9步 您可以任意点击其中的按钮,第一次使用会请您授权给这个应用程式,点击﹝同意﹞即可授权。

[Facebook]利用Iframe和PHP SDK实作应用

第10步 授权后可能会转到您的程式实际位置(也就是虚拟主机网页那边),不过这只是设定登入后导向的问题,细部导向设定大家可以自己研究看看。您可以再回到刚刚的应用程式页面,你会发现你的程式就出现在应用程式页面中啰!

因为是Iframe框入模式,所以会出现捲轴(虽然前面有改成自动调整,不过似乎有预设值在,超过还是会出现捲轴),不过这些问题别担心,可以透过JS去解决框架的大小,之后有机会会介绍一下。在这个页面中的程式就是你刚刚修改的「index.php」这档案内的东西,语法细节就不多做介绍,研究一下你就可以进一步的开发应用程式啰!

[Facebook]利用Iframe和PHP SDK实作应用



上一篇: 下一篇:
你可能还喜欢以下内容