Вопрос по javascript, wordpress, php, google-plus, facebook – Социальные иконки не работают с бесконечной прокруткой на Wordpress

14

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

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

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

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

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

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

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

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

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

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

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

<code>!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");
</code>

Обновите снова: нашел код 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); })();

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

На это нет никаких ограничений. Читать FAQ"What kind of questions can I ask here?"последнее предложение в разделе: также можно задавать вопросы и отвечать на них. И прочитайтеSO blog post on this topic igor milla
Вы можете / должны поместить свои результаты поиска в качестве хорошего комментария, а затем принять его. igor milla
Мне жаль, я не совсем понимаю? Если вы имели в виду тот факт, что я добавил свой ответ в вопрос, это было связано с ограничением ответов на ваши собственные вопросы. Robin Neal
Ну вот, теперь ты старше 15 лет :) Kosta
@RobinNeal Пожалуйста, ответьте на свой вопрос :) Ja͢ck

Ваш Ответ

3   ответа
0

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

Идеальный поток будет что-то вроде:

Load the initial page Execute the required JS. In this step, make sure you have a function that will embed the social widgets in a given DOM node. Let the page infinite scroll, trigger and asynchronous request On async load, have the asynchronous load callback parse the response and then iterate over the DOM it creates passing each of the entries to your widget making function.

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

Если вы хотите быть чрезвычайно эффективным, вы можете подождать выполнения функции разбора, пока мышь не войдет в содержащий div. В основном ждите, пока пользователь не покажет свое намерение взаимодействовать с контентом. Очевидно, что вам нужно убедиться и проверить это, чтобы убедиться, что кнопки отображаются, прежде чем пользователь доберется до них, чтобы нажать на них. Для сенсорных устройств, если они поддерживаются, вам нужно решить, хотите ли вы визуализировать первым «касанием» или визуализировать при загрузке, поскольку наведение отсутствует.
0

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

Работает отлично.

7

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

Это отлично сработало для меня, и я использую плагин Jetpack Infinite Scroll на Wordpress. Для тех, кто заинтересован, просто вставьте код ответа в тег JavaScript послеwhile цикл, но все еще вloop.php файл.

Похожие вопросы