После того, как мы выполнили внутреннюю перелинковку страниц, продолжаем «причесывать» наш сайт. Разберемся как установить кнопки социальных сетей для сайта без плагина.
Добавим кнопки для дружбы в социальных сетях на страницу «Контакты» и «Обо мне». Можете посмотреть, как они выглядит на этих страницах моего сайта. Их можно поставить и в сайтбар — кому как нравится.
Для начала я скачала из интернета изображения кнопок.
.Делюсь информацией: Вы можете скачать кнопки социальных сетей для себя с моей страницы и не тратить времени на их поиск (кликни на кнопке и — она твоя, а размер можно потом откорректировать):
Далее я подробно рассказываю как установить кнопки социальных сетей для сайта без использования плагинов.
Картинки нужно загрузить к себе на сайт обычным способом (вставить медиафайл), назвав соответственно : кнопка Твиттер, кнопка «Вконтакте» и т.д.
Теперь нужно выбрать ссылки на эти картинки. Как определить ссылку (путь к картинке) у меня описано в статье «Простейший слайдер для сайта» (си. ссылку в конце в связанных постах). При просмотре картинки в своей библиотеке ссылка видна в самом низу.
Как правильно настроить одноклассники
У нас шесть картинок — значит должно быть и шесть ссылок. Можно скопировать их в столбик в какой-нибудь вспомогательный файл у себя на компьютере.
Напротив каждой ссылки на картинку поставить соответствующую полную ссылку на Вашу страницу социальной сети:
открываем социальную сеть, клацаем на своем профиле и копируем ссылку из браузера (здесь уже нужен не идентитификатор, как при настройке кнопок в плагине SocialButtons, а полная ссылка).
Получается примерно следующее:
Теперь, когда мы определили все нужные ссылки, нужно у себя на компьютере открыть HTML редактор NVU
Для студентов продвинутого курса «Твой старт» он — в дополнительных материалах, остальным можно скачать редактор из интернета.
Открываем редактор и нажимаем кнопку Изображение
В открывшемся окне заполняем два поля :
Адрес изображения — вставляем первую ссылку на картинку;
Альтернативный текст- вставляем описание кнопки.
Здесь же рядом с адресом есть вкладка Размеры — можно изменить размер кнопок:
И, наконец, открыв вкладку ссылка, — вставляем заранее приготовленную ссылку на страницу социальной сети, на которую должна переключать эта кнопка:
Готово. Аналогичным образом вставляем остальные кнопки- картинки. Их можно центрировать.
Кнопка Одноклассники на сайте
Теперь осталось только получить HTML код, для чего и служит редактор NVU.
Выбираем внизу вкладку КОД и получаем HTML код наших кликабельных кнопок. Выделяем, как показано ниже, копируем и вставляем куда надо в формате HTML
Проверяем работу кнопок . Они должны переключать на нужные страницы социальных сетей. Если этого не происходит, еще раз внимательно читаем статью «Как установить кнопки социальных сетей без плагина» и ищем свою ошибку. Если все сделать правильно получится непременно.
О том, как без всяких редакторов сделать кликабельную кнопку или изображение можно прочитать в статье «Еще раз про кнопки социальных сетей для сайта«, где я открываю секреты всех кнопок своего сайта.
Источник: tvoy-internet.ru
Как добавить на сайт красивые кнопки социальных сетей? Готовые кнопки соцсетей
Кнопки соцсетей – отличный способ продвижения сайта. Пользователи смогут сохранить страничку у себя в соцсети, а вы получите естественные ссылки и дополнительный трафик. Поисковые системы благосклонно относятся к таким социальным сигналам и начинают доверять вашему сайту.
Установить на сайт кнопки социальных сетей можно с помощью плагинов и кодов, предлагаемых различными сервисами. Я же предлагаю установить на сайт чистый код кнопок соцсетей.
Часто вместе с плагинами и кодами сервисов на сайт «заплывают» сторонние ссылки. Это мне всегда не нравилось. Плюс ко всему я сторонница минимального использования плагинов, поскольку, как говорят некоторые гуру, они увеличивают нагрузку на сервер. В общем, если можно что-то сделать без плагина – это обязательно нужно сделать.
План наших дальнейших действий таков:
- закачать картинки кнопок на сайт;
- подготовить код кнопочек;
- записать код кнопок в соответствующем месте шаблона.
Код кнопок «Поделиться в соцсетях»
Вот мой код кнопок соцсетей, размещенный на этом сайте. Вам только нужно поставить свои ссылки на картинки и указать свою rss-ленту.
<div> <a rel=»nofollow» target=»_blank» href=»http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>»><img src=»https://foxyforex.ru/wp-content/uploads/2015/10/VKcrystal.png» width=»80″ height=»80″ title=»Поделиться В Контакте»></a> <a rel=»nofollow» target=»_blank» href=»http://www.odnoklassniki.ru/dk?st.cmd=addSharest.s=1st._surl=<?php the_permalink(); ?>?php the_title(); ?>»><img src=»https://foxyforex.ru/wp-content/uploads/2015/10/ODcrystal.png» width=»80″ height=»80″ title=»В Одноклассники»></a> <a rel=»nofollow» target=»_blank» href=»http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>»><img src=»https://foxyforex.ru/wp-content/uploads/2015/10/MRcrystal.png» width=»80″ height=»80″ title=»Поделиться в Mail.ru»></a> <a rel=»nofollow» target=»_blank» href=»https://twitter.com/intent/tweet?text=RT <?php the_title(); ?>: <?php the_permalink(); ?>» title=»Добавить в Twitter»><img src=»https://foxyforex.ru/wp-content/uploads/2015/10/TWcrystal.png» alt=»Опубликовать в.twitter.com» width=»80″ height=»80″></a> <a rel=»nofollow» target=»_blank» href=»http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>»><img src=»https://foxyforex.ru/wp-content/uploads/2015/10/FBcrystal.png» width=»80″ height=»80″ title=»Поделиться в Facebook»></a> <a rel=»nofollow» target=»_blank» href=»http://feeds.feedburner.com/foxyforexru»> <img src=»https://foxyforex.ru/wp-content/uploads/2015/10/RSScrystal.png» width=»80″ height=»80″ title=»Подписаться!»></a></div>
Кнопки можно менять местами. Достаточно поменять местами их коды.
Что формирует код кнопки?
— ссылка на соцсеть. Свойство target=«blank» открывает ссылку в новом окне, чтобы посетители не уходили с сайта.
— ссылка на иконку соцсети.
Получить адрес ссылок на иконки можно, загрузив картинки по одной на сайт. Ссылка должна иметь примерно такой вид http://название сайта/wp-content/uploads/…/…/iconka.png (или jpeg).
width=«80» height=«80» – ширина и высота картинки. Картинки квадратные, поэтому пропорцию лучше не менять, но можно вместо 80 поставить, скажем, 30.
Title=«Поделиться в …» – отвечает за всплывающую подсказку.
В таком виде кнопочки у меня выстроились в шаблоне в горизонтальную линию. Они лежат в пределах одного дива. Если вы хотите выстроить их в столбик, то заключите код каждой кнопки в отдельный див. Каждому такому диву нужно присвоить класс sharebuttons и прописать в таблице стилей свойства этого класса.
Код вертикально расположенных кнопок:
Код для таблицы стиля style.css:
.sharebuttons
Что означают отдельные элементы этого кода?
float: left – расположение слева. Чтобы было справа напишите float: right
margin: 0px 20px 20px 0px – отступы между кнопками и от кнопочек до элементов снизу. Значения предполагают направления – верх, право, низ, лево. Можно изменить значения своими.
Куда ставить код кнопок соцсетей?
В шаблоне Twenty Eleven нужно открыть в редакторе файл single.php (одна запись).
Если вы хотите, чтобы кнопки соцсетей появились после текста поста и надписи «Запись опубликована автором… в рубрике…», то вставьте код после строки:
Если вы хотите, чтобы кнопки появились перед заголовком статьи, то код можно вставить после строчки:
Если у вас другой шаблон, то действовать придется методом научного тыка. Ориентирами послужат слова get title (для вывода заголовка), get content (для вывода поста).
Для того чтобы разместить кнопки соцсетей на главной странице сайта, нужно прописать их код в файл index.php.
Готовые наборы иконок соцсетей
Выкладываю 5 наборов иконок соцсетей. В каждом наборе кнопки Вконтакте, Одноклассники, Мейл.ру, Твиттер, Фейсбук и кнопка подписки RSS. Впрочем, вы можете использовать и любые другие картинки.
«Хрустальные кубики»
«Старинные книги»
«Осенние листочки»
«Иконки для кулинарного сайта»
«Простые кнопочки соцсетей»
Я удалила из архива кнопочки Я.ру, поскольку этот сервис прекратил свою работу, но на скриншотах кнопочка осталась.
Возможно вас еще заинтересует:
- «Как удалить лишние заголовки из шаблона?»
- «Как красиво оформить заголовки на сайте?»
- «Как красиво оформить списки на сайте?»
Запись опубликована автором Вероника в рубрике Создание сайта с метками CMO, дизайн. Добавьте в закладки постоянную ссылку.
Для отправки комментария вам необходимо авторизоваться.
Источник: foxyforex.ru
Красивые кнопки социальных сетей для сайта
По многочисленным просьбам публикую статью по установке на сайт кнопок «поделиться» в социальных сетях. Конечно, есть множество готовых решений, но большинство имеет серьёзные недостатки.
Один из них — малая гибкость и ограниченный выбор стандартных настроек. Взять к примеру блок Поделиться от Яндекс, с недавних пор зачем-то вместе с социальными кнопками загружается встроенная Метрика… Опять же изменить размер или цвет кнопок довольно проблематично.
Со временем популярные решения обрастают дополнительными функциями, которые не только увеличивают размер подгружаемых скриптов, но и могут содержать вредоносный код.
Наверное многие из вас наслышаны о Pluso, когда наряду с кнопками подгружались сторонние скрипты, воруя трафик и показывая левую рекламу на сайте.
После использования различных вариантов я пришел к мнению, что собственное решение гораздо лучше и сегодня расскажу об этом. Но вначале я рекомендую вам ознакомиться с инструкцией по установке шрифта Font Awesome — он будет задействован в примере.
Устанавливаем свои кнопки «поделиться» в социальных сетях
Онлайн-демо и исходники данного примера вы найдете в конце статьи, а сейчас по порядку приступим к реализации. Сперва убедитесь, что на сайте используется jQuery, в противном случае подключите его, в WordPress это лучше делать через файл functions.php:
function my_jquery() < wp_enqueue_script( ‘jquery’ ); > add_action( ‘wp_enqueue_scripts’, ‘my_jquery’ );
Затем подключите Font Awesome — мы будем использовать векторные иконки социальных сетей вместо изображений. Теперь необходимо вставить HTML основу кнопок в код шаблона:
div id=»share»> div class=»like»>Понравилось? Поделитесь с друзьями! div> div class=»social» data-url=»» data-title=»»> a class=»push facebook» data-id=»fb»>i class=»fa fa-facebook»> i> Facebook a> a class=»push twitter» data-id=»tw»>i class=»fa fa-twitter»> i> Twitter a> a class=»push vkontakte» data-id=»vk»>i class=»fa fa-vk»> i> Вконтакте a> a class=»push ok» data-id=»ok»>i class=»fa fa-odnoklassniki»> i> Одноклассники a> div> div>
В принципе, код универсальный, но в качестве примера я привожу социальные кнопки для WordPress. Здесь ссылка на текущую страницу где расположены кнопки выводится функцией the_permalink() , а заголовок берётся из функции the_title() . В других CMS необходимо заменить эти функции на аналогичные.
С помощью стилей оформим наши кнопочки, зададим цвет фона и текста, добавим эффект при наведении указателя курсора мыши. В style.css добавим следующий код:
#share < width: 100%; border: 1px solid #eaeaea; margin: 0 auto; background: #fff; text-align: center; > .like < font-size: 16px; font-weight: 700; line-height: 50px; > .push < display: inline-block; width: 22%; min-width: 100px; line-height: 40px; margin: 5px 2px 20px 2px; font-size: 15px; text-align: center; color: #fff; cursor: pointer; > .facebook background-color: #4267b2;> .facebook:hover background-color: #365899; color: #fff;> .twitter background-color: #1da1f2;> .twitter:hover background-color: #1a91da; color: #fff;> .vkontakte background-color: #5181b8;> .vkontakte:hover background-color: #5b88bd; color: #fff;> .odnoklassniki background-color: #ee8208;> .odnoklassniki:hover background-color: #ee7808; color: #fff;>
На очереди заключительный шаг — подключение обработчика share.js, его вы найдёте в архиве с исходниками. Для этого в заголовке перед закрывающим тегом вставляем строку, меняя путь к файлу на своём хостинге:
script defer=»» src=»share.js»> script>
На этом всё! Не стесняйтесь оставлять сообщения в комментариях, если вдруг что-то не получается или появились вопросы.
Вот такие современные плоские кнопки социальных сетей я использую на своем блоге, они размещены на каждой странице в конце статьи. Устанавливайте, тестируйте и не забывайте делиться с друзьями!
Источник: webliberty.ru