интегрировать кнопку «Мне нравится» в Facebook с динамически загружаемым контентом - PullRequest
17 голосов
/ 26 марта 2011

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

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

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

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

Ответы [ 4 ]

44 голосов
/ 06 июля 2011

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

FB.XFBML.parse();

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

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

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

5 голосов
/ 17 июля 2011

Поздно поздно, но на всякий случай.

Только что закончил мой проект, почти такой же, как описанный. Моя страница получает сообщения через 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 и изменил его в соответствии со своими потребностями. Поэтому после того, как я получаю контент 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'));    
}

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

0 голосов
/ 06 февраля 2012

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

fb_sharepro_render()
0 голосов
/ 26 марта 2011

Кнопка «Мне нравится» на Facebook - это просто <iframe> на странице. Как таковой, «Facebook API» не работает. Счетчик совпадений является частью содержимого внутри <iframe> и загружается вместе с остальным содержимым, когда URL-адрес 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> на страницу в правильном месте и с правильным src URL, и все остальное будет обработано автоматически для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...