Intereting Posts

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

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

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

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

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

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

<span class="icons"> <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></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="http://twitter.com/share" 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/extend/plugins / 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:

(function () {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, прежде чем спрашивать о переполнении стека. По крайней мере, это ответ для людей с этой проблемой в будущем.

Решение, которое вы в основном представляете, это перезагрузка скриптов, что довольно неэффективно, поскольку вы, вероятно, загрузили их на загрузку страницы для первого набора социальных кнопок. Все 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 в настоящее время, но я считаю, что они планируют добавить что.

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

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

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

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

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

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

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