Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript / Хабрахабр. Давно уже планировал установить на свой сайт кнопки социальных сетей. Наконец нашел время для этого, проблема усугублялась тем, что я сам не являюсь пользователем социальных сетей, хотя против ничего не имею.
Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.
Google ссылка «www. Конечно, это общеизвестные факты, но, похоже, все- таки не все об этом знают и предлагают «шарить» на старые ссылки.
В общем, ознакомившись с темой, решил взять кнопки в первоисточнике: Twitter — twitter. Facebook — developers. Vkontakte — vk. com/developers. Like. Google+ — developers. Получил я коды кнопок, причем пришлось, немного повозится, что бы получит кнопки хотя бы одной высоты, я ведь их в блок решил объединить, а для этого лучше бы они были одного размера. Twitter: < a href=. Что же мы видим? Vkontakte единственный из представленных кодов, не использует HTML 5.
Кнопки Социальных Сетей Png
Кнопки популярных соц. Описание сервисов социальных кнопок, примеры кнопок и инструкции по их установке. Выберите сервисы, иконки которых будут стоять рядом с кнопкой.
- Бесплатный сервис, который генерирует скрипт кнопок социальных сервисов (соц. Вы сами выбираете нужные кнопки.
- Это социальные кнопки «Поделиться», быстрая регистрация через социальные сети, виджеты комментариев и групп. В сегодняшнем .
- Создавайте уникальные наборы кнопок "Поделиться" и "Мне нравится" для вашего сайта при помощи удобного конструктора uSocial.pro: привлекайте .
Как добавить кнопки социальных сетей на сайт Кнопки для всех сервисов закладок и социальных сетей - для Вашего сайта. Обзор и сравнение ТОП 5 популярных сервисов для создания кнопок социальных сетей. Наглядная таблица возможностей, наши . Давно уже планировал установить на свой сайт кнопки социальных сетей. Наконец нашел время для этого, проблема усугублялась тем, .
В данном случае на использование HTML 5 указывает атрибут data- в html тегах. Еще интересно, что у Twitter и Facebook очень похожие коды, видимо, подсматривают друг у друга.
Еще у Twitter и Facebook не указан type=«text/javascript», что соответствует HTML5, атрибут type теперь не является обязательным. Значение по умолчанию Java. Script (ECMAScript). А Google продолжает указывать type=«text/javascript».
Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута async, соответствующего спецификации HTML 5. Смету На Металлическую Дверь. Об асинхронной загрузке скриптов стоит сказать немного больше. В Google молодцы, что используют асинхронную загрузку скрипта, а другие зря пренебрегают такой возможностью.
Что же такое эта асинхронная загрузка, все просто, это указание браузеру загрузить скрипт, как только будет возможность его загрузить, а если пока нет возможности, браузер продолжит работать дальше. Для чего это нужно? Например, Вы поставили на свой сайт кнопку «Твитнуть», а мы помним, что у них нет в коде атрибута async. И все бы хорошо, но у многих на работе закрыт доступ к социальным сетям и когда к Вам на сайт зайдет пользователь без доступа к Twittter его браузер не сможет загрузить скрипты с Твиттера, а т.
Не каждый пользователь будет ждать загрузки Вашего сайта, а если дождется в дальнейшем, может, не вернутся, зачем ему возвращаться на «тормозной» сайт. Делаем вывод, что в ряде случаев асинхронная загрузка скриптов — нужная вещь. В связи с тем, что полученные кнопки я решил объединить в один блок, логично будет весь javascript код также объединить в один скрипт и добавить асинхронную загрузку. Кроме того, я пока не использую HTML 5 на своем сайте и для того, что бы код был валидным, все атрибуты HTML 5 нужно установить с помощью javascript.
С помощью javascript, атрибут data- устанавливается очень просто, например: < div class=. Работает во всех браузерах, кроме. Но мы запишем по- другому, что бы работало во всех браузерах: document. Element. By. Id(id). Attribute(. Немного изменил HTML, главным образом мне на сайте совсем не нужна прямая ссылка на Twitter, а в своем коде они проставляют такую ссылку: Твитнуть, зачем им это не понятно, что о них кто- то еще не знает? Или рейтинг в поисковиках маленький? В общем, записал так: Твитнуть, можно, конечно rel=«nofollow» поставить, но я выбрал максимально кардинальный метод.
Вообще бы убрал тег «А», но без него не работает. HTML блок кнопок, вставляем туда, где хотим увидеть кнопки: < ul style=. Javascript код асинхронной загрузки скриптов для кнопок, вставляйте куда хотите, обычно или в head или в конец страницы. Кстати у Twitter и Facebook в коде есть защита от повторной загрузки скриптов, сделанная, на случай если код вставить в страницу несколько раз, не думаю, что мой код кто- то вставит несколько раз, но на всякий случай защиту от повторной загрузки скриптов я оставил: < script type=.