Подгрузка социальных кнопок

Небольшие моды и хаки для форума phpBB3
Правила форума
При размещении мода/статьи взятой с другого форума/сайта обязательно необходимо указывать первоисточник сообщения.
Аватара пользователя
votept
Благодарил (а): 49 раз
Поблагодарили: 62 раза
Сообщения: 806
Зарегистрирован: 18 июл 2010, 17:57
Сообщение

Подгрузка социальных кнопок

26 июл 2013, 23:43

Не знаю как кого, но лично меня уже давно раздражала тормозная загрузка социальных кнопок. Все сервисы пробовал и все не то. И как то на одном сайте увидел интересное решение, вместо кнопок грузится картинка и при нажатии на нее подгружаются кнопки причем там куча кнопок ) Без этого бы страница грузилась дольше. А так моментально. И решил реализовать у себя так же. Сейчас делаю сайтик один для себя, немного учусь в php итп. Ниже распишу как реализовать у себя так же.

Мне понравились вот эти кнопочки: http://share.pluso.ru

После того, как настроили кнопки по своему вкусу, создаем в корне трекера файл socialbuttons.php

В нем вставляем полученный код с сервиса кнопок, в том виде в каком получили.

Пример стандартный код:

Код: Выделить всё

<script type="text/javascript">(function() {
          if (window.pluso)if (typeof window.pluso.start == "function") return;
          var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
          s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
          s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
          var h=d[g]('head')[0] || d[g]('body')[0];
          h.appendChild(s);
          })();</script>
        <div class="pluso" data-options="big,square,line,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print" data-background="#ebebeb"></div>
Далее открываем файл своего стиля: overall_header.html и вставляете перед </head> код:

Код: Выделить всё

<script>
$(function(){
    $("#leftFit").click(function(){
        $.get("/socialbuttons.php", {}, function(response){
            $("#block").html(response);
            $("#leftFit").hide();
        });
    });
});
</script>  
И в то место, где вы хотите видеть кнопки, вставляете следующий код:

Код: Выделить всё

<a id="leftFit">Показать кнопки / Так же можно картинку свою вставить</a>
<div id="block"></div>
В вашу css от сайта добавить:

Код: Выделить всё

#leftFit {
cursor: pointer;
}
Еще вариант, с отложенной загрузкой по времени:

Код: Выделить всё

<script type="text/javascript">
$(function(){
	 $(document).ready(function () {
	 setTimeout(function() {
        $.get("/ajax/socialbuttons.php", {}, function(response){
            $("#block").html(response);
            $("#leftFit").hide();
       });
		}, 3000);
	});
});
</script>
И так же в шаблон

Код: Выделить всё

<a id="leftFit">Показать кнопки / Так же можно картинку свою вставить</a>
<div id="block"></div>
Вроде ничего не упустил. Может есть и грамотнее решение какое, но лично у себя я разницу ощутил.

Посмотреть типа демки, можно на моем сайте: http://silllence.com



На трекере не тестил, но должно работать все. Если не работает, то разберемся что к чему)))


Завтра может протестирую подгрузку постеров итп при прокрутке. У меня на сайте можете наблюдать такое. Если разница будет ощутима, то распишу что и как делать )
Последний раз редактировалось votept 29 июл 2013, 16:45, всего редактировалось 4 раза.
Аватара пользователя
i926
Откуда: Санкт-Петербург
Благодарил (а): 38 раз
Поблагодарили: 67 раз
Сообщения: 444
Зарегистрирован: 21 сен 2010, 18:55
Сообщение

Re: Подгрузка социальных кнопок

27 июл 2013, 00:37

