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

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

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

3 r! G7 e2 I$ G* `9 d5 K( \2 J
以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   
4.   </div>
   6 ]1 F( X0 G5 N
5. 
   & J: r2 m1 @0 F2 k( J( T3 q
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>
   6 t7 {8 W* ]1 W! t$ V3 K
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讚按鈕語法↑-->
    
13. 
    
14. 
    
15.   <div id="realContent" style="display:none">
      \) C! P4 s8 s
16.        我是真正的內容
    
17.        <!--按讚後顯示的內容-->     
    
18.   </div>
    
19. </html>
    
20. <script>
    : C/ F- |0 R9 J) Z/ s- u9 n* x
21. function show(){
    
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    - ^4 z* k" e. f; N% \! J8 r4 ?) n
24. 
    + H8 n# z' u9 D
25. 
    
26.        //顯示內容
    
27.       document.getElementById("realContent").style.display="";
    # b# [1 X! _4 ?8 v$ V
28. }
    5 e& t3 u' k& ?& Y4 R/ q
29. function hide(){
    
30.       //顯示內容
    - y# ~3 J9 \: c" ?8 D& E+ x6 W
31.       document.getElementById("pushGood").style.display="";
    
32. 
    . `) Y5 Y- H7 N0 D
33. 
    % {4 u' |9 t; b& M  }. V
34.       //隱藏內容
    5 m: X7 }# ]- J
35.       document.getElementById("realContent").style.display="none";
    0 d# L6 O  G9 X3 |  B
36. }
    
37. 
    + `, o) Y2 }4 H5 ^( e& a3 y7 l
38. 
    9 A% e& B0 X- t# ^* Z* D
39. window.onload = function(){
    # K1 K( y' j6 e4 t
40.     //初始化
    3 u1 W; A  y# b& n: v" S" T+ i
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
      e$ P. M: d6 W& J) O
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    . T: o- K! |& J: a9 T0 p
43.    
    
44.     //edge.create 按讚後，要執行什麼function，此為show()
    6 |  A, y0 g  X" z* W' v8 V: p& S, V
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    ' Z. r. Y6 k! i8 h* \' _" E6 f3 I
46.    
    0 T( J3 L- x4 S, f8 v, t7 O
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    
49. };
    
50. </script>

Copy

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

參數	執行時機
auth.login	使用者登入後
auth.logout	使用者登出後
auth.prompt	如果使用者讚按或分享等按鈕， + ]7 U3 e1 _4 ?處於未登入的狀態，跳出登入視窗後
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訊息時

現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
畢竟要不要按「讚」是個人的選擇
如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   0 ?. A% k6 |# ?1 j7 G2 W
2. <div id="iError" height="200">
   % l! V) Z* E- g% X
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   . x5 h3 H) ?; G3 ?; u3 X
5. 
   
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   $ ~9 W+ B+ O+ R% B2 e
8. <div id="fb-root"></div>
   / q& @8 ~  ^; s1 n5 H6 d" N
9. 
   
10. <div id="iContent" style="display:none">{1}</div>
    
11. <script>
    " X& O' P) J3 X/ X
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";}
    - `- _/ V9 x- l
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();});};
    + M4 j* @: r+ r5 \' ]8 w) o/ [
15. </script>

Copy

; d" B+ h1 r9 h0 k9 ]