首先當然是要先建一個 APP

官網有飯粒

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

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

所以我是這樣打

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

再來先引用這個

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

再來是程式

   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=填入你粉絲頁的網址&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>    

 

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

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

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

 

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

2014/04/29 update

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

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

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

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

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

    全站熱搜

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