Социальные иконки, не работающие с бесконечной прокруткой на Wordpress

Мы создаем сайт для клиента на работе, который можно найти здесь: http://ethercreative.net/studio_social/ Это очень простая тема Wordpress, но осложнения возникают из-за конфликтов между бесконечным плагином прокрутки и социальными значками.

Каждое сообщение предназначено для отображения блока в конце с помощью социальных иконок G +, FB и Twitter. Он предназначен для отображения ~ 4 сообщений или около того при запуске, а затем при прокрутке он предназначен для загрузки следующего набора.

Каждая из этих вещей работает, но не вместе.

Когда бесконечная прокрутка загружает следующий блок сообщений, она показывает только кнопку в facebook, а также две другие социальные иконки.

Странная вещь, однако, оставляет блоки кода:

<span class="icons">
                    <g:plusone size="medium" href="#" onclick="location.href='http://ethercreative.net/studio_social/?p=1'; return false;"></g:plusone>                <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp;
                    <a href="#" onclick="location.href='http://twitter.com/share'; return false;" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span>
</div>

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

Я использую Wordpress 3.3.1 с бесконечным плагином прокрутки (http://wordpress.org/extend/plugins/infinite-scroll/) и digg digg для социальных значков (http://wordpress.org/продлить/плагины/Digg-Digg/)

У бесконечного плагина прокрутки есть возможность добавлять события onLoad для запуска после того, как он схватил новый набор сообщений. Итак, что я должен добавить здесь?

Спасибо за любую помощь! Приятного дня.

Обновление: после нескольких исследований я также установил твиттер. Теперь остается только исправлять Google Plus. Код для твиттера:

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Обновление снова: также нашел код Google Plus:

(функция() {   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;   po.src= 'https://apis.google.com/js/plusone.js';   var s = document.getElementsByTagName('script') [0]; s.parentNode.insertBefore(po, s); })();

Что я узнал? Сделайте больше googling, прежде чем спрашивать о переполнении стека. По крайней мере, это ответ для людей с этой проблемой в будущем.

Ответы

Ответ 1

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

var el = document.body; 

//Google Plus   
if (typeof gapi !== "undefined") { gapi.plusone.go(el); }

//Facebook
if (typeof FB !== "undefined") { FB.XFBML.parse(el); }

//Twitter
if (typeof twttr !== "undefined") { twttr.widgets.load(); }

В приведенных выше случаях el должен быть контейнером, который содержит виджеты, или, возможно, просто может быть document.body(будет повторно отображать все виджеты.) Не уверен, что вы можете сузить контекст с помощью Twitter в настоящее время, но я считаю, что они планируете добавить это.

Ответ 2

Как и LocalPCGuy, вы делаете гораздо больше работы, чем необходимо для достижения этого. В идеале у вас будет часть асинхронного обратного вызова загрузки, чтобы вставлять эти кнопки только в те элементы, которые их требуют. Или, что еще лучше, добавьте их на стороне сервера (если это возможно), чтобы клиент не работал, чтобы сделать страницу готовой. По крайней мере, с вашим решением файлы script будут кэшироваться, что должно улучшить время загрузки. Проблема в том, что вы все еще делаете страницу труднее, чем нужно. Как страница бесконечных свитков и становится все больше и больше, эта дополнительная работа будет более значимой.

Идеальный поток будет примерно таким:

  • Загрузите начальную страницу
  • Выполните требуемую JS. На этом этапе убедитесь, что у вас есть функция, которая будет внедрять социальные виджеты в данный DOM node.
  • Пусть страница бесконечно прокрутки, триггера и асинхронного запроса
  • При асинхронной нагрузке обработчик асинхронной нагрузки обрабатывает ответ, а затем выполняет итерацию по DOM, которая создает передачу каждой из записей в вашу функцию создания виджетов.

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

Ответ 3

добавьте код в файлы JS...

addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');

Он отлично работает.