M2 討論區

Title: 需按「讚」才可觀看！FaceBook Like Button [Print]
Author: admin    Time: 2011-10-17 15:10
Title: 需按「讚」才可觀看！FaceBook Like Button
http://program.luckchoco.com/2011/04/facebook-like-button.html$ z( \4 o' ^# e. h

# C' O5 k1 ^, t7 ^  E" y9 K, \很熟悉吧！現在各大網站，尤其是論壇，都喜歡來個按「讚」後才能觀看的伎倆。% s2 B4 B. N3 ]: E0 ~1 i
本篇不用按讚，免費教你如何寫個這樣的網頁，夠給力吧！
- `; l' Z1 _: _1 a4 U
Like01.png

  {  F. g, Q, R4 T, G+ ~& R) d8 F" s; _6 v1 C% T3 Z1 s& A
以下是語法和註解，複製和修改一下就可以使用囉：
  1. <div id="pushGood">* u# v0 M* A; @4 ^7 k# D
  2.       請先按讚，才可以看到"秘密"內容唷
    4 }) |' K4 W" J- l
  3.       <!--還沒按讚前，顯示的內容-->
    0 i9 ^: ^4 ^' x9 e+ y- }. x0 ?
  4.   </div>! Z5 @$ N) R% p& T/ N
  5. , X9 M& E( A& E2 Y$ f6 L

  6. 2 \- M/ V% z/ L1 x
  7.   <!--↓↓FB讚按鈕語法↓↓-->3 o, b' m; |& R
  8.   <div id="fb-root"></div>
    # \. ]9 x% K- N- v8 Q7 y) r" B1 p
  9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>
    # E$ \! Z9 y3 c( `$ G+ a
  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 Z; z( R( `  [$ f5 v
  11.   <!-- href裡 放入要按讚的網址-->
    : K5 K; g0 J. C  B  w
  12.   <!--↑↑FB讚按鈕語法↑-->
    % p9 y4 I; I% L  G: ~6 w; f+ D
  13.   f! J# z. D( ?0 T, ~+ }
  14. # Q6 W  M* ?8 ^( p6 W  t
  15.   <div id="realContent" style="display:none">
    ' }) a6 p- ^: u. r
  16.        我是真正的內容
    3 `' W8 g) w) n9 D; ^
  17.        <!--按讚後顯示的內容-->     8 x6 B& ]1 O3 D  A" B' m) d
  18.   </div>
    - c% _5 w4 {1 f) |
  19. </html>. ^7 H  h3 U, v( Y' P" _. ^
  20. <script>
    ! d3 Y. g6 z2 i. D
  21. function show(){
      f! a& `& @+ e* `0 E" i, N
  22.        //隱藏內容
    ( D, z4 B& |: U- }3 D
  23.       document.getElementById("pushGood").style.display="none";
    + }/ x+ o) P3 G$ t/ h! e) b3 ?

  24. - ?, B9 z$ A& h

  25. 6 {0 R& B2 d' a
  26.        //顯示內容
    + z$ G6 P. B! E: `7 N: B
  27.       document.getElementById("realContent").style.display="";
    0 H& J% b2 h7 s  I
  28. }
      p3 }! T% ]- q! F, R
  29. function hide(){8 r; K7 E* f( d- N
  30.       //顯示內容
    2 m+ J! `2 m0 r  }2 Z" V5 t
  31.       document.getElementById("pushGood").style.display="";
    " F7 P* v8 h8 o- }" E9 R! c' z* v$ @

  32. 7 u2 t) \7 d' o$ S3 _( p
  33. , V$ q, `' `& O/ e
  34.       //隱藏內容" n0 k. c; _2 d- n4 k  m% w
  35.       document.getElementById("realContent").style.display="none";
    , D( n2 J- g. f
  36. }
    * l5 n: b5 h+ Q. |& \

  37. - A: t0 Z1 s1 p) P- X8 y4 p

  38. * _; P; q0 D9 F
  39. window.onload = function(){6 b. R* a3 N1 K9 g4 u6 `
  40.     //初始化
    - J% `8 y6 Z6 ^8 O' y
  41.     //appid的部份，可以放入你的應用程式appid，也可以不放, Q4 v6 O, X1 N9 f7 V6 I
  42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    ' `& T1 h1 i) J5 N
  43.    
    . Z: N" z' s! x! ~) h" u+ G6 p
  44.     //edge.create 按讚後，要執行什麼function，此為show()
    - x5 I( W( T/ ]& o  p
  45.     FB.Event.subscribe('edge.create', function(response) {show();});
    1 Y+ P4 z7 }& i0 |" N; \; c
  46.    - {0 k% V3 H8 b" `+ ?
  47.     //edge.remove 移除讚後，要執行什麼function，此為hide()' F% W5 O+ Z. T1 c1 \4 U8 `
  48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    : [' o) L. n( C- r) l
  49. };
    2 n. K  h) x2 d* h% U
  50. </script>
Copy
關於 FB.Event.subscribe ，FaceBook有說明
$ w* |5 |) e2 [  A4 o0 |3 @! a
參數執行時機
auth.login使用者登入後
auth.logout使用者登出後
auth.prompt如果使用者讚按或分享等按鈕，4 A; p' L5 o0 b/ X2 k
處於未登入的狀態，跳出登入視窗後
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訊息時

' ^; _0 W1 R# @' Z. Q7 x& Q: W; d現在網站都流行按「讚」散佈訊息，帶入流量，以行銷而言算是一個很好的手段
2 p9 t$ I, r$ t畢竟要不要按「讚」是個人的選擇
$ G# D, M9 d) O- Y, w0 }如果有隱私方面的疑慮，記得：臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...)，不要留下個人私密的資料唷！" }$ D" k! W. K5 F; d3 S4 h
Author: admin    Time: 2011-11-14 19:41
  1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>3 h7 ?; r) V) v0 X% d
  2. <div id="iError" height="200">  C/ j" F& W7 [* R: H  e( }' p
  3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
    " T. ~& r4 [6 U( F; }6 |1 V
  4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
    6 o( x- I* U, g% p

  5. : ]! V" }0 J* T$ m  U5 y) l; T
  6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>* `9 N( W# k; s7 p1 L' M
  7. </div>3 i! f+ \, n8 U: l: E5 M4 X+ q
  8. <div id="fb-root"></div>
    ' k" C! D+ L3 `1 |
  9. " }5 A3 A/ l& t3 v5 J' o
  10. <div id="iContent" style="display:none">{1}</div>
    7 Q; n- I( M" h9 o. k% ?+ A
  11. <script>9 i- d) ?( O" y( O
  12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}. G# ?8 O# i- b, T
  13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}
    : x+ G- G3 X0 {( @0 _$ e1 F
  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();});};9 e# G9 z! G+ ~$ C, d. B( Z
  15. </script>
Copy

; U. P: b9 w3 p3 _3 }( O



Welcome M2 討論區 (https://forum.m2.hk/) Powered by Discuz! X2.5