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

http://program.luckchoco.com/2011/04/facebook-like-button.html
1 _& P: A2 i  T( j+ l9 _( ~) ~
很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！
, w1 W+ r5 z/ M8 c$ u$ p  _# `: t

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

1. <div id="pushGood">
   & Y, q* n& }9 H& i) X  ]
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   
4.   </div>
   
5. 
   $ h, s; A& s* K- L4 N1 F2 X
6. 
   
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   ) T  P2 W7 e' O% s7 b
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讚按鈕語法↑-->
    ; @! P6 e3 M6 C* t- |( P
13. 
    
14. 
    
15.   <div id="realContent" style="display:none">
    / @" a& ?6 u# z: z
16.        我是真正的內容
    
17.        <!--按讚後顯示的內容-->     
    $ u) E* p' k# @( @) x7 j, P: D
18.   </div>
    
19. </html>
    9 Z: E/ O7 B( }! W. J
20. <script>
    6 w+ P9 Z4 N- @# e+ z+ |  e! ]8 D0 C
21. function show(){
    
22.        //隱藏內容
      p" S, P. u' D" k) N! q; o
23.       document.getElementById("pushGood").style.display="none";
    
24. 
    
25. 
    
26.        //顯示內容
    , t& _, f# P6 q: V$ n6 w: k  J
27.       document.getElementById("realContent").style.display="";
    * I& x& l9 Q, s  J/ r! M9 `/ O" y
28. }
    9 M# s) V$ p. p
29. function hide(){
    
30.       //顯示內容
    $ Q0 H/ |( v/ i- M# Y
31.       document.getElementById("pushGood").style.display="";
    
32. 
    6 G$ _# r: _, u4 B* D, P$ C0 {0 ]
33. 
    + B* o2 k4 W* Y* j" R  N' g- p9 U
34.       //隱藏內容
    ) z7 e9 \+ y& @4 W5 B* p. C  r
35.       document.getElementById("realContent").style.display="none";
    
36. }
    ( X2 A7 F1 s* E$ }; _- N
37. 
    
38. 
    
39. window.onload = function(){
      v5 U- h) Q7 T) ~. d
40.     //初始化
    
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    4 }! y, d: Y- m- @; ?9 K
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    2 l0 e& b& c5 j, R$ D, p' F7 u/ I2 m# S
43.    
    " E/ ^, R) J2 y
44.     //edge.create 按讚後，要執行什麼function，此為show()
    
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    4 i- }- {0 \- Q9 q/ D! C" v+ f
49. };
    
50. </script>

Copy

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

參數	執行時機
auth.login	使用者登入後
auth.logout	使用者登出後
auth.prompt	如果使用者讚按或分享等按鈕， 1 l1 g: Y  V) i9 t( Y: j, ^處於未登入的狀態，跳出登入視窗後
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訊息時

現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
5 I. ?4 d, ~, b4 w& _7 k' v% x. A, Y2 b畢竟要不要按「讚」是個人的選擇
2 y9 Y/ ~4 y- X2 g% M如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！
, X1 d1 e2 v6 R/ g7 N+ C& y# H" a

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   
2. <div id="iError" height="200">
   $ B* r' G6 F4 ^$ A- f! |& H& o0 j
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   0 a8 m& s, [7 G0 E9 ^
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   5 b1 {+ j' N6 s' s6 k9 E' c
5. 
   
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   4 ^. ~' m) N" l2 l
8. <div id="fb-root"></div>
   9 ?" ?- E( ?5 g' w, J
9. 
   4 U5 `) ]# B! @
10. <div id="iContent" style="display:none">{1}</div>
    
11. <script>
    + N# M  F# _' V1 ?! Z- \
12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}
    
13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
    8 z  b! s  b8 i2 d6 h$ w
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