facebook - Facebookの「いいね！」ボタンはAJAXロード後に更新されます

Question

Facebookのようなボタンを実装する必要があります。URLはajaxリクエストから取得されます...つまり、ページの読み込み後に「href」属性を設定します。残念ながら、この時点でURLはすでに設定されているので、気に入った場合は実際のページURLをURLとして使用します... likeボタンを更新する方法はありますか？

Answer 1

jQuery を使用している場合、この問題に対する非常に簡単で洗練された解決策があります。

$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});

Answer 2

XFBML を使用している場合は、いいねボタンのコードをラップする必要があります。

<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>

div または span に、例えば:

<span class="fb-like">    
  <fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>
</span>

それよりも、ajax 経由で新しい URL を取得した後、既に生成されている facebook のようなウィジェットをクリアし、新しい fb:like コードに置き換える必要があります

jQuery('.fb-like').html('<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>');

そして、Facebookのいいねボタンを再度初期化する必要があるよりも

FB.XFBML.parse();

最終的なコードは次のようになります。応答に純粋な新しい URL が含まれていると仮定します

<span class="fb-like">    
  <fb:like send="true" width="450" show_faces="true"></fb:like>
</span>
<script type="text/javascript">
$.ajax({
  url: "getMeUrl.php",
  success: function(url){
    $('.fb-like').html('<fb:like href="'+url+'" send="true" width="450" show_faces="true"></fb:like>');
    FB.XFBML.parse();
  }
});
</script>

概要：

To refresh facebook like button (or any other facebook XFBML) you have to:
1) destroy existing initialized widget (clear the content of XFBML code wrapper)
2) add new XFBML code into wrapper
3) initialize new code via FB.XFBML.parse();

Answer 3

XFBML を使用している場合、URL を変更する方法がわかりません。ただし、iframe を使用している場合は、次のコード スニペットが機能するはずです。

HTML

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true" id="theiframe"></iframe>
<br />
<input id="url" />
<input id="btn" value="Change" type="button">

jQuery

$('#btn').click(function(){
    url = "";

    url += 'http://www.facebook.com/plugins/like.php?';
    url += 'href=' + $('#url').val() + '&layout=standard&';
    url += 'show_faces=true&width=450&action=like&';
    url += 'font&colorscheme=light&height=80';

    $('#theiframe').attr({'src': url});
});

Answer 4

fbml を使用している場合は、その場で要素を作成して解析できます。詳細については、この回答を参照してください。

Facebook の「いいね」ボタンを AJAX 駆動のページに追加する方法

iframe を使用している場合は、URL を最初から作成する必要はなく、iframe を更新するだけです。たとえば、ページ上のすべての iframe を更新するには:

$("iframe").each(function(){
  $(this).attr('src', $(this).attr('src'));
});