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

http://program.luckchoco.com/2011/04/facebook-like-button.html
* @2 @. ?5 M6 ]. L
2 p! P5 X  ^5 u5 P很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
0 }2 K! E# b/ F7 o$ J: h本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！
# K1 H: ^9 C) o2 M, k

以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   ' W4 r5 w, z; J
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   3 z6 D  y5 c& @4 G
4.   </div>
   
5. 
   0 m$ p" _1 k) e/ R% L
6. 
   0 u. q+ x; v; I1 _$ r) k
7.   <!--↓↓FB讚按鈕語法↓↓-->
   $ R  P, y" K0 q
8.   <div id="fb-root"></div>
   
9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
   ' g6 C# p" v7 \. }  Q" 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>
    
11.   <!-- href裡 放入要按讚的網址-->
    
12.   <!--↑↑FB讚按鈕語法↑-->
    3 L) c  ?! r- [' W# t; R
13. 
    
14. 
    
15.   <div id="realContent" style="display:none">
    ' a* g* G4 G# t( ^8 b1 b9 B5 k, ~. C
16.        我是真正的內容
    
17.        <!--按讚後顯示的內容-->     
    
18.   </div>
    ( p" z2 h' P' O. q& \; D
19. </html>
    
20. <script>
    
21. function show(){
    
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    8 g3 ~  @0 }* v7 i$ ~6 `0 O* G+ R: U
24. 
    & ~! h% ]! |' O0 g8 b) L
25. 
    9 [! {2 Q, K6 z, l
26.        //顯示內容
    
27.       document.getElementById("realContent").style.display="";
    ' W+ ?1 b) B# Q& E& `
28. }
    1 X5 u. N/ G1 f4 ?: ]$ \) \
29. function hide(){
    
30.       //顯示內容
    
31.       document.getElementById("pushGood").style.display="";
    
32. 
    ; K  c0 u5 |) s+ j8 C
33. 
    & `" u. t2 g, S
34.       //隱藏內容
    
35.       document.getElementById("realContent").style.display="none";
    3 S* D" t" M7 R# W( b) N
36. }
    / R' j$ Q* R- D% W3 Y
37. 
    
38. 
    
39. window.onload = function(){
    % n5 q7 a6 K4 Z( {) W8 X
40.     //初始化
    
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    $ I8 A& W+ d. _* G( t" Z+ v( e. i
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    
43.    
    / D# X) O, J+ r8 I; ^' F
44.     //edge.create 按讚後，要執行什麼function，此為show()
    8 `, C5 L  x* a
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    & |, n+ K: `9 ^- z, J
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    ; z% \8 z' B% z% c4 O3 J
49. };
    : b# O8 @: ]9 p1 x4 L
50. </script>

Copy

關於 FB.Event.subscribe ，FaceBook有說明
' G4 Y# y# |2 m5 h

參數	執行時機
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訊息時

& @* `( e5 f# y9 H- f: D3 d現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
畢竟要不要按「讚」是個人的選擇
2 u$ u, v" F+ T4 V+ j8 [如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
   ' Z. G* X# z% ?* q5 q( A1 q- ]
2. <div id="iError" height="200">
   / @" ^; G6 h: V8 \/ Q6 l
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   
5. 
   
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   1 W; K/ w1 Q8 B8 K: \* `
7. </div>
   
8. <div id="fb-root"></div>
   
9. 
   
10. <div id="iContent" style="display:none">{1}</div>
    , Y1 H- ^* c/ r: `3 G3 M4 n5 t
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";}
    
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();});};
    $ `- }5 A6 x4 {- b$ s# a! Z
15. </script>

Copy

! k0 G# G8 `5 M