1

Facebook の Open Graph (具体的には「いいね」ボタン) を使用したランディング ページが必要であり、基本的にコンテンツを display:none に設定したいと考えていました (ユーザーがページを気に入るまで具体的な内容を思い出せません。例としては、ユーザーがそのページを気に入ると、div が display:block に設定され、ユーザーはクーポン コードを割引と引き換えることができる e コマース ストアの div。

div 表示でこれを実行できるようにしたいと考えています。

Facebook 開発者フォーラムで、この小さなコード スニペットを見ました。

| | ( http://fbrell.com/xfbml/fb:likeから取得) (注: 「いいね」をクリックすると発生するイベント)

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    Log.info('You liked ' + href, widget);
  });
</script>

これを変更して、div を display:none から display:block に効果的に設定できますか?

ありがとうございます。

4

4 に答える 4

2

次の解決策を見つけましたが、それには jQuery が必要です。（おそらくそうではありませんが、それは私が以前に行っていたことです）。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="facebook.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>

</head>

<body>
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
 FB.init({appId: '133387220039676', status: true, cookie: true, xfbml: true});
 FB.Event.subscribe('edge.create', function(href, widget) {
 // Do something, e.g. track the click on the "Like" button here
    $('#slidingDiv').show();
 });
};
(function() {
 var e = document.createElement('script');
 e.type = 'text/javascript';
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
//-->
</script>
<fb:like href="http://www.facebook.com/TheRightMind" layout="standard" show-faces="false" width="450" action="like" colorscheme="light"></fb:like>

<div id="slidingDiv" style="display:none;">
Fill this space with really interesting content that you can
</div>

</body>
</html>
于 2010-10-21T09:20:13.577 に答える
2

特に div を に更新したい場合はdisplay:block、... を使用します。

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    $('#divid').css('display','block');
  });
</script>

1つの注意事項...

edge.create呼び出しの一部として使用する URL が、これを起動しようとしている URL とまったく同じでない限り、イベントは起動しません。

私はexample.com（ライブサーバー）のリンクを参照するexample.DEV（私のローカルラップトップ開発環境）で実行していたサイトを持っていました。ライブサーバー。FB.Event.subscribe()

これまでのところ機能していない場合は、問題が発生している可能性があります。

于 2010-07-03T04:51:36.613 に答える
0

Log.info()呼び出しを、を表示するJavaScriptに置き換えるだけdivです。jQueryの場合：

<script>
  // this will fire when any of the like widgets are "liked" by the user
  FB.Event.subscribe('edge.create', function(href, widget) {
    $('#yourdiv').show();
  });
</script>
于 2010-05-24T22:10:03.553 に答える
0

ページを気に入るとそのコードがトリガーされることを確認した後 (試してください)、次のコードを使用しconsole.log("AOK!")て表示させることができます。<div>

単純な古い JavaScript:

FB.Event.subscribe('edge.create', function(href, widget) {
  document.getElementById("topsecret").style.display = "block";
});

HTML:

<div id="topsecret" style="display:none;">
  Content Goes Here
</div>

jQuery ライブラリなどを使用している場合は、show()代わりに関数を使用してボックスを表示できます。

FB.Event.subscribe('edge.create', function(href, widget) {
  $("#topsecret").show();
  //$("#topsecret").slideDown("fast");
  //$("#topsecret").fadeIn("fast");
});

代わりに AJAX ロード コマンドの使用を検討することもできます。そうしないと、コンテンツが非表示になっているだけのときにボックスを表示するのがかなり簡単になるからです。

FB.Event.subscribe('edge.create', function(href, widget) {
  $("#topsecret").load("mycontent.html");
});
于 2013-04-11T16:22:54.933 に答える