需按「讚」才可觀看！FaceBook Like Button

http://program.luckchoco.com/2011/04/facebook-like-button.html

) O' [" _0 w) {; r- C: z很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   ) E: x- Q# G2 S) u
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   * p6 c, [( Z' Q. Q0 ^: w; k
4.   </div>
   3 V5 W9 j9 ]' R/ |
5. 
     o% G' {# i+ d
6. 
   
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   
9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
   $ ^1 y0 e2 `3 d$ A: {" t* \
10.   <fb:like href="http://program.luckchoco.com/2011/04/facebook-like-button.html" send="false" width="450" show_faces="true" font=""></fb:like>
    
11.   <!-- href裡 放入要按讚的網址-->
    $ O& V2 a) w6 u( ~. q3 X
12.   <!--↑↑FB讚按鈕語法↑-->
    1 N6 b8 @% S0 Z5 t) N
13. 
    6 S$ P) m/ Q' S, u1 a
14. 
    : I9 W- k3 I  K( c" K8 t% [0 @
15.   <div id="realContent" style="display:none">
    
16.        我是真正的內容
    1 S1 V( Y; ?0 @* O- P' S) n
17.        <!--按讚後顯示的內容-->     
    * S) T, }( Y# @: D8 E: u4 r, U
18.   </div>
    
19. </html>
    $ x2 s/ F4 |3 I* m
20. <script>
    6 F9 [0 x, L; z- Q; i3 Z7 |0 P
21. function show(){
    
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    ) f& q) O! ]# R0 o4 d# M9 F6 _
24. 
    
25. 
    
26.        //顯示內容
    ' N6 n/ k5 c6 p/ f
27.       document.getElementById("realContent").style.display="";
    $ n8 L) v9 @( C' |0 r& T. [% B: V
28. }
    
29. function hide(){
    
30.       //顯示內容
    " v. C( p) c3 n) ^
31.       document.getElementById("pushGood").style.display="";
    ! x! t$ O1 {9 X3 w
32. 
    
33. 
    
34.       //隱藏內容
    
35.       document.getElementById("realContent").style.display="none";
    
36. }
    
37. 
    * D4 W% e7 l8 X% c& T& m0 Z4 E
38. 
    
39. window.onload = function(){
    
40.     //初始化
    & @8 D' I* Z: U9 P
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    ' J" a& e) K- p9 G! ]
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    5 ~% I* _+ R, a# r2 W4 k4 G# H# K
43.    
    , J# v4 A# `- C- E5 E, w
44.     //edge.create 按讚後，要執行什麼function，此為show()
    6 H- @6 |) W+ G3 y0 V; C
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    . j/ T' P9 q3 Z8 ]* L
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    7 M0 }" o# [" [; F0 Y8 _4 E! x
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    4 k7 _! J" W* S. s; b. e' Z
49. };
    8 {! o8 m; x4 |& [; ?, r5 X8 }1 ]
50. </script>

Copy

關於 FB.Event.subscribe ，FaceBook有說明

參數	執行時機
auth.login	使用者登入後
auth.logout	使用者登出後
auth.prompt	如果使用者讚按或分享等按鈕， & }2 ?" f4 g0 ?- r$ _$ B. p  m! d$ G處於未登入的狀態，跳出登入視窗後
auth.sessionChange	當使用者的FaceBook session改變時
auth.statusChange	當使用者的FaceBook status改變時
xfbml.render	呼叫FB.XFBML.parse()，執行完後
edge.create	當使用者按「讚」後
edge.remove	當使用者移除「讚」後
comment.create	當使用者送出「評論」後
comment.remove	當使用者移除「評論」後
fb.log	處理FaceBook Log訊息時

/ b" d5 f* D* O3 R3 @1 H; x現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
" x$ Y5 \- o% S( W- n畢竟要不要按「讚」是個人的選擇
- i) z  [& q4 v) t* j- N如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！
% P& W5 k  }9 K8 N: b- I( \+ E

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   4 r7 w* r4 ^- ]
2. <div id="iError" height="200">
   
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   
5. 
   
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   
8. <div id="fb-root"></div>
   + {, X* {' h/ g2 x; R2 K0 Z
9. 
   
10. <div id="iContent" style="display:none">{1}</div>
    
11. <script>
    
12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}
    # F( q5 A& C& ?3 W5 D% m8 c
13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
    
14. window.onload = function(){FB.init({appId: '', status: true, cookie: true, xfbml: true});FB.Event.subscribe('edge.create', function(response) {show();}); FB.Event.subscribe('edge.remove', function(response) {hide();});};
    # J' _3 K3 H7 `+ r; v+ ^1 ~3 H
15. </script>

Copy