Как обновить URL-адрес кнопки Facebook/Twitter через AJAX?

Question

Итак, у меня есть одностраничное приложение, которое воспроизводит видео из нашей базы данных. Страница загружается на www.foo.com/player.php, и я использую PHP для установки параметра ID видео, чтобы иметь общий URL. Таким образом, страница загружается, URL-адрес общего доступа вставляется как в FB, так и Twitter как http://www.foo.com/player.php?id=1, а кнопки совместно используют правильный URL-адрес. Я использую стандартные реализации обеих кнопок.

Проблема заключается в том, что, когда пользователь меняет видео, ни одна кнопка не обновляет URL-адрес, он по-прежнему показывает http://www.foo.com/player.php?id=1.

Я попытался добавить это к моей функции успеха AJAX:

$(".facebook-share-button").data("href", "http://www.foo.com/player.php?id=" + data.videoID); 
$(".twitter-share-button").data("url", "http://www.foo.com/player.php?id=" + data.videoID); 

Если проверить эти данные атрибутов в консоли, они показывают правильный URL, так что я знаю, что это обновление атрибутов с тем, что я хотите, но кнопки не забирают новый URL.

Для Twitter, я нашел свое предложение, чтобы обновить кнопку с

tweet_button.render(); 

Но это не обновить свой общий URL.

Я также пробовал обновлять URL-адрес браузера с помощью history.pushstate, и он обновляется на дисплее браузера, но все же не определяется кнопками общего доступа.

Кто-нибудь нарушил эту проблему?

Answer 1

Я не уверен, как и почему, но если вы просто измените data-url и перезагрузите, это не сработает. Я попытался заменить весь html элемента на элемент привязки, а затем выполнил twttr.widgets.load(); после того, как он работал нормально.

Answer 2

Twitter и Facebook создают как iframe при рендеринге своих кнопок совместного доступа, что означает, что вы не можете напрямую их влиять. Что вам нужно сделать, это полностью перезагрузить кнопки, удалив предыдущие и заменив их новыми. Вот как я это сделать:

В вашем HTML файл, вы готовите для загрузки кнопок:

<div id="fb-root"></div> 
<script type="text/javascript"> 
    (function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)){ 
      return; 
     } 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 
<span id='fbholder'></span> 

<span id='twitterholder'></span> 

Обратите внимание, что элементы, которые будут заменены на кнопки не там. Также обратите внимание, что внешнего скрипта для Twitter нет. Мы собираемся загрузить их в функции, например:

function reloadSocialButtons() { 
    try { 
     // Twitter 
     var t = $("<a href='https://twitter.com/share' class='twitter-share-button'>"); 
     var tjs = $('<script>').attr('src', '//platform.twitter.com/widgets.js'); 
     $('#twitterholder').empty(); 
     $(t).attr('data-text', document.title); 
     $(t).attr('data-url', location.href); 
     $(t).appendTo($('#twitterholder')); 
     $(tjs).appendTo($('#twitterholder')); 

     // Facebook 
     var f = $('<div class="fb-share-button" data-layout="button">'); 
     $(f).attr('data-href', location.href); 
     $('#fbholder').empty(); 
     $(f).appendTo($('#fbholder')); 
     FB.XFBML.parse(document); 
    } catch(ex){} 
}; 

Так что же делает этот код? Для Twitter сначала создадим новую ссылку на ссылку. Это то, что отсутствовало в html. Затем мы создаем новый тег скрипта для загрузки отсутствующего js-файла. Затем мы удаляем все, что уже было в нашем теге владельца (предыдущая кнопка). Затем мы обновляем текст и URL-адрес нашей новой ссылки на ссылку share, добавляем ее к тегу владельца и добавляем скрипт к тегу владельца. Когда скрипт загружен, он автоматически ищет ссылки на щебетающие ссылки и превращает их в кнопки, генерируя новую кнопку с правильной ссылкой.

Часть Facebook в основном такая же, за исключением того, что нам не нужно перезагружать и добавлять файл сценария. Вместо этого мы просто вызываем FB.XFBML.parse(document), чтобы новая ссылка в Facebook была включена. Вы должны быть в состоянии сделать то же самое с Twitter, но, по-видимому, это непоследовательно, поэтому перезагрузка скрипта каждый раз является последовательным решением.

Теперь, когда вы хотите обновить свои общие кнопки, вы просто вызываете функцию и позволяете ей выполнять всю работу. Если вы хотите, чтобы это происходило каждый раз, когда завершается вызов ajax, например, в одностраничной среде backbone.js, вместо того, чтобы помещать его в функцию, вы можете поместить его в $(document).ajaxComplete(function() { ... });