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

http://program.luckchoco.com/2011/04/facebook-like-button.html
( _$ W4 t) @2 h* B! P5 H% b
很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

& m  h9 H' {7 a  O, q* B7 j+ x
/ g7 o1 ?$ i: g3 X以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   . E& l; T2 v: q- @/ ~* Z
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   3 O7 R( F' I7 R, P( ^' m  t/ Y
4.   </div>
   / h: z9 {: v% y" D2 s
5. 
   & H! S$ K" v' ^. @! w+ U- h
6. 
   5 O% ^4 a) x% ?
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   
9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
   * @' n  {+ A" u9 Y
10.   <fb:like href="http://program.luckchoco.com/2011/04/facebook-like-button.html" send="false" width="450" show_faces="true" font=""></fb:like>
    5 c7 ~+ s' A, q2 z( [8 A, g) \$ n
11.   <!-- href裡 放入要按讚的網址-->
    1 r) M" n) A! E4 K
12.   <!--↑↑FB讚按鈕語法↑-->
    
13. 
    
14. 
    
15.   <div id="realContent" style="display:none">
    $ h) Q, J0 O  T9 ^! v7 V& ]& w$ @
16.        我是真正的內容
    7 U1 V" ]" S8 z# l% H
17.        <!--按讚後顯示的內容-->     
    
18.   </div>
    * U/ Q3 D9 q1 y" A+ w: u8 s# W
19. </html>
    2 x8 m# n' b: ?; q3 O; k: _0 d) U
20. <script>
    ( x$ F" e- E7 s9 A: [8 Q5 \2 T
21. function show(){
    ; e/ Z: }8 f4 d2 e% V' Q8 C' l
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    / H" i4 K' {  E- W5 @: V" y
24. 
    
25. 
    
26.        //顯示內容
    ; {) W$ H$ A8 h0 _, [5 S
27.       document.getElementById("realContent").style.display="";
    
28. }
    , h7 E) A2 o, i6 \) f1 y/ u
29. function hide(){
    
30.       //顯示內容
    
31.       document.getElementById("pushGood").style.display="";
    
32. 
    
33. 
    - a. e/ |4 E8 |5 _& I8 Z) r6 T
34.       //隱藏內容
    + Q" y6 h+ {  I2 j8 w% e9 M; Z# g' V
35.       document.getElementById("realContent").style.display="none";
    
36. }
    % I2 u. j7 Q6 _: S  c3 W0 A
37. 
    6 Z( m0 M! F9 t" u
38. 
    
39. window.onload = function(){
    
40.     //初始化
    ) N, i) ~! ~6 |0 Z
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    2 d, o8 Y2 g5 `& K5 ^3 |- O
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    
43.    
    
44.     //edge.create 按讚後，要執行什麼function，此為show()
    ) C0 r* E0 i+ [' t4 C
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    / D' t( J/ Q3 ]# g8 y" f
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    7 [+ M( e0 |8 y2 R% \0 j* w
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    
49. };
    
50. </script>

Copy

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

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

現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
& R* Z6 k+ y5 g$ I4 `/ R畢竟要不要按「讚」是個人的選擇
如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！
+ V& _% J9 g/ z/ `6 J( R

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   ' G- S; d; \- }& o2 I
2. <div id="iError" height="200">
   
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   , C' D% l# l' l) M8 O
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   
5. 
   
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   
8. <div id="fb-root"></div>
   % }/ L3 r- j- P+ o
9. 
   - b+ {: d1 ]. I5 |
10. <div id="iContent" style="display:none">{1}</div>
    8 J$ {! C6 L2 o7 K
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";}
    ' c$ X/ ~- l* z2 z) }3 w8 z% A
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