** 老文新貼 **

這篇其實是 2011年我在公司做部門分享時寫的

用的也是我在公司寫的專案,剛剛試用了一下還可以玩耶!

( code 寫得很爛請別在意,精神有到就好 = =)

因為 FB 改了 n 版了

如果在發佈塗鴉牆有遇到 API Error Code: 191 的可以參考一下這篇

http://stackoverflow.com/questions/15858662/facebook-canvas-redirect-uri-is-not-owned-by-the-application

 

這篇裡面講了如何用javascript sdk 開發 facebook APP

包含取得facebook 登入授權與要求權限的範圍,還有發佈至塗鴉牆

要看在APP內發佈到塗鴉牆直接點這裡,要看判斷加入粉絲團看這裡

要看開發APP流程就繼續看下去

首先我先把會用到的說明文件連結貼上去 (文章裡面搬上來而已)

SDK 載入方式

https://developers.facebook.com/docs/reference/javascript/

授權

http://developers.facebook.com/docs/authentication/

FB.login

https://developers.facebook.com/docs/reference/javascript/FB.login/

登入後可以取得授權資料的 Permissions

https://developers.facebook.com/docs/reference/login/

印象中預設可以取得使用者uid、email、生日....等資料

但改了那麼多次版不知道現在變怎樣,但反正你要要求什麼權限看文件打上去就對了

但也不要全打上去,權限要求太多user 看到只會覺得你在詐騙

FB.getLoginStatus

http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

FB.api

http://developers.facebook.com/docs/reference/javascript/FB.api/

FB.ui

http://developers.facebook.com/docs/reference/javascript/FB.ui/

 

以下開始

=============================================

此文件簡略說明Facebook APP 開發的方式

由於 FBML 將於2012 / 6 停止使用,因此這邊介紹的方式是使用 Javascript SDK

http://developers.facebook.com/docs/reference/javascript/

 

一、首先到此新增一個 APP https://developers.facebook.com/apps

其中

  1. 應用程式顯示名稱 : User 看的到的,就是你APP的名字
  2. 應用程式名稱空間 : 就是你APP網址後面的名稱

ex: http://apps.facebook.com/scolorappx/  scolorappx

 Clipboard01  

 

勾選我同意後按繼續

 

然後拉到下方,選擇Facebook 上的APP,然後輸入你的程式位址(請注意https的環境也要考慮進去)

測試階段這邊可以先用 localhost 測試

 Clipboard01  

完成品在這

http://apps.facebook.com/scolorappx/

 

然後底下是程式

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!—要引用這個才能寫 FBML 雖然此例是沒在用 FBML -->

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:fb="http://www.facebook.com/2008/fbml"

xmlns:og="http://opengraph.org/schema/">

<head runat="server">

    <title></title>

    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>    

</head>

<body>

    <form id="form1" runat="server">

    <div id="fb-root"></div>  <!--- 這個一定要加,加了才能用 Javascript SDK or FBML  -->

 

    <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

        <td><img src="fifi/FIFI2.jpg" width="720" height="650" border="0" usemap="#Map" /></td>

      </tr>

    </table>

 

    <map name="Map" id="Map">

      <area shape="rect" coords="554,157,710,208" href="Question.aspx" />

    </map>

<!-- 加了這行才能用 Javascript SDK -->

<script language="javascript" type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>

<script type="text/javascript" >

   FB.init({

      appId: '294448433900314', // App ID

      channelURL: '//www.suncolor.com.tw/channel.html', // Channel File

      status: true, // check login status

      cookie: true, // enable cookies to allow the server to access the session

      oauth: false, // enable OAuth 2.0

      xfbml: true  // parse XFBML

   });

   FB.Canvas.setAutoResize(true);

   FB.Canvas.setSize({ height: 750, width: 740 });

 

   $(document).ready(function () {

           fb_init();

   });

 

    // fb_init

    function fb_init() {

 

        FB.getLoginStatus(function (response) {

            if (response.session){

               is_fan();                    

            } else {                      

               window.open('https://www.facebook.com/dialog/oauth?client_id=294448433900314&redirect_uri=http://apps.facebook.com/scolorappx/&scope=email,read_stream','_top');

            }

        });

    }

 

    // is_fan 判斷加入粉絲團

    function is_fan() {

        FB.api(

                        {

                            method: 'pages.isFan',

                            page_id: '113926358659722'

                        },

                        function (response) {

                            if (response) {

                                $("#be_fan").hide();

                            } else {

                                $("#be_fan").show();

                                setTimeout("is_fan()", 1000);

                            }

                        });

    }     

