, dinamik olarak yüklenen içeriğe sahip Facebook benzeri düğmeyi tümleştirin

Question

Üzerinde çalıştığım web sitesi, AJAX aracılığıyla dinamik olarak yüklenen öğelerin bir listesini içerir. Sayfayı aşağı kaydırdıkça, daha fazla öğe yüklenir.

Artık, müşterim, Facebook gibi bir düğmeyi (ve bunu beğenen kullanıcıların sayısını) bu öğelerin her birine eklemek istiyor.

Varsayılan gibi düğmelerin birleştirilmesi sorun değil, ancak AJAX ile yüklenen öğelere benzer düğmeyi nasıl ekleyebilirim? Yeni bir öğe yüklüyse, Facebook API'sı, DOM ağacında bunun kaç kişinin beğenildiğinin sayısını alması gereken yeni bir düğme olduğunu nasıl biliyor?

Bunu nasıl yapacak tecrübesi olan var mı? Bir örnek var mı? Aramam standart gibi düğmeyi entegre etmeden kullanışlı bir şey yapmadı.

Answer 1

Bu sayfadaki gibi bir Facebook düğmesi sadece dur. Böyle bir "Facebook API" çalışması yok. Benzer sayım, 'un içeriğinin bir parçasıdır ve tarayıcı tarafından src URL'si yüklendiğinde içeriğin geri kalanıyla yüklenir.

Yani özünde, yapmanız gereken gereken tüm doğru konumda ve doğru src URL ile sayfaya yeni ekleyin

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL" 
     scrolling="no" frameborder="0" 
     style="border:none; width:450px; height:80px"></iframe> 

ve her şey yapacaktır: Böyle bir benzeri düğme için kod gider otomatik olarak sizin için ele alınacaktır.

Answer 2

Geç cevap, ancak yeni gibi düğmeler işlemek için yeni unsurlar yükleyen fonksiyonun geri aramasında Facebook API ayrıştırma işlevini kullanabilirsiniz:

FB.XFBML.parse(); 

Ayrıca etmek ayrıştırıcı yönlendirebilir istediğiniz elemanları render, bu nedenle zaten böyle mevcut düğmelerini yeniden oluşturma değil:

FB.XFBML.parse(document.getElementById('foo')); 

Bu dokümanlardan düzdür: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Answer 3

Geç geç cevap ama sadece birinin buna ihtiyacı var.

Projemi, anlatılanla hemen hemen tamamladım. Sayfam jj formatındaki ajax ile mesajlaşıyor ve facebook benzeri buton, tweet butonu, google plus one butonu gibi dom öğeleri oluşturuyor. Doğru anlayana kadar çok problemim vardı. Büyük sorun, düğmelerin tekrar tekrar beklendiği gibi çalışmadığıydı ... Sonra da çalışma çözümü buldum. Ben facebook js sdk kullanıyorum

<div id="fb-root"></div> 
<script> 
    var isFBLoaded = false; 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId: ' your api key', 
     status: true, 
     cookie: true, 
     xfbml: false 
    }); 
    isFBLoaded = true; 
    ... 
    renderFBqueue(); // i ll explain this later 
    }; 
    (function() { 
    var e = document.createElement('script'); 
    e.async = true; 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

bir sorun katiyen ajax içeriği ve FB.XFBML.parse() yöntem ya da bir şey olduğu görülmektedir (bazı yararlı bilgiler here bulabilirsiniz). fb developers forum üzerinde bir çözüm buldum ve gereksinimlerime göre değiştirdim. Bu yüzden ajax çağrısından json içeriği (çoklu mesajlar) aldıktan sonra, fb gibi düğmeler hariç tüm öğeleri jQuery ile yaratıyorum. Bu düğmeleri url (ve diğer ilgili verileri) sıraya koyarım ve bu düğmeleri oluşturmak/ayrıştırmak için zaman aşımı ile çağrı işlevi.

var fb_queue = []; 
... 
function getMorePosts(){ 
    $.get('moreposts.php', params, function(response){ 
     if (response) createPosts(response); 
    }, 'json');  
} 
... 
function createPosts(data){ 
    ... 
    for (var key in data.posts) { 
     ... 
     fb_queue.push({ id : data.posts[key].id , url : data.posts[key].url }); 
    } 
    ... // elements are created 

} 

ve sonda gelen biliyorum oluşturup

function parseFBqueue(){ 
    if(isFBLoaded){ 
     if (fb_queue.length==0) return false; 
     $.each(fb_queue, function (j, data) { 
      window.setTimeout(function() { 
       renderFBLike(fb_queue.shift()); 
      }, (j + 1) * 300); 
     }); 
    }; 
} 
function renderFBLike(data){ 
    var fblike = '<fb:like href="'+data.url+'" layout="button_count" ... ></fb:like>' 
    $('#fbdiv-'+data.id).append(fblike); 
    FB.XFBML.parse(document.getElementById('fbdiv-'+data.id'));  
} 

Umut birisi bu yararlı bulacaksınız düğmeleri gibi fb ayrıştırmak için ben bir hafta önce :)

Answer 4

çağrı ajax sonra bu javascript fonksiyonu olur tamamlandı;)

fb_sharepro_render()