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

http://program.luckchoco.com/2011/04/facebook-like-button.html
* G; v0 H/ ]( y, f0 N! e
很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。
$ a6 X/ Y2 \2 v2 b/ C0 z本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！

9 q) S/ o8 y2 B" s" X以下是語法和註解，複製和修改一下就可以使用囉：

1. <div id="pushGood">
   * ^' N4 S0 m0 {6 ?, y
2.       請先按讚，才可以看到"秘密"內容唷
   
3.       <!--還沒按讚前，顯示的內容-->
   
4.   </div>
   
5. 
   / g" t% k6 H) |' G8 d
6. 
   
7.   <!--↓↓FB讚按鈕語法↓↓-->
   
8.   <div id="fb-root"></div>
   " G8 b$ C5 `. [5 w) H7 A( F$ }' P
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>
    / T  j3 B( B- W, w" z
11.   <!-- href裡 放入要按讚的網址-->
    
12.   <!--↑↑FB讚按鈕語法↑-->
    # M! P' E" k0 _
13. 
    
14. 
      L) y3 L& M4 g% V  U1 x
15.   <div id="realContent" style="display:none">
    0 s: Q+ W4 r' ~9 c% n2 m4 y# b8 r
16.        我是真正的內容
    
17.        <!--按讚後顯示的內容-->     
    - G! Q% {  p  {% O
18.   </div>
    
19. </html>
    
20. <script>
    " B3 t3 P! {7 H3 J2 ^9 z' x
21. function show(){
      \9 w( r( {( o# Q0 b
22.        //隱藏內容
    
23.       document.getElementById("pushGood").style.display="none";
    
24. 
    + U5 @" W6 }9 n
25. 
    9 D1 I; v1 g" k$ c/ A% x! O
26.        //顯示內容
    
27.       document.getElementById("realContent").style.display="";
    + K# K* h. B" h0 y5 `7 w% _- Q9 {8 C
28. }
    0 j: W, F3 v+ q1 {
29. function hide(){
    
30.       //顯示內容
    3 ^& V, \$ f) @. M2 F. ]- j% g3 N
31.       document.getElementById("pushGood").style.display="";
    
32. 
    4 _2 o& h$ J/ b) q% ~; i3 G
33. 
    ( d5 K& U4 K/ ?0 p
34.       //隱藏內容
    7 t, c& w* G# a2 X
35.       document.getElementById("realContent").style.display="none";
    ; h9 T: }% E# S  C
36. }
    / ^: L) r# A7 C) B1 _
37. 
    / `$ q" ]( n* U; A
38. 
    9 ~7 t+ A* n) y
39. window.onload = function(){
    
40.     //初始化
    
41.     //appid的部份，可以放入你的應用程式appid，也可以不放
    ; ]3 p& n8 M" S$ f! x% d: i
42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    7 M) A2 f  Z  ~: ]
43.    
    
44.     //edge.create 按讚後，要執行什麼function，此為show()
    
45.     FB.Event.subscribe('edge.create', function(response) {show();});
    
46.    
    * S* ~; E& s) f7 r6 X
47.     //edge.remove 移除讚後，要執行什麼function，此為hide()
    2 l( G$ T9 j+ [& T
48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    
49. };
    " z/ |" c. [, t
50. </script>

Copy

關於 FB.Event.subscribe ，FaceBook有說明
3 W& j$ i5 s$ S0 B

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

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

1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>
     u+ \, L1 \" E. v8 e! ]
2. <div id="iError" height="200">
   
3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
   
4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
   ( {3 R7 g# E2 X: I/ N8 o
5. 
   7 n5 C. I# f9 k
6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>
   
7. </div>
   9 u; J8 n1 c! K) }
8. <div id="fb-root"></div>
   
9. 
   
10. <div id="iContent" style="display:none">{1}</div>
    ; f. Y' W1 L7 a8 L* r
11. <script>
    
12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}
    " {4 t" k2 ?0 N
13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
      z/ S! y( d! v' S0 k
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();});};
    + m. k/ m) W/ i* z! @
15. </script>

Copy