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

[votept]

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



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


Завтра может протестирую подгрузку постеров итп при прокрутке. У меня на сайте можете наблюдать такое. Если разница будет ощутима, то распишу что и как делать )

[i926]

Не знаю как кого, но лично меня уже давно раздражала тормозная загрузка социальных кнопок.

Странно..... Ни разу кнопки не тормозили. Были неудобоваримыми, это да, но не тормозили. Но в любом случае, проделанная работа достойна уважения
И....... Очень мне сайт понравился, очень оригинальный и думаю, к него большое будущее.
Может мне показалось, но вроде притормаживает он слегка, долговасто грузится.

[votept]

Может мне показалось, но вроде притормаживает он слегка, долговасто грузится.

Хостинг может подводить

[coder]

Попробую обязательно, спасибо !!!

[coder]

Сделал у себя, правда не так как хотел. Хотел чтобы кнопки были на всех страницах фиксированным блоком справа и по клику раскрывались в блок. Надо подумать...

[votept]

coder Может смогу помочь? )

[coder]

coder Может смогу помочь? )

Если не трудно. Куда запхнуть код, чтоб отображался на всех страницах? header || footer?

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

<div id="leftFit">
<div id="block"></div>
</div>

Чтобы он был слева\справа и фиксированный. Для фиксации css я напишу, это не особо проблематично, проблема именно с месторасположением кода

[votept]

Если не трудно. Куда запхнуть код, чтоб отображался на всех страницах? header || footer?

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

[coder]

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

Шаблон на основе subsilver2

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

Ладно, буду делать попытки

[votept]

coder

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



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