votept писал(а):Не знаю как кого, но лично меня уже давно раздражала тормозная загрузка социальных кнопок.
Странно..... Ни разу кнопки не тормозили. Были неудобоваримыми, это да, но не тормозили. Но в любом случае, проделанная работа достойна уважения ;)
И....... Очень мне сайт понравился, очень оригинальный и думаю, к него большое будущее.
Может мне показалось, но вроде притормаживает он слегка, долговасто грузится. :?
Последний раз редактировалось i926 27 июл 2013, 00:39, всего редактировалось 1 раз.
Настройка серверной части трекера - ppkbb3cker
Аватара пользователя
votept
Благодарил (а): 49 раз
Поблагодарили: 62 раза
Сообщения: 806
Зарегистрирован: 18 июл 2010, 17:57
Сообщение

Re: Подгрузка социальных кнопок

27 июл 2013, 01:05

i926 писал(а):Может мне показалось, но вроде притормаживает он слегка, долговасто грузится.
Хостинг может подводить :pardon:
co
coder
Откуда: Украина, Запорожье
Благодарил (а): 22 раза
Поблагодарили: 7 раз
Сообщения: 697
Зарегистрирован: 18 мар 2013, 13:44
Сообщение

Re: Подгрузка социальных кнопок

27 июл 2013, 11:18

Попробую обязательно, спасибо !!! :good:
co
coder
Откуда: Украина, Запорожье
Благодарил (а): 22 раза
Поблагодарили: 7 раз
Сообщения: 697
Зарегистрирован: 18 мар 2013, 13:44
Сообщение

Re: Подгрузка социальных кнопок

28 июл 2013, 14:32

Сделал у себя, правда не так как хотел. Хотел чтобы кнопки были на всех страницах фиксированным блоком справа и по клику раскрывались в блок. Надо подумать... :?
Аватара пользователя
votept
Благодарил (а): 49 раз
Поблагодарили: 62 раза
Сообщения: 806
Зарегистрирован: 18 июл 2010, 17:57
Сообщение

Re: Подгрузка социальных кнопок

28 июл 2013, 16:12

coder Может смогу помочь? )
co
coder
Откуда: Украина, Запорожье
Благодарил (а): 22 раза
Поблагодарили: 7 раз
Сообщения: 697
Зарегистрирован: 18 мар 2013, 13:44
Сообщение

Re: Подгрузка социальных кнопок

28 июл 2013, 18:26

votept писал(а):coder Может смогу помочь? )
Если не трудно. Куда запхнуть код, чтоб отображался на всех страницах? header || footer?

Код: Выделить всё

<div id="leftFit">
<div id="block"></div>
</div>
Чтобы он был слева\справа и фиксированный. Для фиксации css я напишу, это не особо проблематично, проблема именно с месторасположением кода :pardon:
Аватара пользователя
votept
Благодарил (а): 49 раз
Поблагодарили: 62 раза
Сообщения: 806
Зарегистрирован: 18 июл 2010, 17:57
Сообщение

Re: Подгрузка социальных кнопок

28 июл 2013, 18:33

coder писал(а):Если не трудно. Куда запхнуть код, чтоб отображался на всех страницах? header || footer?
Можно в хеадер, можно в футер. Смотря еще какой шаблон ) Где лучше смотреться будет итп.
co
coder
Откуда: Украина, Запорожье
Благодарил (а): 22 раза
Поблагодарили: 7 раз
Сообщения: 697
Зарегистрирован: 18 мар 2013, 13:44
Сообщение

Re: Подгрузка социальных кнопок

28 июл 2013, 18:59

votept писал(а):Можно в хеадер, можно в футер. Смотря еще какой шаблон ) Где лучше смотреться будет итп.
Шаблон на основе subsilver2

http://f-torrents.org/ вот :oops:

Ладно, буду делать попытки :)
Аватара пользователя
votept
Благодарил (а): 49 раз
Поблагодарили: 62 раза
Сообщения: 806
Зарегистрирован: 18 июл 2010, 17:57
Сообщение

Re: Подгрузка социальных кнопок

28 июл 2013, 19:10

coder

Вот сюда можно не плохо разместить )



В хеадере. Смотри там id="panel-top"

Вернуться в «Минимоды и хаки для phpBB3»