Facebook Fan Page 粉絲頁加入 FBML 請先讚好再觀看

Zeuxis  2010-12-12  Notes / Other
  1. 先到粉絲頁/專頁中的應用程式頁面增加 FBML 的應用程式
  2. 再次進入粉絲頁/專頁的應用程式頁面選擇剛增加的應用程式,並按下編輯(進入)
  3. 將以下的任何一個代碼複製貼上到 FBML 的編輯框中

簡單的讚好:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
#wrapper { width:520px; margin:0 auto; border:0; padding:0; position:relative; }
#non-fans { width:520px; position:absolute; top:0; left:0; }
</style>
<img src="http://example.com/step1.jpg" alt="請先讚好" />
<div id="wrapper">
    <fb:visible-to-connection>
        <img src="http://example.com/step2.jpg" alt="多謝你的讚好" />
        <fb:else></fb:else>
    </fb:visible-to-connection>
</div>

比較複雜的 (點擊後出現 Dialog,之後會在內 include iframe,同時會再自動發佈資料到用戶 Wall):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
#wrapper { width:520px; margin:0 auto; border:0; padding:0; position:relative; }
#non-fans { width:520px; position:absolute; top:0; left:0; }
</style>

<img src="http://example.com/step1.jpg" alt="請先讚好" />
<div id="wrapper">
    <fb:visible-to-connection>
        <script>
        function loadf() {
            ajax = new Ajax();
            ajax.responseType = Ajax.FBML;
            ajax.requireLogin = false;
            ajax.ondone = function(data) {
            var obj = new Dialog();
                obj.setStyle('width', '500px');
                obj.setStyle('height', '200px');
                obj.showMessage('This is a test', data, 'Close');
            };
            ajax.post('http://example.com/fb/redirect.php', {
                url:'http://example.com/fb/event.htm',
                width:'500px',
                height:'200px'
            });
	}
	</script>
	<div id="f">
            <a href="#" onClick="loadf()">
                <img src="http://example.com/step2.jpg" alt="多謝你的讚好" />
            </a>
        </div>
    <fb:else></fb:else>
    </fb:visible-to-connection>
</div>

redirect.php

1
<fb:iframe src="<?php echo $_POST['url']; ?>" width="300" height="300" />

event.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<form name="form1" id="form1" action="http://example.com/fb/submit-detail.php" method="post" >
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="20%">* 姓名:</td>
        <td width="80%"><input name="name" type="text" id="name"></td>
    </tr>
    <tr>
        <td>* Email 地址:</td>
        <td><input name="email" type="text" id="email" size="30"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="button" name="submit" value="登記" onclick="return submit_click();"></td>
    </tr>
    </table>
</form>
<div id="fb-root"></div>
<script type="text/javascript" src="facebook_init.js"></script>
<script type="text/javascript" src="event_init.js"></script>
</body>
</html>

facebook_init.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
window.fbAsyncInit=function(){
    FB.init({appId:'138011272919493',status:true,cookie:true,xfbml:true})
};
(function(){
    var e=document.createElement('script');
    e.type='text/javascript';
    e.src=document.location.protocol+'//connect.facebook.net/zh_HK/all.js';
    e.async=true;document.getElementById('fb-root').appendChild(e)
}());

function publish_action(){
    FB.login(function(response){
        if(response.session){
            if(response.perms){
                auto_publish();
                return false
            }else{
                alert('請授權!');
                return submit_click()
            }
        }else{
            alert('請登入!');
            return submit_click()
        }
    },{
        perms:'email,status_update,publish_stream,read_stream,offline_access,user_likes'
    });
    return false
}

function ap(data){
    var options=new Object();
    if(data['msg'] != '') options['message'] = data['msg'];
    if(data['link'] != '') options['link'] = data['link'];
    if(data['logo'] != '' )options['picture'] = data['logo'];
    if(data['name_of_link'] != '') options['name'] = data['name_of_link'];
    if(data['title'] != '') options['caption'] = data['title'];
    if(data['video_link'] !='' )options['source'] = data['video_link'];
    if(data['link_description'] !='' ) options['description'] = data['link_description'];
    if(data['extra_link_text'] !='' && data['extra_link'] != '') options['actions'] = { name: data['extra_link_text'], link: data['extra_link'] };
    if(data['show_to'] !='' ) options['privacy'] = { value: data['show_to'] };
    
    FB.api('/me/feed', 'post', options, callbackfunc);
}

event_init.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function auto_publish(){ 
    var options = {};
    options.msg = '現即參加某某的抽獎,成為他的粉絲/讚好,則可有機會得獎!';
    options.link = 'http://www.facebook.com/pages/[123-456-789]';
    options.logo = 'http://example.com/fb/logo.gif';
    options.extra_link_text = '我又抽';
    options.extra_link = 'http://www.facebook.com/pages/[123-456-789]';
    options.show_to = 'ALL_FRIENDS'; // 顯示給 EVERYONE, CUSTOM, ALL_FRIENDS, NETWORKS_FRIENDS, FRIENDS_OF_FRIENDS, SELF, or NO_FRIENDS.
    options.name_of_link = '免費送出大獎，觀賞你好嗎';
    options.title = '夠人就送你大獎';
    options.video_link = '';
    options.link_description = '數量有限，送完即止！';
    
    return ap(options);
};

function callback_func(response) {
    if(!response || response.error) {
        alert(response.error.message);return false;
    }else{
        document.getElementById('form1').submit();return true;
    }
}

function submit_click() {
    return publish_action();
}
© Copyright 2007 - 2023 by Zeuxis Lo.