Comments 28
Для полного восторга не хватает демочки.
Используйте и сделайте пожалуйста демку.
Используйте и сделайте пожалуйста демку.
К сожалению на указанном ресурсе код работать не будет, и на локальном компьютере работать не будет!
Вернее код отработает как надо, только Вы ничего не увидите, этот код загружает сторонние скрипты, с twitter, facebook, google, vkontakte, а вот они четко отслеживают запуск и запускаются только на реальном хостинге. Эти кнопочки, именно с этим кодом, работают на одном сайта, но к сожалению по правилам я не могу указать на него ссылку.
Кстати, это очень важный момент, что код работает только на реальном Интернет хостинге.
А вообще цель статьи была рассказать об асинхронной загрузке javascript (это можно и в своих проектах использовать — грузить скрипты асинхронно) и кроссбраузерном указании атрибута data-, с помощью javascript.
Вернее код отработает как надо, только Вы ничего не увидите, этот код загружает сторонние скрипты, с twitter, facebook, google, vkontakte, а вот они четко отслеживают запуск и запускаются только на реальном хостинге. Эти кнопочки, именно с этим кодом, работают на одном сайта, но к сожалению по правилам я не могу указать на него ссылку.
Кстати, это очень важный момент, что код работает только на реальном Интернет хостинге.
А вообще цель статьи была рассказать об асинхронной загрузке javascript (это можно и в своих проектах использовать — грузить скрипты асинхронно) и кроссбраузерном указании атрибута data-, с помощью javascript.
У Артёма Сапегина есть отличный плагин по этой теме.
А давно атрибут data- это html5?
Конечно, я бы мог ответить просто написав «Давно», Как говорится: «какой вопрос — такой ответ».
Но, что бы не осталось сомнений попробую раскрыть и эту тему. Возможно проще было бы дать ссылку на спецификацию, но мы пойдем другим путем. Возьмем малюсенький код, главное, что он будет с атрибутом «data-», например:
уберем все лишнее, оставим только тег с атрибутом «data-» и оформим как положено оформлять html код, сделаем несколько вариантов с DOCTYPE для HTML 4.01, XHTML 1.0 и конечно HTML 5, который в DOCTYPE называется просто html. Проверим на валидность полученные коды. Причем не будем обращать внимание на прочие ошибки, нас интересует только атрибут «data-»:
Line 7, Column 16: there is no attribute «DATA-LANG»
Line 7, Column 16: there is no attribute «data-lang»
This document was successfully checked as HTML5!
Убедил, что атрибут «data-» разрешен только в HTML5?
Но, что бы не осталось сомнений попробую раскрыть и эту тему. Возможно проще было бы дать ссылку на спецификацию, но мы пойдем другим путем. Возьмем малюсенький код, главное, что он будет с атрибутом «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);
К сожалению достоверно не знаю.
Сам всегда использовал, что то типа:
или
Но коды полученные от twitter, Facebook и Google написаны имено так:
Я подумал, что если я получил пример из трех солидных источников, значит именно такая конструкция является правильной в данном случае.
Если кто то знает, почему twitter, Facebook и Google использовал именно эту конструкцию, расскажите, мне тоже интересно.
Сам всегда использовал, что то типа:
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 и «старые» ссылки, вызвали реакцию вроде: «ну да, ну и че».
Решается все без такого рода костылей, весь блок выделяется в отдельный файл (статики или шаблона) и асинхронно подгружается простым гет-запросом после DOMready. Верстка, кстати при этом остается чистой, без ваших инлайн стилей.
А вообще решения где есть просто ссылки на лайк (как на хабре, например), а не подгрузка джаваскрипта или (о боже) айфрейма, намного приятнее в плане загрузки, но «классические», много где, ими пока не заменить (отдельная тема). Сервисы вроде addthis работают по-первому принципу.
Параграфы про использование хтмл5 и «старые» ссылки, вызвали реакцию вроде: «ну да, ну и че».
На самом деле конец статьи был немного другой.
Я его убрал, т.к. получалось, что начал за здравие, а закончил за упокой. Поясню: действительно, Вы абсолютно, правы. «такого рода тяжелые виджеты) будут тормозить при обычной загрузке», по этому грузить их нужно только асинхронно + айфреймы, которые они используют мне тоже не нравятся. Но эти виджеты предлагает первоисточник, т.е. сами социальные сети. Я считаю, что мой код вполне приемлемый, рабочий вариант, хотя единственный плюс этих кнопок, что показаны счетчики.
Я его убрал, т.к. получалось, что начал за здравие, а закончил за упокой. Поясню: действительно, Вы абсолютно, правы. «такого рода тяжелые виджеты) будут тормозить при обычной загрузке», по этому грузить их нужно только асинхронно + айфреймы, которые они используют мне тоже не нравятся. Но эти виджеты предлагает первоисточник, т.е. сами социальные сети. Я считаю, что мой код вполне приемлемый, рабочий вариант, хотя единственный плюс этих кнопок, что показаны счетчики.
Глубоко закопались вы. Есть сервисы, которые позволяют делать отличные социальные кнопочки в едином стиле за 5 минут, на выходе js скрипт. В итоге и код чистый, и кнопки в едином дизайне.
Согласен с Вами, есть такие сервисы. А не подскажите, с счетчиками «лайков» есть? Я не нашел. И повторюсь: " цель статьи была рассказать об асинхронной загрузке javascript (это можно и в своих проектах использовать — грузить скрипты асинхронно) и кроссбраузерном указании атрибута data-, с помощью javascript"
это разные кнопки
есть кнопки «поделиться» и их действительно можно загружать разными способами и сделать любыми по стилю, а есть кнопки like (нравится), а вот их «кастомизировать» нельзя.
есть кнопки «поделиться» и их действительно можно загружать разными способами и сделать любыми по стилю, а есть кнопки like (нравится), а вот их «кастомизировать» нельзя.
Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweetПочему же вы тогда в своём коде используете twitter.com/share?
Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута asyncVK тоже может грузиться асинхронно.
Почему же вы тогда в своём коде используете 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 коде
Синхронно скрипт будет загружен если он без атрибута async и вставляется через document.write. Ну или уже есть в HTML коде
Демка (смотрите логи): dl.dropbox.com/u/867515/scripts.html
Полезная информация.
Получается google «кодеры» перемудрили:
со своим:
И я с ними.
Получается 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.
Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript