Многие общие кнопки для социальных сетей на одной странице

Question

В настоящее время я работаю над исследовательской базой данных, где они решили, что хотят иметь возможность размещать ссылки на статьи с сайта в социальных сетях (Facebook, Twitter, LinkedIn и Google+).

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

Моя проблема - следствие того, что сайт предлагает возможность показать 1000 сообщений (1K) на одной странице результатов поиска. Это означает, что когда такая страница создается, ей необходимо создать 1000 общих кнопок для каждой социальной сети (на самом деле 4000).

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

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

Как упоминалось, это проблема только с таким большим количеством сообщений, если на странице, например, отображается 100 сообщений (фактически 400 общих кнопок), она работает отлично.

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

Таким образом, мой вопрос заключается в том, знает ли кто-нибудь о том, как решить эту проблему, или если моя единственная реальная опция - создавать пользовательские кнопки общего доступа, которые не нужно создавать через javascript, предоставляемый социальными сетями ?

Следующие ссылки приводят к документации для каждой из кнопок общего доступа.

• Twitter
• Facebook
• LinkedIn
• Google+

Answer 1

Для всех этих кнопок, есть главный JS файл, который делает тяжелую работу. Так, для LinkedIn, добавьте тег сценария:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script> 

один раз на странице. И используйте приведенный ниже сценарий в качестве заполнителя для вашей связанной кнопки, если вам это нужно. (Не забудьте заменить атрибут data-url ниже в сценарии)

<script type="IN/Share" data-url="http://developer.linkedin.com/plugins/share-plugin-generator" data-counter="top"></script> 

Для Twitter аналогичным образом, ниже тег скрипт должен быть добавлен один раз на странице, как это задание, чтобы получить главный JS файл и добавьте его на страницу.

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

Приведенный ниже сценарий необходимо добавить несколько раз, когда захотите.Замените атрибут data-url своим URL-адресом, который нужно будет чирикать, когда вы нажимаете на него.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://dev.twitter.com" data-via="your_screen_name" data-lang="en">Tweet</a> 

Когда вы получите код для FB или Google Plus, как вы получите скрипт, который должен быть добавлен один раз, а затем код, который будет добавлен, где когда-либо вам нужно.

EDIT: Основываясь на ваш комментарий ниже: Сценарии, безусловно, вызывает проблемы, потому что они должны преобразовать каждую метку-заполнитель в красивый «как» кнопка. Ниже приведены несколько способов повышения производительности:

1. запустить эти сценарии только на странице загрузки (т.е. добавить основные сценарии во время загрузки)
2. с помощью setTimeout или setInterval, работа на каждые 100 заполнителей в то время (требует изменений в основных сценариях)
3. Lazy загрузить init подобных кнопок. Когда пользователь прокручивает страницу и т.п., кнопки будут отображаться на странице, затем инициализируйте кнопки (требуется изменение основных сценариев)
4. Рекомендуемый подход: Храните только один набор подобных кнопок. Когда пользователь наводится на результат поиска, добавьте этот набор кнопок в этот div и измените атрибуты, связанные с url в кнопках. Таким образом, будет показан только один набор кнопок и не потребуется время для их инициализации.