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

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

很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
7 d* T7 ^0 b, G* A) t" G, p本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！
: s3 N/ _5 [) Z- A# d

, R6 S! S8 i0 D; ^0 E2 o8 E; b8 M. o以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   : a/ m2 c  h3 r7 c! U
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   ; u4 ?- }. p2 F" }/ f
4.   </div>
   
5. 
   . y6 S/ y- Q& O2 \
6. 
   * j8 V' E- N; i) n3 }4 V
7.   <!--↓↓FB讚按鈕語法↓↓-->
   4 i0 W6 i2 q; l0 l+ ]4 T! O$ [
8.   <div id="fb-root"></div>
   
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>
    " _7 h9 S2 r- }  v; F( F
11.   <!-- href裡 放入要按讚的網址-->
    
12.   <!--↑↑FB讚按鈕語法↑-->
    
13. 
    
14. 
    
15.   <div id="realContent" style="display:none">
    ; x  _7 h8 D3 K5 h& m( y
16.        我是真正的內容
    9 m; Z  G& X& I  Q" u
17.        <!--按讚後顯示的內容-->     
    9 Q$ B" M  \) R3 V
18.   </div>
    
19. </html>
    
20. <script>
    / `) v4 @% A/ D9 K. i3 p# I
21. function show(){
    ) z6 Y, t& D; ?! L# J( s' b
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    : h2 J4 i- O* C7 a: N, O; L  M
24. 
    
25. 
    
26.        //顯示內容
    5 L/ E8 R0 K3 d3 y( Q' Z
27.       document.getElementById("realContent").style.display="";
    5 l& n* Y) D- Q( E4 V
28. }
    + t9 p+ I" i" {) n/ K
29. function hide(){
    
30.       //顯示內容
    2 C; f8 p+ s9 B4 w/ x
31.       document.getElementById("pushGood").style.display="";
    
32. 
    
33. 
    
34.       //隱藏內容
    ) a& v* [2 p1 l& H
35.       document.getElementById("realContent").style.display="none";
    " L( z  B" V$ ?% q# K
36. }
    
37. 
    
38. 
    - X4 H7 g% W. V. A$ C8 J
39. window.onload = function(){
    9 _4 J% S' i6 `/ E
40.     //初始化
    
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    & O0 ?! l* U! X. I0 i, S5 C; l' B1 D
43.    
    , C. A  V# V$ C: |) o7 }" j5 J
44.     //edge.create 按讚後，要執行什麼function，此為show()
    
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    ( o1 z' e/ z& m; X; L4 ^
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    
49. };
    ; I( e3 ]. P4 `' L
50. </script>

Copy

關於 FB.Event.subscribe ，FaceBook有說明
7 Y: P- n/ T1 h5 [) c" m

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

現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
畢竟要不要按「讚」是個人的選擇
# _- l- ]  \, t如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！
$ Y+ E- t9 B, P" T% v' D

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   - i% p8 h( T' p
2. <div id="iError" height="200">
   7 O) \# i% |/ c0 v
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   " w* t) A7 L* _1 L( a5 E9 h' L
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   
5. 
   - r5 v. O, L4 P6 m8 i) k8 L
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   
8. <div id="fb-root"></div>
   
9. 
   ! o4 I$ ?# H% |. t) d  _- `0 a
10. <div id="iContent" style="display:none">{1}</div>
    . {5 U2 e8 U) b
11. <script>
    
12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}
    6 f) {8 _) B& x4 k% o/ f& d! q
13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
    
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