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

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

( k6 s0 \) Z9 \: l" q很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
* `- }3 r/ J# @) [) v- I本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

9 ]! {. c* T1 ?4 O1 B
以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   7 w2 K2 s$ @' s3 i8 _3 X) i' D
2.       請先按讚，才可以看到"秘密"內容唷
   ! T8 G( A; e: D2 l% X4 V
3.       <!--還沒按讚前，顯示的內容-->
   0 u; o5 A1 q+ L8 a6 I/ v
4.   </div>
   $ k" N5 f' ]6 J' u# Q  B( n
5. 
   
6. 
   
7.   <!--↓↓FB讚按鈕語法↓↓-->
   ' w3 x0 l  P( y1 b/ n% ^
8.   <div id="fb-root"></div>
   6 l! ^- W  U2 i
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裡 放入要按讚的網址-->
    
12.   <!--↑↑FB讚按鈕語法↑-->
    + L5 I/ d! H- E6 U: N, E
13. 
    
14. 
    
15.   <div id="realContent" style="display:none">
    
16.        我是真正的內容
    
17.        <!--按讚後顯示的內容-->     
    
18.   </div>
    
19. </html>
    1 N+ m) K: a% M
20. <script>
    
21. function show(){
    
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    ) _2 ^, @8 B  Y8 h6 V- s* X- l
24. 
    , Q2 Q- F" c( ^0 _3 S7 v/ j
25. 
      ?3 C0 k" a# n6 j5 q$ F8 z0 n1 H
26.        //顯示內容
    
27.       document.getElementById("realContent").style.display="";
    4 q) w% w4 \1 q- D! p! \
28. }
    
29. function hide(){
    
30.       //顯示內容
    1 r( W0 A$ C4 l7 v7 q
31.       document.getElementById("pushGood").style.display="";
    
32. 
    
33. 
    
34.       //隱藏內容
    $ m2 O# P& [) r, |  b
35.       document.getElementById("realContent").style.display="none";
    % `! s. j/ [2 w! R) W; l$ R
36. }
    - V0 V  b# Q# U" a/ {/ V
37. 
    # S* Z2 g0 r( o; V# p
38. 
    ) R* r5 |8 P4 J# q
39. window.onload = function(){
    # k+ ~- l) b. z" x+ R% l
40.     //初始化
    9 B8 M, d, B" T/ \" s  J9 H# G4 H
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    , w+ b* z6 |0 W; G3 X8 J5 B
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    
43.    
    
44.     //edge.create 按讚後，要執行什麼function，此為show()
    2 X5 ]# d2 Z" [
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    % _' u* F9 D+ o0 U
46.    
    
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    3 }0 Z4 s6 A* ~' E- y& i0 |3 P
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    & x/ X1 R2 k( v; `6 E5 _$ J1 v
49. };
    ; ~) K7 P5 H  r' n9 O
50. </script>

Copy

關於 FB.Event.subscribe ，FaceBook有說明
) S! B1 I! }5 \/ k1 a  `* q& {" t

參數	執行時機
auth.login	使用者登入後
auth.logout	使用者登出後
auth.prompt	如果使用者讚按或分享等按鈕， ' K% E7 W7 x+ R& ~0 Y. C處於未登入的狀態，跳出登入視窗後
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訊息時

現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
& D- U2 j7 e9 N# I+ ?7 i畢竟要不要按「讚」是個人的選擇
# y# p6 {3 P: ~0 R如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！
, |+ R& g  J- @3 K

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   
2. <div id="iError" height="200">
   1 N0 N# a; h$ ^4 D/ P9 g
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   . n$ ?" p2 P2 v9 C6 P3 X
5. 
   7 {: B0 C3 j' w$ u
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   
8. <div id="fb-root"></div>
   " T1 B+ J; o7 ~' D  r
9. 
   
10. <div id="iContent" style="display:none">{1}</div>
    / A- B6 _4 V3 |3 ]
11. <script>
    1 X" f/ s9 V# T
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";}
    ( ?8 U  `+ Z2 @+ _' T5 B
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

- M# P$ v( O0 @; ~