Здравствуйте, уважаемые друзья. Сегодняшняя статья будет посвящена созданию блока социальных кнопок без сервисов и плагинов. А ещё в этот блок войдут кнопки, позволяющие посетителям сайта распечатать страницу, отправить ссылку статьи на электронную почту и сделать закладу на вашу статью. Такие кнопки сегодня можно встретить практически на каждом сайте. Только вот реализованы они при помощи сервисов или плагинов. А я же покажу, как сделать это самостоятельно.
Сервисы, которые я использовал на сайтах клиентов и на своём блоге — и . Эти сервисы позволяют достаточно легко реализовать поставленную задачу.
В чём преимущество собственных социальных кнопок перед сервисами и плагинами
- Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.
А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в . Все стили сведены к минимуму. Плюс простой каркас html.
- Способ, который я предлагаю, не содержит ни одной внешней ссылки. Нет, ссылки есть, но они все будут, как внутренние ссылки. При желании вы всегда можете их . И тогда их вообще не будет видно.
- Очень простая установка. Достаточно вставить html код блока в исходный код страницы сайта, загрузить спрайт, добавить css стили и установка закончена. Вам лишь необходимо будет подправить путь к файлу с изображениями кнопок.
- Этот пункт скорей и не плюс и не минус в сторону собственного блока социальных кнопок. Фишка в том, что у собственного блока нет счётчика нажатий на кнопки. И это можно посчитать за минус. Но, с другой стороны, есть возможность поставить на каждую кнопку и вы точно будет знать сколько раз нажимали на кнопки и делились вашими статьями в социальных сетях ваши посетители.
- Статистика, собираемая сервисами, по вашему сайту больше не будет передаваться третьим лицам.
Вставка блока социальных кнопок в исходный код
Мы же рассмотрим классический вариант, когда кнопки расположены после статьи.
Сделать это можно либо открыв файл, отвечающий за вывод статей (single.php ) и в исходный код добавить блок социальных кнопок. Либо это можно сделать через файл функции темы (functions.php ).
Я покажу оба варианта, а вы для себя выберите подходящий.
Вставка блока в исходный код single.php
Предупреждение: Пред началом всех действий сделайте резервную копию файла single.php!
Открываем административную панель Вордпресс – «Внешний вид» — «Редактор» — «Одна запись (single.php)» .
В исходном коде ищите место, где заканчивается вывод статьи, и начинаются комментарии или постраничная навигация. Именно в это место нужно будет вставить html код блока социальных кнопок.
Внимательно смотрите на скриншот, ориентируйтесь на коды, отвечающие за вывод статьи и комментариев . И вставляйте приведённый ниже код.
Конечно, в ваших шаблонах будут некоторые отличия, но уверен, вы разберётесь, сложного в этом ничего нет. И к тому же у вас есть резервная копия, бояться нечего.
А вот и сам html код блока социальных кнопок:
Пояснения по коду: это один блок ДИВ с классом.share, в котором содержатся ссылки на социальные сети. Ссылка открывается в отдельном всплывающем окне, за это отвечает вот эта функция onClick=window.open . Подстановка ссылки на статью осуществляется вот этим кодом . Каждая ссылка имеет свой класс, через который присваивается изображение кнопки.
На этом вставка через исходный код закончена. И далее нужно подключить css стили.
Вставка блока в исходный код single.php через функции темы
Предупреждение: пред началом работ, — сделайте резервную копию файла functions.php!
Для того чтобы использовать это вариант, нужно открыть файл functions.php и в самом конце добавить этот код:
/* Вставка соцкнопок*/ add_action("comments_template","soc_button"); function soc_button() { ?> И будьте внимательны после вставки кода у вас не должно быть пробелов и других символов. Либо только закрытие php кода?>. В противном случае сайт перестанет работать.Пояснения по коду: место, где будут выставлены кнопки социальных сетей, определяется через API ключ comments_template . По этому ключу определяется место перед комментариями. Сам код соцкнопок заключён в обратные теги открытия и закрытия php. В коде я их обозначил красным цветом. в этом вся хитрость вставки html кода в php, через функции темы.
На этом и это способ окончен, переходим к загрузке изображений на сайт.
Загрузка изображения кнопок на сервер
Для примера я подготовил несколько спрайтов с изображениями социальных кнопок. Скачать их можете .
Спрайт, который я использую в качестве примера, весит всего 3,97 кб и содержит только необходимые кнопки. А раз это спрайт, то и запрос к базе всего одни, а не для каждой кнопки в отдельности.
Скачиваете изображения или готовите свои и загружаете их на свой сайт. Думаю с этим проблем возникнуть не должно. Далее, ссылка на этот спрайт потребуется для оформления кнопок через стили css.
Подключение стилей CSS
Этот шаг можно конечно, выполнить самым первым, но я предпочитаю вначале выполнить всю сложную техническую работу, а уже после приступить к приятным мелочам с css стилями.
Итак, открываем файл style.css, отвечающий за дизайн вашего сайта. И вставляем вот эти стили:
Share a { display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test..png ") no-repeat scroll 0px 0px transparent;} .share a.vkontakte { background: url("http://test..png ") no-repeat scroll -168px 0px transparent; } .share a.google { background: url("http://test..png ") no-repeat scroll -252px 0px transparent; } .share a.livejournal { background: url("http://test..png ") no-repeat scroll -336px 0px transparent; } .share a.twitter { background: url("http://test..png ") no-repeat scroll -42px 0px transparent; } .share a.mail { background: url("http://test..png ") no-repeat scroll -294px 0px transparent; } .share a.odnoklassniki { background: url("http://test..png ") no-repeat scroll -126px 0px transparent; } .share a.pinterest { background: url("http://test..png ") no-repeat scroll -210px 0px transparent; } .share a.liveinternet { background: url("http://test..png ") no-repeat scroll -378px 0px transparent; } .share a.evernote { background: url("http://test..png ") no-repeat scroll -420px 0px transparent; } .share a.bookmark { background: url("http://test..png ") no-repeat scroll -462px 0px transparent; } .share a.email { background: url("http://test..png ") no-repeat scroll -504px 0px transparent; } .share a.print { background: url("http://test..png ") no-repeat scroll -546px 0px transparent; } .share a.digg { background: url("http://test..png ") no-repeat scroll -588px 0px transparent; } .share a.spring { background: url("http://test..png ") no-repeat scroll -630px 0px transparent; }
Пояснения по коду: класс.share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.
На этом весь процесс создания своего блока социальных кнопок – закончен. Можно смело переходить к проверке.
А ещё у меня есть видеоурок, в котором весь процесс показан наглядно, полюс показана работа самих кнопок. Смотрите и внедряйте на своих сайтах и блогах.
Вот теперь всё. С поставленной задачей справился. Всем желаю удачи и до встречи в новых статьях и видеоуроках.
Приветствую вас на моем блоге. Сегодня я хотел бы вам показать пошагово, как можно сверстать на html и css кнопки социальных сетей. Начнем с полного нуля и в конце получим нужный результат. Вперед!
Разметка и базовые стили
В адресах ссылок я просто поставил решетку. Конечно, при использовании в реальности у каждой ссылки должен быть прописан рабочий адрес, по которому осуществится переход.
Добавим пока что вот такие стили:
Share {
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
}
.share i {
margin-right: 15px;
color: black;
text-transform: uppercase;
}
Мы немного оформили сам контейнер для ссылок (размеры, отступы, фон) и надпись.
Оформляем иконки
Social {
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
}
Свойством display: inline-block мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.
Хорошо, а для чего нам vertical-align: middle ? Это свойство выровняет текст в контейнере так, что он будет ровно по центру по вертикали. Также зададим нашим ячейкам какой-нибудь фон, чтобы визуально видеть их уже на этом этапе. Получилась заготовка. Самое время наконец добавить иконочки.
Финальный этап
Нам осталось разместить в каждый из подготовленных блоков свою иконочку, которая идентифицировала бы ту или иную соц. сеть. Для этого я предлагаю воспользоваться самым правильным методом – подключить картинку-спрайт и с помощью позиционирования фона расставить все по своим местам.
Короче, нам нужно такое изображение. У меня оно примерно 120 на 40.
В css-стили добавляем следующие правила:
Social-vk{
background: url(icon.png);
}
.social-fb{
background: url(icon.png) -40px 0;
}
.social-tw{
background: url(icon.png) -78px 0;
}
Получаем на выходе полностью оформленный блок с иконками.
Вы поняли, как мы это получили? Если нет, то объясняю. Каждая ссылка блок имеет размер 40 на 40. Соответственно, когда мы задаем для него фоновое изображение 120 на 40, то блок просто не может вместить его полностью, и в результате вмещает столько, сколько может.
По умолчанию в данном случае будут взяты первые 40 пикселей ширины и высоты фонового изображения, но с высотой и так все в порядке – изображение полностью влезает в блоки по высоте. Соответственно, остается только прописать позицию фона для иконок фейсбука и твиттера.
Записав в фоне так: background: url(icon.png) -40px 0 , мы явно указываем, что для блока social-fb , фоновая картинка должна отобразиться именно с указанного положения – сорока пикселей по ширине влево и по высоте без смещения, потому что оно не нужно. Вот так вот все просто, на самом деле.
Что еще можно сделать?
Может быть, вы еще как-то дополнительно хотите оформить блок социальных сетей. Есть несколько идей. Во-первых, можно добавить всем иконкам скругление углов.
Social{
Border-radius: 5px;
}
Во-вторых, можно добавить им рамку.
Border: 3px solid purple;
По дизайну нам в данном случае подойдет фиолетовая, мне кажется. Также вы можете скруглить углы у самого контейнера с ссылками.
Опять же, вариантов оформления много. Ну и, конечно, вы легко можете поменять цвета. В этой статье я предлагаю вам такой вариант оформления, но теперь вы легко можете сделать по-своему: желтые, зеленые, красные и любые другие иконки.
Итог
Как видите, даже самостоятельно можно очень легко добавить на сайт социальные кнопки, а помогут нам в этом html и css. По крайней мере, визуально мы наши иконки можем оформить так, как нужно по дизайну каждого конкретного сайта.
На этом я сегодняшнюю статья-урок заканчиваю. В следующий раз создадим на css еще что-нибудь
Хорошую вещь я откопал. Интерфейсные иконки, заключенные в один спрайт. Если кто не знает, что такое спрайт - это одна картинка, в которой есть несколько изображений, отображающиеся на сайте отдельно посредством css. Не знаю, понятно ли я объяснил, но вы на примере этой сборке можете узнать, что такое спрайт.
Преимущества спрайтов
Давно я не выкладывал иконки, наверное потому, что все иконки, которые были мне нужны уже были на моем сайте:)) но вот понадобились иконки в одном спрайте и я нашел эти и делюсь ими с Вами. Кстати отличительная черта и самый существенный плюс спрайта, это то, что если загрузилась картинка спрайт один раз, то все элементы этого спрайта больше не будут подгружатся и соответственно будут уменьшать скорость html страницы. Обычно спрайты используют для кнопок, которые меняются при наведении. Иногда бывает такое, что кнопка в обычном состоянии и кнопка при наведении - это две разные картинки и вы могли заметить на каких-либо сайтах, когда наводишь на кнопку, изображение появляется не сразу - оно подгружается. Со спрайтом такой проблемы не будет. Еще один плюс спрайтов - экономия места. Скажем у вас есть какой то плагин, типа слайдера, и к нему идут несколько десятков изображений (уголки рамок, сами рамки, стрелки, буллиты, икокни соц сетей и так далее). Так вот, когда они все заключены в одну картинку, это намного удобнее и аккуратнее смотрится, если бы они валялись в папке с изображениями по отдельности.
Что изображено на этих иконках
По обычаю расскажу, какие изображения есть среди этих иконок, чтобы вы могли найти нужную иконки по поиску, который у меня находитсья в главном меню наверху сайта: замок, робот, алмаз или драгоценный камень, монитор, подарок, микрофон, ракета, мороженное, человек, часы, ножницы, иконки всяких социальных сетей и сервисов, гаечные ключи, лук, кошелек, ipad, арбуз, кошелек, джойстик игровой, калькулятор, клоун, лампочка, лук, мусорное ведро или корзина, письмо, глобус, бургер, авто, облако, фотоаппарат и многое многое другое. Всего порядка 100-а изображений.
Подключаются эти иконки очень просто:
1. Подключаем css файл sprite.css таким образом: создаем папку css в корне вашего сайта, закидываем туда этот файл css, а на странице, где будут отображаться иконки между тегами
вставляем следующий код:
3. В месте, где вы хотите поставить иконку, вставляем код:
4. Вы можете пользоваться моей демо, там есть все представленные иконки и с помощью google chrome просмотрщика элемента определить название иконки и вставить вместо "название иконки". Допустим, иконка с изображением часов имеет такой код:
Ну я думаю, что разобраться, как вставлять эти икокни из спрайта не сложно, тем более я уже все объяснил:)) Приятного пользования!
Продолжаем социализировать наши сайты.Читателям часто удобно получать обновления блогов прямо в их любимую социальную сеть. Давайте дадим им такую возможность. Для этого нужно зарегистрироваться в этих самых соц.сетях. Можно создать профиль администрации или автора сайта, а можно публичную страницу компании или проекта. В дальнейшем нужно будет регулярно публиковать в новостные ленты профилей новости и обновления сайта, чтобы ваши подписчики могли с ними ознакомится. Это, кстати, удобно делать с помощью установленных нами ранее . Ссылки на социальные профили оформим с помощью приёма CSS sprite или спрайты на CSS.
Что такое CSS спрайты и спрайты в общем?
Спрайты — набор маленьких картинок, которые объединены в одну. Это делается для того, чтобы не загружать 10-20 маленьких легковесных картинок с сервера на компьютер пользователя, а отдать их одним потоком, объединив в один файл. Спрайты в веб-дизайн пришли из игровой индустрии, там они использовались для создания анимированной 2D графики, например стреляющих монстров и т.п.
В дизайне сайтов тоже применяют приём, при котором различные иконки объединяют в один файл, например вот так:
Как можно увидеть в этом примере в один файл собрали не только иконки соц.сетей, но и другие элементы дизайна, такие как стрелочки, кнопки «мне нравится» и т.п. Но объединять абсолютно всю графику, которая используется на сайте в один спрайт не совсем правильно. Лучше поделить элементы на группы и подгружать только необходимые на определённом типе страниц.
На этой картинке я постарался схематически показать принцип работы css спрайтов. В случае когда блок больше фоновой картинки, то она по умолчанию помещается в левый верхний угол, если в css стилях задано no-repeat. Но мы можем менять положение фоновой картинки относительно левого верхнего угла блока. Особенно это полезно, если блок, например, по размеру равен отдельной иконке. У нас семь иконок размером 32х32 каждая. Они расположены по горизонтали, соответственно по вертикали нам положение фона изменять не нужно. Задаём положение фонового рисунка -32 px получаем в блоке иконку , -64 px — иконку Фейсбук и т.д.
Как сделать кнопки-ссылки на профили в социальных сетях?
После регистрации в соответствующих сообществах и в я получил ссылки на профили, адрес моей RSS ленты и ссылку на форму подписки для получения обновлений по почте. Затем я их объединил в следующий код и вставил его в текстовый виджет в панели администрирования WordPress:
В анкоре ссылок в этом коде используется тег : . Именно он и является тем самым блоком, в котором отображается нужная иконка. Сдвиг фонового изображения задаётся в файле стилей style.css через свойство background-position :
/* Кнопки подписки на обновления*/ .spmenu { padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; } .spmenu a, .spmenu a:hover { cursor: pointer; color: #1E90FF; text-decoration: none; font-size: 100%; } .spmenu span { display: inline-block; width: 32px; height: 32px; background: url("images/icons.png") no-repeat; } .spmenu span.sprite_gplus {background-position: 0px 0px;} .spmenu span.sprite_twitter {background-position: -32px 0px;} .spmenu span.sprite_fbook {background-position: -64px 0px;} .spmenu span.sprite_rss {background-position: -96px 0px;} .spmenu span.sprite_email {background-position: -128px 0px;}
Таким образом для каждого элемента внутри класса «spmenu » задаётся фоновое изображение icons.png , которое представляет из себя набор иконок. Заметьте, что является строчным встроенным элементов по спецификации HTML, поэтому, чтобы задать ему строгие размеры (ширину и высоту), мы должны изменить способ его отображения на блочный в CSS свойствах (строчка: display: inline-block; ). Размеры блока 32х32 как раз соответствуют формату наших иконок.
Часто вместо
используют теги
,
,
и т.п., я считаю этот подход неправильным. Зачем изменять стили стандартных тегов, если есть универсальный
. А тег
вообще создаёт лишний запрос к серверу, а мы как раз, применяя спрайты, пытаемся сократить число этих запросов.
Где взять иконки для спрайта?
- Нарисовать самому.
- Поискать в поисковике среди картинок.
- В Сети есть специальные подборки иконок, которые часто раздаются бесплатно.
- Многие соц.сети и сервисы выставляют на сайтах официальные логотипы и иконки, которые можно использовать в своих приложениях.
- Чтобы сделать файл спрайтов иконок соц.сетей автоматически, можно воспользоваться сервисом . Выбираем иконки в нужном порядке, сохраняем архив со скриптом, распаковываем и видим картинку icons.png — готовый файл спрайтов.
Спрайты кроме отображения иконок полезны при разработке анимированного меню, когда при наведении на его пункт, он либо затемняется, либо загорается. Тогда в файле спрайтов хранят два набора кнопок и по событию «наведение мыши» динамически при помощи JS меняют положение фонового рисунка.
Обещанное вначале заметки меню кнопок-ссылок на каналы получения обновлений сделано, на этом заканчиваю статью. Подписывайтесь на обновления, самое интересное только начинается.
Здравствуйте, уважаемые читатели блога сайт. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно , да и будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из , о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).
А также я посчитал уместным и по Емайлу.
Создаем спрайт из кнопок и вставляем Html код на сайт
После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про , подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в и .
Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и . Нам такое расточительство не подходит, тем более, что уже давно .
Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).
Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 , поэтому мой спрайт выглядит так ( , правда, туда еще затесался, но это не беда):
Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из . В моем случае он называется sidebar.php. Html код при этом получается крайне простой:
Ну, и самое интересное. С помощью мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.
Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно