Facebook APP 判斷有無加入粉絲團 (Javascript SDK) @ 小雕雕的家

首先當然是要先建一個 APP

官網有飯粒

https://developers.facebook.com/docs/appsonfacebook/tutorial/

然後記得 Canvas URL結尾一定要是 / or ?

所以我是這樣打

http://localhost:2600/FBTest/default.aspx?

再來先引用這個

再來是程式

   FB.init({
      appId: '輸入你的 App ID', // App ID
      //channelURL: '....................', // 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
   });

   //2014/1/3 review
   //FB.Canvas.setAutoResize 似乎已無法使用
   //
   //FB.Canvas.setAutoResize(false);
   //請使用 
   //FB.Canvas.setSize({ height: 1000, width: 760 });
   //or
   //請改用 FB.Canvas.setAutoGrow 試試
   //https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
   //FB.Canvas.setAutoGrow();
   FB.Canvas.setSize({ height: 200, width: 200 });

    $(document).ready(function () {    //<--- 請自己引用 jquery
        FB.getLoginStatus(function (response) {
            if (response.status === 'connected')
                is_fan();
        });
    });

    function is_fan() {
        FB.api(
		  {
		     method: 'pages.isFan',
		     page_id: '這邊輸入你粉絲頁的page id' // 這邊也害我找id找好久

		   },
		   function (response) {
		      if (response) {
			    $("#div_fan").hide();
		       } else {
			    $("#div_fan").show();
			    setTimeout("is_fan()", 1000);
		       }
	       }
        );
    }

然後加上以下的html 如果沒按過讚的話就會跳出來給他按讚

<div style="width:760px; height:660px;background:rgba(0,0,0,0.6);display:none;z-index:999;position:absolute;top:0px;left:0px;" id="div_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=填入你粉絲頁的網址&width=349&colorscheme=light&show_faces=true&stream=false&header=false&height=259" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 360px; height: 259px;" allowTransparency="true"></iframe></div>
</div>
</div>
</div>

如果要範例可以看之前寫過的

https://apps.facebook.com/scolorappx/

檢視裡面的原始檔就可以了喔 (請在https下觀看，http的我沒改可能沒法run)

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

2014/04/29 update

此篇用的 method: 'pages.isFan' 經反應似乎有點不穩定

大家可以改用 FQL 來寫，如下面的文章介紹

Facebook APP 判斷有無加入粉絲團 - 使用FQL

寫法大同小異，但是問題更少了一些

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