設為首頁收藏本站

個人Points:5260   Rank: 9Rank: 9Rank: 9  管理員

文章日期:2011-10-17 15:10:15


http://program.luckchoco.com/2011/04/facebook-like-button.html
! y6 H2 u1 y0 o! V0 w1 J5 W; n
7 q% D5 R# p0 Y很熟悉吧!現在各大網站,尤其是論壇,都喜歡來個按「讚」後才能觀看的伎倆。* s9 h2 ^) e+ Z2 k
本篇不用按讚,免費教你如何寫個這樣的網頁,夠給力吧!9 n6 @2 w4 y6 S, o4 I
6 Z. `- Q7 @% o& f- h8 }

1 U) o* L( G. b2 S# l以下是語法和註解,複製和修改一下就可以使用囉:
  1. <div id="pushGood">
    % x5 M, H" m) n/ S) a5 F" {8 n
  2.       請先按讚,才可以看到"秘密"內容唷
    0 l2 Z: j# ?  k( T! r  J. h4 c5 J
  3.       <!--還沒按讚前,顯示的內容-->' ?2 t2 r& m. B- Q! n. z0 w0 j# M
  4.   </div>
    2 J; ^- M* c* K8 h  f- o
  5. & |3 Y1 v9 o% K# m- U0 a

  6. ! f' d- Q) H" _& n! |5 E0 P
  7.   <!--↓↓FB讚按鈕語法↓↓-->
    . e1 d) [' c7 U8 l5 ]
  8.   <div id="fb-root"></div>8 m- B9 g5 ?2 Z0 @% w
  9.   <script src="http://connect.facebook.net/zh_TW/all.js#appId=&amp;xfbml=1"></script>. E1 e; \) s3 t3 a3 V( T2 O# ^
  10.   <fb:like href="http://program.luckchoco.com/2011/04/facebook-like-button.html" send="false" width="450" show_faces="true" font=""></fb:like>% e5 `/ Z( {8 F: X+ `, b
  11.   <!-- href裡 放入要按讚的網址-->
    ; U& g( l8 |- u' |
  12.   <!--↑↑FB讚按鈕語法↑-->
    2 _( Y- a( w( f) t, {. X0 p
  13. % E( j1 [( X' \

  14. ' Y' a6 f2 ?' e# i5 B) r
  15.   <div id="realContent" style="display:none">
    6 p- G0 S7 Q4 x) m0 p/ z
  16.        我是真正的內容
    0 N9 s6 c+ U. J" U4 D' r+ `( m
  17.        <!--按讚後顯示的內容-->     , c8 g" U( n, c9 \2 n7 {+ S
  18.   </div>+ {# Y- G3 U2 y/ Y& m0 ]9 B+ g5 P
  19. </html>. \* z$ u4 a$ d" \: A! }
  20. <script>8 U! c/ J5 P* F! |1 i4 G4 \
  21. function show(){
    " i. C$ Z' {/ O4 ^- R  l
  22.        //隱藏內容
    3 [/ h# n4 ], ?; ?$ y
  23.       document.getElementById("pushGood").style.display="none";1 c5 ^2 Q8 I9 q% b  h

  24. 6 x; Y) N. T( D  Y2 H$ }$ H

  25. 3 z/ t  L( A. Y3 [2 L. i
  26.        //顯示內容, V; x9 y8 B* h" u% Z% v( Z; o
  27.       document.getElementById("realContent").style.display="";
    ( q: ]8 u  k8 S  }! m% a
  28. }$ E+ y! W- N8 N5 ]8 Y# }0 N6 P
  29. function hide(){
    / g$ O- ~; m* e4 k# P
  30.       //顯示內容
    8 \4 b# X: j4 U# f: A7 J) j  U: z
  31.       document.getElementById("pushGood").style.display="";
    + ]$ ?! J. y: ]% e) Z) q

  32. . _; ?* h5 J, ?, p- k( G. g0 v
  33. 5 U& r  p( z% e7 u
  34.       //隱藏內容! }8 |+ d* b; K- h* D) ^/ q# P' }( @
  35.       document.getElementById("realContent").style.display="none";
    * f9 j  L( q5 z0 W# r4 b
  36. }
    6 P! I( H: }. b5 ]3 I, b& ^- I1 |

  37. ! t& G+ u5 i' m8 t* V; C  J
  38. 8 W5 Z5 W9 P+ J+ L6 S
  39. window.onload = function(){
    " A  _6 l3 o. I4 D' z
  40.     //初始化
    5 ]" V# R/ H) ~8 u
  41.     //appid的部份,可以放入你的應用程式appid,也可以不放
      z7 ^( b; F& h+ f9 b( W: |1 Z
  42.     FB.init({appId: '', status: true, cookie: true, xfbml: true});
    ( U# D; }0 Q7 ]& E) r
  43.    2 O& s( P6 t6 `7 s" \
  44.     //edge.create 按讚後,要執行什麼function,此為show()
    $ T  M+ U5 y2 @, x; Q
  45.     FB.Event.subscribe('edge.create', function(response) {show();});3 ~( t, g2 e5 B4 H7 q+ Y/ {
  46.    
    / p$ n# l6 R# E; t4 y' L
  47.     //edge.remove 移除讚後,要執行什麼function,此為hide()
    $ y4 C) G( ^0 z( @& C
  48.     FB.Event.subscribe('edge.remove', function(response) {hide();});
    ; K* ]; @5 V0 X* M  H* \: M9 u
  49. };1 s, ~/ D1 i' k' M  C
  50. </script>
Copy
關於 FB.Event.subscribe ,FaceBook有說明4 z6 p# E0 t+ q7 ~- H0 N  C" ?  U
參數執行時機
auth.login使用者登入後
auth.logout使用者登出後
auth.prompt如果使用者讚按或分享等按鈕,: N1 x, N  g! `+ M" ?- f$ l# D
處於未登入的狀態,跳出登入視窗後
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訊息時
( T2 ]( X' w$ |/ j; O
現在網站都流行按「讚」散佈訊息,帶入流量,以行銷而言算是一個很好的手段
2 v7 ~) c/ b  D3 W- I7 }畢竟要不要按「讚」是個人的選擇# \  \& F! s, S
如果有隱私方面的疑慮,記得:臉書上不管哪裡(塗鴉牆、個人資料頁、對話訊息...),不要留下個人私密的資料唷!3 f/ p7 I: K' R7 y8 C( Z( N* Z
M2 討論區 © All Rights Reserved.

個人Points:5260   Rank: 9Rank: 9Rank: 9  管理員

文章日期:2011-11-14 19:41:06


  1. <script src="http://connect.facebook.net/zh_TW/all.js#appId=&xfbml=1"></script>2 Q, I1 W( }2 x  `5 O, G
  2. <div id="iError" height="200">
    % d8 d2 l+ s% i3 b7 S
  3. 如需觀看以下內容請先 『登入』或按 『讚好』後即可觀看。<br />
    * f, P. [0 a: F3 b% d
  4. <!--{if $_G['uid']}--><script>show();</script><!--{/if}-->
      [+ y5 r6 x" \) l0 u0 q

  5. : `$ j/ T4 D+ P
  6. <fb:like href="" send="false" show_faces="true" font=""></fb:like>- |* q3 Q$ [2 t9 q( t% G, j
  7. </div>
    , a2 ?6 I9 y6 p8 o; H6 J9 S8 ~8 [
  8. <div id="fb-root"></div>
    . {% c; a3 a- |' K$ K& ?3 J
  9.   Y& i" I8 A3 Z, w
  10. <div id="iContent" style="display:none">{1}</div>4 ?/ G& q- }% s5 p$ K3 ^
  11. <script>$ t% S, Q. Q8 f& Z7 y" |
  12. function show(){document.getElementById("iError").style.display="none";document.getElementById("iContent").style.display="";}5 b; n8 K( W  C. @% z
  13. function hide(){document.getElementById("iError").style.display="";document.getElementById("iContent").style.display="none";}+ n' |5 e6 c6 V5 L0 P6 y! {
  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();});};
    6 p7 k5 L7 B& J6 u, [, C
  15. </script>
Copy
/ q6 N3 J  l: W# K/ F
M2 討論區 © All Rights Reserved.

M2 討論區 Powered by Discuz! X2.5

GMT+8, 2024-5-12 02:44 , Processed in 0.080880 second(s), 27 queries , Gzip On.

Top