Как добавить на свой сайт блок с кнопками, ведущими на ваши страницы или группы в социальных сетях, а так же на RSS ленту
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно, да и одним плагином в WordPress будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из бесплатного конструктора кнопок Share42, о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).
Теперь останется только скопировать ссылки (адреса ваших страниц в соцсетях, если вы их уже создали). Читайте об этом в следующих постах:
- Создание бизнес-страницы в Facebook
- Создание брендовой страницы в Гугл+
- Добавление своей группы во Вконтакте
- Регистрация и вход в Твиттер
А также я посчитал уместным добавить кнопку подписки на RSS ленту и кнопку Feedburner для подписки на новости сайта по Емайлу.
Создаем спрайт из кнопок и вставляем Html код на сайт
После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про иконки и значки для сайта, подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в простенькой программе FastStone Image Viewer и бесплатном онлайн-фотошопе.
Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и снижать скорость загрузки страниц. Нам такое расточительство не подходит, тем более, что уже давно изобрели CSS спрайты.
Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).
Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 пиксела, поэтому мой спрайт выглядит так (FriendFeed, правда, туда еще затесался, но это не беда):
Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из шаблонов, из которых состоит используемая мною тема оформления. В моем случае он называется sidebar.php. Html код при этом получается крайне простой:
<a rel="nofollow" class="rsskt" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo.ru" target="_blank"></a> <a rel="nofollow" class="emailkt" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a> <a rel="nofollow" class="vkon" href="https://vk.com/ktonanovenkogoru" title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a> <a rel="nofollow" class="twit" href="https://twitter.com/KtoNaNovenkogo" title="KtoNaNovenkogo.ru в Twitter" target="_blank"></a> <a rel="nofollow" class="face" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a> <a rel="nofollow" rel="publisher" class="goog" href="https://plus.google.com/107949091476526100342" title="KtoNaNovenkogo.ru в Google+" target="_blank"></a>
На всякий случай я добавил rel="nofollow", чтобы эти ссылки не учитывали поисковики при распределении весов на сайте. Атрибут Title в теге гиперссылки A служит для отображения заключенного в него текста при подведении курсора мыши к иконке. Я не стал им пренебрегать, ибо не для всех посетителей сайта иконки могут представлять исчерпывающую информацию. Выглядеть это будет примерно так:
Привязываем спрайт к Html коду и оформляем кнопки в CSS
Однако очевидно, что для описанного выше кода нужно будет еще несколько строк в файле стилей добавить (у меня он называется style.css и живет в папке с используемой мною темой оформления — читайте про них по приведенной чуть выше ссылке). У меня получилось примерно так (может быть и корявенько, но работает):
.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -0px 0 no-repeat;} .vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -24px 0 no-repeat;} .face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -48px 0 no-repeat} .goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -96px 0 no-repeat} .rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -120px 0 no-repeat} .emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -144px 0 no-repeat}
CSS свойство display:inline-block позволяет придать тегу гиперссылки A одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним тэгам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него тегам он будет вести себя как блочный (т.е. можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).
CSS свойство vertical-align:bottom задет выравнивание по вертикали, что наверно понятно из его названия. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Просто поэкспериментируйте и поймете его назначение.
С помощью width и height мы задаем размеры отображаемого блока, который должен совпадать с размером иконки соцсети. Свойство outline:none используется, чтобы в некоторых браузерах при клике на ссылку вокруг нее не появлялась рамка. С помощью margin я задал отступы от верха и от соседних иконок, если не ошибаюсь (года три назад делал, когда CSS активно изучал).
Ну, и самое интересное. С помощью сборного правила background мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.
Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (в относительном или абсолютном виде). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (9)
Спасибо. Полезно.
Пользуюсь давно Share42. Удобно.
Очепятка 🙂 (надеюсь, что Димокс простив этого возражать не будет)
Здравствуйте!!
Первое — у Вас просто замечательный блог!!!!
Второе — у Вас в коде на css файл походу ошибка там 56px лишние (.rsskt), и тут вначале тоже "что Димокс простив этого "
Третье — дайте больше статье по зачистке кода вордпресс...
Что-то я не пойму, как на сайт созданный на profipages поставить кнопку Одноклассников?
Больше двух часов проковырялся, но все таки установил. Есть конечно некоторые пожелания. А как насчет кнопки ютуба?
для joomla все проще, никакого html рукописного, есть расширение social media links slider
http://extensions.joomla.org/extensions/extension/social-web/social-presence/social-media-links-slider
вот как у меня работает — moibor.ru
Спасибо, замечательный блог. Очень полезный для новичков.
Согласен Насчет Сайта Полезный!!
1. Побольше WordPress побольше инфы
2. А зачем запрещать поисковикам их индексировать
Не помогло, мне с найтройкой WP и установкой кнопок помогли на 5bucks.ru Советую
Здравствуйте, а как сделать, чтобы у пользователя был выбор заходить в соц.сети с сайта через браузер или приложение?