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

http://program.luckchoco.com/2011/04/facebook-like-button.html
. Z6 R* x8 n- e) g/ J
5 b6 x) H2 o3 D很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
( \: B* [+ ^+ }: k. w本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

5 o( K: M0 e7 W7 U以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   
2.       請先按讚，才可以看到"秘密"內容唷
   1 e- ]% k/ F0 n: F
3.       <!--還沒按讚前，顯示的內容-->
   , ]( i8 v3 Z# ?) D  C/ Z
4.   </div>
   
5. 
   * D) L# K2 L) z
6. 
   ; b$ s+ x1 s% M9 {* a1 p+ V5 f
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   7 p( R4 {7 w+ N+ L! v8 X& \, r
9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
   $ R( f$ l( b4 |# p! H
10.   <fb:like href="http://program.luckchoco.com/2011/04/facebook-like-button.html" send="false" width="450" show_faces="true" font=""></fb:like>
    ) R5 W( A6 g) m) c' Y0 d$ ?  ~
11.   <!-- href裡 放入要按讚的網址-->
    2 _0 E) u$ v: Q0 P1 e
12.   <!--↑↑FB讚按鈕語法↑-->
    # H! W5 @& _9 Z+ Q- X* G7 b* H( k
13. 
      X; P4 }0 `4 X& X( u! b
14. 
    
15.   <div id="realContent" style="display:none">
    
16.        我是真正的內容
    
17.        <!--按讚後顯示的內容-->     
    
18.   </div>
    
19. </html>
    
20. <script>
    
21. function show(){
    ) a7 e) f! E- O# Z( `
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    : a  x! c: K: g2 G, w
24. 
    
25. 
    
26.        //顯示內容
    
27.       document.getElementById("realContent").style.display="";
    / @8 h' p9 m' t+ ~, D) |
28. }
    
29. function hide(){
    7 p1 b' [) @& y
30.       //顯示內容
    : o# P5 Z4 c6 v
31.       document.getElementById("pushGood").style.display="";
    ; t2 q* G7 k# Z/ [; y. d6 e1 T
32. 
    
33. 
    ' @% l$ W8 \" ^9 Z& B- q
34.       //隱藏內容
    
35.       document.getElementById("realContent").style.display="none";
    9 l( H; T! h6 y% ~
36. }
    0 U1 l/ v/ P$ R7 A# D
37. 
    
38. 
    
39. window.onload = function(){
    
40.     //初始化
    6 B6 L7 ~5 ?5 P" ~$ C! P
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    . v4 W$ g: A' I: y  \0 p$ a: t2 [
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    : Y1 v" Q7 @$ Z' N
43.    
    $ v& N  b5 J4 I; }
44.     //edge.create 按讚後，要執行什麼function，此為show()
    % `5 g. B6 E7 Z* s  t
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    + Z3 w  A+ A0 @/ K1 N2 W
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    ' Q+ m, M; d6 B9 e2 N9 y3 l1 Y  [. G
49. };
    0 F7 z# M1 M- @- U7 Q
50. </script>

Copy

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

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

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

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
     o. ?$ p9 v  F- ]% s* A! k
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>
   3 {1 J/ @+ l, a9 {: ~
8. <div id="fb-root"></div>
   
9. 
   + C! L- l& M  ?/ T& E
10. <div id="iContent" style="display:none">{1}</div>
    $ o: \: E4 S2 t- e$ c
11. <script>
    
12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}
    ' `9 @" B/ i% E2 U
13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
    5 {3 h7 ~; t" Y* \/ X$ o9 D
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

" e: g" r, [7 N