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

http://program.luckchoco.com/2011/04/facebook-like-button.html
$ Y" w. v0 Y% e
很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

# ?' x. A6 }6 n' {以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   ; b1 u& G7 A+ p3 k' {. j
2.       請先按讚，才可以看到"秘密"內容唷
   ) l; V3 d8 E, L2 s8 R
3.       <!--還沒按讚前，顯示的內容-->
   
4.   </div>
   ) R- W6 \9 r5 c: i; H
5. 
   6 H( E& A' T  V
6. 
   
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   7 v6 u1 y( Y1 G
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裡 放入要按讚的網址-->
    + K0 P) O, Y2 F  h. ]/ I! n
12.   <!--↑↑FB讚按鈕語法↑-->
    ( d6 X6 c; k: f1 g3 h
13. 
    
14. 
    & c- A* P3 I* w  b8 ?. i1 ^1 f$ x
15.   <div id="realContent" style="display:none">
    
16.        我是真正的內容
    7 g; Z! j; ^' d, F1 |" y
17.        <!--按讚後顯示的內容-->     
    * K% ^5 f9 @, N8 b3 R$ Y
18.   </div>
    
19. </html>
    
20. <script>
    ( f* Z! ~/ ~0 O
21. function show(){
    
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    
24. 
    " ?/ w" Z( Z  D
25. 
    ! o, W9 o2 N. f7 N* H; f4 \
26.        //顯示內容
    * l4 T' \7 }4 `  }4 g1 D
27.       document.getElementById("realContent").style.display="";
    " v0 j3 S  V$ A6 L" _
28. }
    
29. function hide(){
    # b' Y/ E. c. Y4 P4 q7 E3 d
30.       //顯示內容
    
31.       document.getElementById("pushGood").style.display="";
    5 N. x* |( ]' a0 H: J  Q8 ]. R
32. 
    
33. 
    5 ]- w' b# b/ b
34.       //隱藏內容
    
35.       document.getElementById("realContent").style.display="none";
    
36. }
    ! `+ N7 [5 W0 Z& t
37. 
    $ [. R5 a/ ]2 t; u5 X6 e' Z
38. 
    
39. window.onload = function(){
    + E: m9 _) o% i/ }4 b4 f
40.     //初始化
    
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    2 u# E  u9 c2 L+ k3 Y6 F" j
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    
43.    
    1 E1 C% V- O# h8 C/ ?, {; r% L
44.     //edge.create 按讚後，要執行什麼function，此為show()
    ( `! ]1 N! \+ d0 \& z
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    ( s7 N0 ?! W1 J' t" A
46.    
    
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    " f  a0 C; \% S
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    0 N1 H9 }% s+ G: d: c; Q
49. };
    
50. </script>

Copy

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

參數	執行時機
auth.login	使用者登入後
auth.logout	使用者登出後
auth.prompt	如果使用者讚按或分享等按鈕， $ Y2 |& t/ ^1 e3 T- q6 G; _4 R" n1 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訊息時

* M4 w$ A* v- J8 j& g現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
畢竟要不要按「讚」是個人的選擇
4 f$ m( ]7 n4 @( R+ K( F" `; h8 L9 H如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   
2. <div id="iError" height="200">
   
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   $ [4 G( x2 G: Z
5. 
   & q3 i& e; j' l8 P2 y7 H6 x4 T
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   1 u) E' P4 p/ V6 l$ y% \
7. </div>
   - F" z+ Q5 V: f2 o
8. <div id="fb-root"></div>
   
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="";}
    
13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
      T  j9 o  N9 h' [, R2 _# 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