</script>

 

 

<!-- 請先加入粉絲團 -->

        <div style="width:760px; height:660px; background-image:url(images/transbg.png);background:rgba(0,0,0,0.6);display:none;z-index:999;position:absolute;top:0px;left:0px;" id="be_fan">

               <div style="width: 351px; height: 285px; margin-left: 205px; background: #fff; margin-top: 150px; border: #333 2px solid; padding-top:5px;">

                        <div style="width: 349px; margin-left: 0px; font-size: 14px; font-weight: bold; color: #333;">

                                請先加入粉絲團:

                                <div id="like_box" style="margin-top: 5px;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/suncolorbooks&amp;width=349&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=259" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 360px; height: 259px;" allowTransparency="true"></iframe></div>

                        </div>

                </div>

        </div>    

    </form>

</body>

</html>

 

SDK 載入方式

https://developers.facebook.com/docs/reference/javascript/

授權

http://developers.facebook.com/docs/authentication/

FB.getLoginStatus

http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

FB.api

http://developers.facebook.com/docs/reference/javascript/FB.api/

 

 

發布到塗鴉牆 sample

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="End.aspx.vb" Inherits="Suncolor_Act20111027_End" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml"

        xmlns:fb="http://www.facebook.com/2008/fbml"

        xmlns:og="http://opengraph.org/schema/">

<head id="Head1" runat="server">

    <title></title>

    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>    

</head>

<body>

    <form id="form1" runat="server">

        <div id="fb-root"></div>

    <div>

        <table width="650" border="0" cellpadding="0" cellspacing="0">

          <tr>

            <td><img src="fifi/fifi-title2.jpg" width="720" height="149" border="0" usemap="#Map" /></td>

          </tr>

        </table>

 

        <map name="Map" id="Map">

          <area shape="rect" coords="432,111,505,140" href="http://www.facebook.com/suncolorbooks" />

          <area shape="rect" coords="359,111,433,140" href="http://www.suncolor.com.tw/index_book_c1_01_data.aspx?bokno=015503005" />

          <area shape="rect" coords="286,111,359,140" href="Default.aspx" />

        </map>

    <table width="720px" cellpadding="5px" valign="top"><tr>

    <td style="font-size:10pt;line-height:20px">

        <asp:Literal ID="Pic" runat="server"></asp:Literal></td>

   

    <td style="font-size:10pt;line-height:20px" valign="top">

        <asp:Literal ID="Content" runat="server"></asp:Literal>

        <br /><br /><a href="javascript:{void(0)}" onclick="ShowFeed()">發佈到塗鴉牆</a>  

 

     </td></tr></table>

    </div>

    <input type="hidden" id="des" runat="server" />

    <input type="hidden" id="title" runat="server" />

    <input type="hidden" id="CImg" runat="server" />

<script language="javascript" type="text/javascript" src="http://connect.facebook.net/zh_TW/all.js"></script>

<script type="text/javascript" >

    FB.init({

        appId: '294448433900314', // App ID

        status: true, // check login status

        cookie: true, // enable cookies to allow the server to access the session

        oauth: true, // enable OAuth 2.0

        xfbml: true  // parse XFBML

    });

    FB.Canvas.setAutoResize(false);

    FB.Canvas.setSize({ height: 750, width: 760 });

 

    $(document).ready(function () {

        FB.getLoginStatus(function (response) {

            if (response.session) {

               //登入成功

                         } else {

                                //FB.login(function (response) {

                                //      if (response.session) {

                                //              var access_token = response.session.access_token;

                                //      } else {

                     

                                //      }

                                //});

                         }

             is_fan();

                         ShowFeed();  

        });

    });

 

    // is_fan

    function is_fan() {

        FB.api(

                        {

                            method: 'pages.isFan',

                            page_id: '113926358659722'

                        },

                        function (response) {

                            if (response) {

                                $("#be_fan").hide();

                            } else {

                                $("#be_fan").show();

                                setTimeout("is_fan()", 1000);

                            }

                        });

    }     

 

    function ShowFeed() {

        FB.ui(

          {

              method: 'feed',

              name: $("#title").val(),

              link: 'http://apps.facebook.com/scolorappx/',

              picture: $("#CImg").val(),

              caption: 'Fifi Lapin',

              description: $("#des").val()

          },

          function (response) {

              if (response && response.post_id) {

                 //

              } else {

                 //

              }

          }

       );

    }

</script>

    </form>

 

</body>

</html>

 

 

FB.ui

http://developers.facebook.com/docs/reference/javascript/FB.ui/

 

 

結果長這樣

 Clipboard01  

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()