2

Facebookのようなウィジェットを使用する小さなWebアプリがあります。このページでは、クエリ文字列を使用してコンテンツを動的にロードします。Facebookウィジェットに割り当てられたhrefを、クエリ文字列に基づいて動的に決定する必要があります。ウィジェットを定義する方法の例を次に示します。

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html" send="true" width="450" show_faces="true" font="">
</fb:like>

しかし、私が本当に必要としているのは次のようなものです。

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html?y=119" send="true" width="450" show_faces="true" font="">
</fb:like>

2番目の例のhrefは？y = 119で終わりますが、最初の例はそうではないことに注意してください。私の問題は、どのquerrystringがhtmlページに渡されるかを確認するまで、ウィジェットのquerrystringとしてどの値を入れるべきかわからないことです。動的な値をhrefに挿入する方法を誰かが説明できますか？私は最初にこのような事実の後にhrefを設定しようとしました：

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like>
<script>
  var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
  document.getElementById('fbLike').setAttribute('href', url);
  console.log(document.getElementById('fbLike'));
</script>

しかし、これを行うと、ウィジェットはhrefが設定されていないと文句を言います。奇妙なことに、getElementByIdの値を出力すると、ウィジェットが正しく設定されているとは見なさず、エラーが発生しても、setAttrbibuteで設定したhrefが表示されます。何らかの理由で、ウィジェットでは事後にhrefを設定できないと思います。

編集：

また、ferniが彼の答えで説明したjQueryの例を使用してみましたが、これは機能していないようです。

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like> 
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>

スクリプトの最後にconsole.logを追加して、fblikeblockの値を出力しましたが、nullが返されたため、これが問題の一部である可能性があります。

4

1 に答える 1

3

ページにfb：likeボタンを追加してから、そのページでXFBMLプロセッサを呼び出す必要があります。したがって、次のようなものです（jQueryが使用中のライブラリであると想定しています。他のものを使用している場合は変更する必要があります）：

var url = "http://apps.facebook.com/inflatableicons/image_preview.html?y=119";
jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
FB.XFBML.parse(document.getElementById('fblikeblock'));

編集：このソリューションの潜在的な実装はこれです。

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<div id="fblikeblock"></div>
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>
于 2011-05-19T01:20:54.973 に答える