oka_volga23 янв 2013 в 14:55

Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript

6 мин

103K

HTML * JavaScript * Веб-разработка *

Из песочницы

+15

Комментарии 28

denysd 23 янв 2013 в 15:14

Для полного восторга не хватает демочки.
Используйте и сделайте пожалуйста демку.

oka_volga 23 янв 2013 в 16:40

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

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

А вообще цель статьи была рассказать об асинхронной загрузке javascript (это можно и в своих проектах использовать — грузить скрипты асинхронно) и кроссбраузерном указании атрибута data-, с помощью javascript.

infinius 23 янв 2013 в 15:53

У Артёма Сапегина есть отличный плагин по этой теме.

oka_volga 23 янв 2013 в 16:43

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

markoffko 23 янв 2013 в 19:40

А давно атрибут data- это html5?

oka_volga 23 янв 2013 в 22:25

Конечно, я бы мог ответить просто написав «Давно», Как говорится: «какой вопрос — такой ответ».

Но, что бы не осталось сомнений попробую раскрыть и эту тему. Возможно проще было бы дать ссылку на спецификацию, но мы пойдем другим путем. Возьмем малюсенький код, главное, что он будет с атрибутом «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?

Piterski 24 янв 2013 в 06:05

Объясните пожалуйста, в чем суть именно такой конструкции?

// Creating scripts on page
x = d.getElementsByTagName(s)[0];
x.parentNode.insertBefore(o,x);

oka_volga 24 янв 2013 в 10:37

К сожалению достоверно не знаю.
Сам всегда использовал, что то типа:

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 использовал именно эту конструкцию, расскажите, мне тоже интересно.

yeremeiev 24 янв 2013 в 15:12

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

Piterski 24 янв 2013 в 15:30

Ну в таком случаем можно и так написать:

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

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

x.parentNode.insertBefore(o,x);

yeremeiev 24 янв 2013 в 16:19

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

oka_volga 25 янв 2013 в 10:09

на странице может не быть ни head, ни body, и тогда скрипт упадёт.

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

<html><head></head><body>

</body></html>

Конечно, возможно, что не все браузеры это делают, тем более старые или экзотические могут этого не делать. Так, что Выше объяснение, вероятнее всего верно.

nazz 24 янв 2013 в 07:32

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

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

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

Параграфы про использование хтмл5 и «старые» ссылки, вызвали реакцию вроде: «ну да, ну и че».

oka_volga 24 янв 2013 в 10:50

На самом деле конец статьи был немного другой.
Я его убрал, т.к. получалось, что начал за здравие, а закончил за упокой. Поясню: действительно, Вы абсолютно, правы. «такого рода тяжелые виджеты) будут тормозить при обычной загрузке», по этому грузить их нужно только асинхронно + айфреймы, которые они используют мне тоже не нравятся. Но эти виджеты предлагает первоисточник, т.е. сами социальные сети. Я считаю, что мой код вполне приемлемый, рабочий вариант, хотя единственный плюс этих кнопок, что показаны счетчики.

sphinks 24 янв 2013 в 07:38

Глубоко закопались вы. Есть сервисы, которые позволяют делать отличные социальные кнопочки в едином стиле за 5 минут, на выходе js скрипт. В итоге и код чистый, и кнопки в едином дизайне.

oka_volga 24 янв 2013 в 10:54

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

sphinks 24 янв 2013 в 11:07

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

Glook 23 дек 2013 в 13:22

это разные кнопки
есть кнопки «поделиться» и их действительно можно загружать разными способами и сделать любыми по стилю, а есть кнопки like (нравится), а вот их «кастомизировать» нельзя.

Holden 24 янв 2013 в 07:48

Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet

Почему же вы тогда в своём коде используете twitter.com/share?

Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута async

VK тоже может грузиться асинхронно.

oka_volga 24 янв 2013 в 11:04

Почему же вы тогда в своём коде используете 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 тоже может грузиться асинхронно

не спорю.

Nikita_Sergeevich 24 янв 2013 в 12:54

Может быть не в тему, но нет в русском языке приставки З-. Плакать хочется от таких комментариев.

Nikita_Sergeevich 25 янв 2013 в 07:51

Нет, серьезно? Вас не то что устраивает «ЗДЕЛАТЬ», так вы еще не довольны теми кто поправляет?
Вы живете в России, пишите на русском языке. Это общее развитие, это не какое-то специальное направление которое можно знать или нет. Я поправил не какой-то сложный речевой оборот, это то, чему даже детей в школе учат.
Куда мы катимся…

HDg 24 янв 2013 в 19:52

И insertBefore, и appendChild грузят скрипт асинхронно. Независимо от наличия атрибута async.
Синхронно скрипт будет загружен если он без атрибута async и вставляется через document.write. Ну или уже есть в HTML коде

HDg 24 янв 2013 в 20:00

Демка (смотрите логи): dl.dropbox.com/u/867515/scripts.html

oka_volga 25 янв 2013 в 10:18

Полезная информация.
Получается 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;

И я с ними.

DjOnline 28 янв 2013 в 07:01

Какой шаринг кнопок умеет показывать суммарное количество всех лайков (причем только успешных, а не нажатий), а также умеет лайкать без отображения отдельного окна, как эти нативные js лайки?

oka_volga 6 мар 2013 в 19:54

Сам бы хотел знать. Но похоже, на сегодняшний день, нет такого сервиса.

fedoschuk 9 мар 2013 в 00:40

поставил. почему-то вконтакте два раза отображается на странице

Зарегистрируйтесь на Хабре, чтобы оставить комментарий