Интегрировать facebook как кнопку с динамически загружаемым контентом

Веб-сайт, над которым я работаю, состоит из списка элементов, динамически загружаемых через AJAX. Когда вы прокрутите страницу вниз, загрузится больше предметов.

Теперь мой клиент хочет добавить кнопку "Facebook" (и количество людей, которым это понравилось) каждому из этих предметов.

Интеграция кнопки по умолчанию, как и кнопка, не проблема, но как добавить такую кнопку в элементы, загруженные через AJAX? Если загружен новый элемент, как API Facebook знает, что в дереве DOM есть новая подобная кнопка, для которой ему нужно подсчитать количество понравившихся вам людей?

Есть ли у кого-нибудь опыт в том, как это сделать? Есть ли доступный пример? В моем поиске не было ничего полезного, кроме интеграции стандартной кнопки.

Ответ 1

Поздний ответ, но вы можете использовать функцию синтаксиса API Facebook в обратном вызове своей функции, которая загружает новые элементы для отображения новых похожих кнопок:

FB.XFBML.parse();

Вы также можете направлять парсер на элементы, которые вы хотите отобразить, поэтому он не повторно отображает уже существующие кнопки:

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

Это прямо из документов: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Ответ 2

Поздний поздний ответ, но на всякий случай кому-то это нужно.

Только что закончил мой проект почти так же, как и описанный. Моя страница получает сообщения через ajax в формате json, и я чем создаю элементы dom, включая кнопку facebook, например кнопку, кнопку твит и google плюс одну кнопку. У меня было много проблем, пока я не понял это правильно. Основная проблема заключалась в том, что, например, кнопки не работали так, как ожидалось, снова и снова... После того, как я нашел рабочее решение.

Я использую facebook js sdk (вы можете найти полезную информацию здесь)

<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>

Кажется, что есть проблема с содержимым ajax и метод FB.XFBML.parse() или что-то в этом роде. Я нашел решение на форуме fb developer и изменил его в соответствии с моими потребностями. Поэтому после того, как я получаю json-контент (несколько сообщений) от вызова ajax, я создаю все элементы с jquery, кроме fb, как кнопки. Я помещаю URL-адрес (и некоторые другие связанные данные) в очередь и вызываю функцию с таймаутом для создания/анализа этих кнопок.

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

}

и окончательно создать и разделить fb как кнопки

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'));    
}

Надеюсь, что кто-то найдет это полезным, я знаю, что я бы неделю назад:)

Ответ 3

Кнопка Facebook, как только <iframe> на странице. В этом нет никакого "API Facebook". Подобный счет является частью содержимого внутри <iframe> и загружается с остальным содержимым, когда браузер src загружается браузером. Код для подобной кнопки выглядит следующим образом:

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

Итак, по существу, все, что вам нужно сделать, это добавить новый <iframe> на страницу в правильном месте и с правильным URL src, и все остальное будет обрабатываться автоматически для вас.

Ответ 4

вызвать эту функцию javascript после завершения ajax;)

fb_sharepro_render()