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

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

很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

( S: r/ B% }  d3 W. s/ a- Q以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   . Z! P9 x# f1 n3 f1 w4 b. V
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   
4.   </div>
   
5. 
   
6. 
   
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   8 _8 i& Z% g+ P6 c% i! r9 J; v4 y
9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
   
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裡 放入要按讚的網址-->
    
12.   <!--↑↑FB讚按鈕語法↑-->
    ( |$ M- E6 n5 B5 L* p2 N( w/ ^( t$ |/ R
13. 
    , k( w- V1 z" d  A
14. 
    
15.   <div id="realContent" style="display:none">
    ' S( K9 K+ @; s  h
16.        我是真正的內容
    . j* Z7 q2 Z8 B( H% F! W
17.        <!--按讚後顯示的內容-->     
    ! g3 ~% ~9 _! I1 o
18.   </div>
    
19. </html>
    " d$ t% I  U+ I; \
20. <script>
    " t' n5 w! _3 z7 q
21. function show(){
    : ?5 V; ]( R) z6 f/ G0 N9 E
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    + n* [  n9 `! x# C2 j* `5 i
24. 
    
25. 
    
26.        //顯示內容
    * y0 G: _& n( o  ?) ^
27.       document.getElementById("realContent").style.display="";
    ) d9 o+ }& T$ n  u4 N
28. }
    
29. function hide(){
    
30.       //顯示內容
    3 v( K. i# b( l( _$ f0 s
31.       document.getElementById("pushGood").style.display="";
    
32. 
    ) J9 A+ B0 x9 k
33. 
    / @6 E, G& A, m  l% e
34.       //隱藏內容
    5 ^: l$ q+ V1 b: m, L
35.       document.getElementById("realContent").style.display="none";
    # Y& o( {# f7 J" `+ s0 _
36. }
    3 H* A1 w! t  t* t; A+ c# D4 V
37. 
    & K5 u6 J6 m% t# B
38. 
    
39. window.onload = function(){
    / y+ y# X* n* d0 \9 @
40.     //初始化
    4 ~1 z2 p& H6 p2 h! e
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    " D  p* I* V$ Z6 W/ Z2 J, E
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    
43.    
    
44.     //edge.create 按讚後，要執行什麼function，此為show()
    & ?" U  ^9 b/ J
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    7 ]/ M+ D7 W# i7 j
46.    
    - T; f* f: k/ Y. h
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    # q6 O2 N8 \; M) H; S
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    
49. };
    
50. </script>

Copy

關於 FB.Event.subscribe ，FaceBook有說明
$ {9 `% j3 A, q" a/ I0 D

參數	執行時機
auth.login	使用者登入後
auth.logout	使用者登出後
auth.prompt	如果使用者讚按或分享等按鈕， 6 D* z( f5 J: L6 j- m8 i1 h8 W處於未登入的狀態，跳出登入視窗後
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訊息時

- D: X) S7 x8 P) K" b) C現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
畢竟要不要按「讚」是個人的選擇
如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！
3 J8 b: U7 o* w9 a& n

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   $ ^3 _! K" ~$ ]0 ~  s
2. <div id="iError" height="200">
   
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   $ ?8 H6 t( r8 ~* z) H4 ^/ o+ o1 |
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   # [/ a% J% k% X7 T
5. 
   ) u' n( j& {( k  m1 t4 b
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   
8. <div id="fb-root"></div>
   / z2 {& l" F  Z" t$ @6 ~1 h7 m; a
9. 
   ; c  O' z- C! d5 f5 o
10. <div id="iContent" style="display:none">{1}</div>
    - m, N" Q2 q, N' D" Q5 {
11. <script>
    " e" z- G- _; X- E% R
12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}
    , P4 [/ k& J5 A
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();});};
    
15. </script>

Copy

* F( q* x; s* R