Pull to refresh

Comments 28

К сожалению на указанном ресурсе код работать не будет, и на локальном компьютере работать не будет!
Вернее код отработает как надо, только Вы ничего не увидите, этот код загружает сторонние скрипты, с twitter, facebook, google, vkontakte, а вот они четко отслеживают запуск и запускаются только на реальном хостинге. Эти кнопочки, именно с этим кодом, работают на одном сайта, но к сожалению по правилам я не могу указать на него ссылку.

Кстати, это очень важный момент, что код работает только на реальном Интернет хостинге.

А вообще цель статьи была рассказать об асинхронной загрузке javascript (это можно и в своих проектах использовать — грузить скрипты асинхронно) и кроссбраузерном указании атрибута data-, с помощью javascript.
Вероятнее всего отличных плагинов много, социальные кнопки уже давно придумали.
Конечно, я бы мог ответить просто написав «Давно», Как говорится: «какой вопрос — такой ответ».

Но, что бы не осталось сомнений попробую раскрыть и эту тему. Возможно проще было бы дать ссылку на спецификацию, но мы пойдем другим путем. Возьмем малюсенький код, главное, что он будет с атрибутом «data-», например:

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>

уберем все лишнее, оставим только тег с атрибутом «data-» и оформим как положено оформлять html код, сделаем несколько вариантов с DOCTYPE для HTML 4.01, XHTML 1.0 и конечно HTML 5, который в DOCTYPE называется просто html. Проверим на валидность полученные коды. Причем не будем обращать внимание на прочие ошибки, нас интересует только атрибут «data-»:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>HTML</title>
	</head>
	<body>
		<a data-lang="ru">data-lang</a>
	</body>
</html>

Line 7, Column 16: there is no attribute «DATA-LANG»
<a data-lang="ru">data-lang</a>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>HTML</title>
	</head>
	<body>
		<a data-lang="ru">data-lang</a>
	</body>
</html>

Line 7, Column 16: there is no attribute «data-lang»
<a data-lang="ru">data-lang</a>


<!DOCTYPE html>
<html>
	<head>
		<title>HTML</title>
	</head>
	<body>
		<a data-lang="ru">data-lang</a>
	</body>
</html>

This document was successfully checked as HTML5!

Убедил, что атрибут «data-» разрешен только в HTML5?
Объясните пожалуйста, в чем суть именно такой конструкции?

// Creating scripts on page
x = d.getElementsByTagName(s)[0];
x.parentNode.insertBefore(o,x);
К сожалению достоверно не знаю.
Сам всегда использовал, что то типа:
document.getElementsByTagName('head')[0].appendChild(script);

или
document.body.appendChild(script);


Но коды полученные от twitter, Facebook и Google написаны имено так:
// Creating scripts on page
x = d.getElementsByTagName(s)[0];
x.parentNode.insertBefore(o,x);


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

Если кто то знает, почему twitter, Facebook и Google использовал именно эту конструкцию, расскажите, мне тоже интересно.
Потому что на странице может не быть ни head, ни body, и тогда скрипт упадёт. А хотя бы один тэг script на странице присутствует (вы же как-то вызываете этот код), значит и вставлять в DOM перед ним безопасно.
Подход описан много где.
Ну в таком случаем можно и так написать:

document.getElementsByTagName('script')[0].appendChild(script);


Меня больше интересует почему:

x.parentNode.insertBefore(o,x);
Ну, аппендить в скрипт бесполезно. А вот у родителя лучше вызывать insertBefore, потому что, если родитель вдруг не до конца загружен, вызов appendChild у него приведёт к ошибке.
на странице может не быть ни head, ни body, и тогда скрипт упадёт.


Я тоже так подумал, но проведя несколько экспериментов немного засомневался. Дело в том, что если на странице код не оформлен, как положено, современные браузеры сами добавляют::
<html><head></head><body>

</body></html>


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

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

А вообще решения где есть просто ссылки на лайк (как на хабре, например), а не подгрузка джаваскрипта или (о боже) айфрейма, намного приятнее в плане загрузки, но «классические», много где, ими пока не заменить (отдельная тема). Сервисы вроде addthis работают по-первому принципу.

Параграфы про использование хтмл5 и «старые» ссылки, вызвали реакцию вроде: «ну да, ну и че».
На самом деле конец статьи был немного другой.
Я его убрал, т.к. получалось, что начал за здравие, а закончил за упокой. Поясню: действительно, Вы абсолютно, правы. «такого рода тяжелые виджеты) будут тормозить при обычной загрузке», по этому грузить их нужно только асинхронно + айфреймы, которые они используют мне тоже не нравятся. Но эти виджеты предлагает первоисточник, т.е. сами социальные сети. Я считаю, что мой код вполне приемлемый, рабочий вариант, хотя единственный плюс этих кнопок, что показаны счетчики.
Глубоко закопались вы. Есть сервисы, которые позволяют делать отличные социальные кнопочки в едином стиле за 5 минут, на выходе js скрипт. В итоге и код чистый, и кнопки в едином дизайне.
Согласен с Вами, есть такие сервисы. А не подскажите, с счетчиками «лайков» есть? Я не нашел. И повторюсь: " цель статьи была рассказать об асинхронной загрузке javascript (это можно и в своих проектах использовать — грузить скрипты асинхронно) и кроссбраузерном указании атрибута data-, с помощью javascript"
Мне кажется и в выходной js скрипт таких сервисов его тоже можно было прикрутить и показать тоже самое. Было бы меньше вопрос к статье и реализации.
это разные кнопки
есть кнопки «поделиться» и их действительно можно загружать разными способами и сделать любыми по стилю, а есть кнопки like (нравится), а вот их «кастомизировать» нельзя.
Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet
Почему же вы тогда в своём коде используете twitter.com/share?

Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута async
VK тоже может грузиться асинхронно.
Почему же вы тогда в своём коде используете twitter.com/share?

Это не я использую. Это программисты twitter как то странно себя ведут. Поменяли share ссылку и сами же дают старую!
Вот посмотрите: dev.twitter.com/docs/intents
Здесь описано как правильно шарить на twitter.
А если Вы решите зделать кнопку с помощью их же сервиса: twitter.com/about/resources/buttons
Получите ссылку:
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

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


VK тоже может грузиться асинхронно
не спорю.
Может быть не в тему, но нет в русском языке приставки З-. Плакать хочется от таких комментариев.
Нет, серьезно? Вас не то что устраивает «ЗДЕЛАТЬ», так вы еще не довольны теми кто поправляет?
Вы живете в России, пишите на русском языке. Это общее развитие, это не какое-то специальное направление которое можно знать или нет. Я поправил не какой-то сложный речевой оборот, это то, чему даже детей в школе учат.
Куда мы катимся…
И insertBefore, и appendChild грузят скрипт асинхронно. Независимо от наличия атрибута async.
Синхронно скрипт будет загружен если он без атрибута async и вставляется через document.write. Ну или уже есть в HTML коде
Полезная информация.
Получается google «кодеры» перемудрили:

  (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);
  })();

со своим:

po.async = true;

И я с ними.
Какой шаринг кнопок умеет показывать суммарное количество всех лайков (причем только успешных, а не нажатий), а также умеет лайкать без отображения отдельного окна, как эти нативные js лайки?
Сам бы хотел знать. Но похоже, на сегодняшний день, нет такого сервиса.
поставил. почему-то вконтакте два раза отображается на странице
Sign up to leave a comment.

Articles