Кнопки "Нравится" от соцсетей. Как избежать торможения страницы?

regta
На сайте с 15.04.2006
Offline
311
3038

В ряде случаев это критично и может тормозить загрузку страниц.

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

Например, есть условная страница site.ru/page

Страница полностью загружается в браузер

На странице есть ссылка(кнопка) "Добавить", открывающая всплывающее окно, невидимый слой или iframe

И только при нажатии этой ссылки - происходит загрузка скриптов от соцсетей и появляются кнопки "нравится".

Как-то так... Извиняюсь за свой "плохой английский"...

Можно ли такое реализовать и как сделать?

Может кто видел примеры реализации подобного на каких-то сайтах, киньте, плиз, ссылку...

Может я неверно мыслю и есть другие пути решения?

Буду не просто признателен за ответ, а даже признателен-плюс

спасибо

Цитируйте, плиз, историю переписки в личке. Спасибо.
hYPER-ok
На сайте с 09.10.2010
Offline
71
#1

Ну они не сильно тормозят, ставьте через share.php (вконтакте) sharer.php (facebook) кнопки свои.

B
На сайте с 25.02.2009
Offline
68
#2

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

http://socialmediaautomat.com/jquery-fbjlike-js.php

там же и для других кнопок плагины

Бесплатная CMS LitePublisher это блог, вики, тикет система, голосование (http://litepublisher.ru/) на высокой скорости с минимум памяти
Vladimir
На сайте с 07.06.2004
Offline
585
#3
regta:
В ряде случаев это критично и может тормозить загрузку страниц.

спасибо

конечно тормозит, идет дополнительная загрузка с домена файсбука, и не одного файла.

спасибо за вопрос

Nadejda добавил 06.08.2011 в 07:54

blogolet:
Тогда посмотрите
http://socialmediaautomat.com/jquery-fbjlike-js.php

там же и для других кнопок плагины

и вам за примеры, теперь можно поставить все три кнопки не задумываясь:)

проверяем работоспособность скриптов -http://site-perf.com/cgi-bin/show.cgi?id=uXPvy,o,h1c

ничего лишнего при загрузке страницы.

Аэройога ( https://vk.com/aeroyogadom ) Йога в гамаках ( https://vk.com/aero_yoga ) Аэройога обучение ( https://aeroyoga.ru ) и просто фото ( https://weandworld.com )
regta
На сайте с 15.04.2006
Offline
311
#4

Что-то я как первокурсник на заседании академиков, вроде бы все слова по отдельности понятны, а смысл ускользает :(

blogolet:
Так все таки вопрос вам так сложно написать код из 3 строк? Тогда посмотрите
http://socialmediaautomat.com/jquery-fbjlike-js.php

ок, посмотрел. Если я верно понял - загрузка плагинов начинается только после полной загрузки страницы? Что-то типа: <body onLoad="..."> ?

есть где об этом почитать по-русски?

Nadejda:
проверяем работоспособность скриптов -http://site-perf.com/cgi-bin/show.cgi?id=uXPvy,o,h1c

Признаюсь, ничего не понятно... Что показано по этой ссылке?

спасибо

B
На сайте с 25.02.2009
Offline
68
#5

ключевое слово jquery fа также фраза $(document).ready(function() {

простыми словами - да событие по загрузке, но только в jquery более аккуратно по отношению к семействам браузеров

Vladimir
На сайте с 07.06.2004
Offline
585
#6
regta:

ок, посмотрел. Если я верно понял - загрузка плагинов начинается только после полной загрузки страницы? Что-то типа: <body onLoad="..."> ?

В здесь как раз по русски :) -http://site-perf.com/cgi-bin/show.cgi?id=GWt6OtGEHyc

- в поле URL = "ссылка на страницу моего сайта"

- ниже в большом поле приведены время и все файлы которые загружаются по этой ссылке

- при загрузке страницы файлы с файсбука не загружаются

- при загрузке страницы загружаются только скрипты.

- И только после полной загрузки страницы, идет запрос на файсбук, и подгружаются файлы файсбука

- если зайдете по ссылке на мой сайт, то по центру увидите работающую кнопку Лайк

- если в поле URL внесете страницу своего сайта => GO, то получите загрузку со своей страницы всех файлов, в том числе и с файсбука

Для того, чтобы работало. Необходимо на свой сайт положить два скрипта ( jquery.js и jquery.fbjlike.js ), и прописать в хеадер ( до </head> )

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.fbjlike.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$('#fbjlike-example').fbjlike({

appID:'230019410368765',

siteTitle:'jQuery-Like-Button Plugin with callback functions',

onlike:function(response){

$('.fbjlike-uncontent:visible').hide('fade');

$('.fbjlike-content').show('fade');

$.cookie('liked','liked',{expires: 999});

},

onunlike:function(response){

$('.fbjlike-content:visible').hide('fade');

$('.fbjlike-uncontent').show('fade');

$.cookie('liked','unliked');

},

googleanalytics:true,

lang:'en_US'

});

if($.cookie('liked')=='liked'){$('.remember-state').show('fade');$('.fbjlike-uncontent:visible').hide('fade');}

});

</script>

appID:'230019410368765', - поставить свой номер

в скрипте jquery.fbjlike.js прописать свой айди тоже

Там где будете выводить кнопку на страницу:

<div id="fbjlike-example"></div>

<script type="text/javascript">

$(document).ready(function () {

$('#fbjlike-example').fbjlike();

});

</script>

neznaika
На сайте с 28.06.2006
Offline
356
#7

Да ладно, мастырить огромную и тупящую библиотеку ради отложенной загрузки скриптов?

Можно по аналогии:

http://ivanov.in/mixmarket/avoid-slow-js-2/

Дорого покупаю настоящие сайты. Не инвестирую деньги и не беру кредиты.
Vladimir
На сайте с 07.06.2004
Offline
585
#8
neznaika:
Да ладно, мастырить огромную и тупящую библиотеку ради отложенной загрузки скриптов?

Можно по аналогии:
http://ivanov.in/mixmarket/avoid-slow-js-2/

- более интересно не то, что загрузка скриптов отложена, а то что она выведена из загрузки страницы

neznaika
На сайте с 28.06.2006
Offline
356
#9
Nadejda:
- более интересно не то, что загрузка скриптов отложена, а то что она выведена из загрузки страницы

А теперь по русски.

Vladimir
На сайте с 07.06.2004
Offline
585
#10
neznaika:
А теперь по русски.

опять по русски😂 на графике сервиса http://site-perf.com можно?

Сервис нам показывает загрузку всех файлов при запросе страницы

1. обычная кнопка лайк. Видим все файлы которые загружаются дольше почти в 3 раза с файсбуковских серверов: -facebook.com, -static.ak.fbcdn.net

А если добавить еще пару кнопок? Добавиться загрузка еще куча файлов с еще нескольких серверов

2. В предлагаемом решении, нет запросов файлов с внешних серверов, нет внешних доменов

jpg 122.jpg
jpg 123.jpg

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий