Здравствуйте, уважаемые читатели блога сайт. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно , да и будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из , о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).
А также я посчитал уместным и по Емайлу.
Создаем спрайт из кнопок и вставляем Html код на сайт
После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про , подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в и .
Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и . Нам такое расточительство не подходит, тем более, что уже давно .
Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).
Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 , поэтому мой спрайт выглядит так ( , правда, туда еще затесался, но это не беда):
Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из . В моем случае он называется sidebar.php. Html код при этом получается крайне простой:
Ну, и самое интересное. С помощью мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.
Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
В этой статье я расскажу вам о нескольких способах, как добавить на сайт кнопки социальных сетей. Из них мне больше всего понравился первый способ — кнопки от сервиса goodshare , поэтому о нем я и расскажу в первую очередь.
Кнопки от GoodShare — для тех, кому нужна свобода в настройке
На сайте сервиса вы точно не потеряетесь. Ровно посередине находится кнопка установки скрипта, по нажатии на нее нам будет предложено 2 варианта. Я рекомендую первый, подключение через CDN. Копируем код и вставляем его куда нибудь в подвал сайта, перед закрывающим тегом body. В wordpress нужно вставить в footer.php.
Отлично, теперь вернитесь на главную страницу сервиса и перейдите на вкладку Документация . Тут вы можете увидеть код всех доступных соц. сетей. Также выше вы можете прочитать о том, что разработчики этих кнопок никак не ограничивают вас — вы можете менять внешний вид кнопок так, как вам угодно.
Это самое главное преимущество сервиса по сравнению с конкурентами, о которых я напишу в этой же статье. Оно заключается в том, что вы сами можете настроить внешний вид иконок так, как нужно вам! Также в качестве преимущества этого способа я хотел бы отметить то, что скрипт не грузит сервер и не влияет отрицательным образом на скорость загрузки страниц, потому что он очень легкий и грузиться из CDN.
Короче, переходим к делу. Там, где вы хотите вывести кнопку соц. сети Вконтакте добавляем следующий код:
Где:
data-type – название соц. сети. Его вы можете посмотреть в документации.
data-counter – счетчик, который считает количество нажатий по кнопке. Возможно, он вам не нужен, тогда можно его попросту не писать. Если почитаете документацию, то увидите, что счетчик поддерживается не везде.
Как оформить кнопки от goodshare?
С помощью css-стилей, конечно же. Сейчас я вам покажу на примере одной кнопки, которая у меня есть. Оформить кнопку очень легко, обратившись к ней по ее data-атрибуту. Для этого нужно знать о селекторах атрибутов. Если вам ничего о них не известно, просто делайте как я покажу, но если хотите разобраться в теме, то вот о них.
Ну а я открою style.css и в самом конце файла опишу стили для кнопки:
Div{ background: #25496F; border-radius: 50%; color: #fff; max-width: 80px; padding: 10px; text-align: center; font-size: 18px; cursor: pointer; }
Как видите, я использовал селектор атрибута, чтобы дотянуться до нее. Отлично. Все стилевые правила объяснять не буду, получилась вот такая штука:
Просто, да? Но ведь и я особо не напрягался, всего лишь прописал пару строк стилей. И ведь никто не мешает вам задать стили для кнопки при наведении на нее или при еще каких-то действиях. Это очень здорово и это то, что вам не дадут сделать при установке кнопок с помощью других сервисов. По крайней мере мне известных.
Тем временем я сделал уже 3 кнопки:
Пускай они немного примитивны, но что мешает сделать их них конфетки? К тому же даже в таком виде они уже уникальны, таких кнопок нет нигде, потому что лично я только что их сделал.
Короче, скрипт от Goodshare для тех, кому нужна свобода в настройке соц. кнопок. Хотите свободы? Получите, распишитесь.
Кнопки от Pluso
Особенная фишка этих кнопок в том, что вы видите только 6 самых популярных соц. сетей, но при нажатии на плюс появляется возможность отправить запись в десятки других, менее известных мест.
На странице сервиса вы можете выбрать один из восьми стилей отображения кнопок, можете выбрать, какие сети показывать в первой строчке, а какие спрятать под плюс. Чуть ниже вы можете дополнительно настроить дизайн.
А еще ниже можно увидеть код, который просто нужно скопировать и вставить в то место на своем сайте, где вы хотите увидеть кнопки от Pluso. Это хорошо, потому что не нужно дополнительно ничего закачивать себе на сервер, все делается очень быстро.
Дополнительно вы можете указать конкретный адрес страницы, которая будет расшариваться. Это нужно очень редко. Дело в том, что по умолчанию при нажатии на кнопку в соц. сеть отправляется адрес той страницы, на которой стоят кнопки. Если же вы укажете конкретный адрес расшариваемой страницы, то где бы эти кнопки у вас ни стояли, они будут отправлять в соц. сеть только 1 страницу, которую вы указали. Я незнаю, для чего это вам. В 99% случаев просто оставьте пустыми эти поля.
Кнопки от Share42
Share 42 — это еще один полезный сервис, который позволит вам установить социальные кнопки на сайт. Чтобы начать установку, перейдите http://share42.com/ru на сайт. Радует, что тут все настройки на одной странице. Вы можете выбрать размер иконок и те из них, которые вам необходимо. Для этого 1 раз кликните по иконке.
На этом скриншоте вы можете увидеть, что я выбрал 6 кнопок для использования. Далее ниже вам нужно выбрать дополнительные опции. В принципе, там все интуитивно понятно. Все те поля и галочки необязательны для заполнения.
Далее сервис предлагает вам посмотреть, как будут выглядеть ваши кнопки, после чего скачать скрипт с ними к себе на компьютер. Этот скрипт надо будет разархивировать. Внутри будет папка share42. Вы должны закинуть ее к себе на сайт. Смотрите сами куда именно. Можно просто в корень, но я рекомендую непосредственно в шаблон.
Теперь вам нужно на сайте сервиса ввести путь к папке, куда вы закинули скрипт. Например, если вы забросили его в шаблон, то путь будет примерно таким:
http://site.name/wp-content/themes/название-шаблона/share42/
Ну это если у вас сайт на wordpress. Кстати, тут же вам сервис предлагает выбрать, какой у вас движок. Выбираем нужный вариант.
После того, как путь к папке со скриптом указан, и cms выбрана, остается скопировать сгенерированный кусок кода и вставить его в том месте, где вы хотите видеть эти самые кнопки. В wordpress, например, наверняка вы захотите добавить их после каждой записи. Для этого переходим в single.php , находим, где заканчивается вывод статьи и вставляем туда код. Теперь кнопки появятся под каждой статьей. Вот так они выглядят в моем случае:
Кнопки социальных сетей на сайт от Яндекса
Один из самых популярных, пожалуй, способов. Переходим по этой ссылке
и попадаем на страницу, где можно установить социальные кнопки. Яндекс сделал все очень удобно — нужные нам сервисы можно легко добавить, пометив их галочкой. Также можно выбрать сам внешний вид кнопок.
У темы, которая у вас установлена, есть список шаблонов. Среди них должен быть single.php , что означает — одиночная запись (пост, статья). Именно в это файл нужно вставить скопированный код. Однако если вы вставите в самое начало, то кнопки будут перед статьей.
Даже если вы не знаете HTML я дам вам подсказку. Если вы планируете вставить кнопки в начале статьи, то найдите в коде шаблона первый блок (div) и вставьте код туда. Хорошо, когда в коде шаблона есть комментарии разработчика. Опирайтесь на них. Например, POST START, CONTENT START, POST END — такие пометки явно показывают, что здесь начинается или заканчивается статья.
Видите в коде "bp_after_post_content"? Тут даже интуитивно понятно, что это уже конец статьи. Именно перед этим фрагментом кода я создал блок, куда и вставил код Яндекс кнопок.
В любом случае, обновляя сайт и смотря на результат вы можете переставить код в другое место в шаблоне, если сделали что-то не так. Единственных минус Яндекс кнопок — скрипты грузятся с интернета, но поскольку они находятся в конце статьи (как правило), то это не критично.
Самый простой способ в WordPress
А как добавить в wordpress социальные кнопки? Плагин Juiz Social Post Sharer может помочь вам в этом. О нем я уже писал в . Кстати, там есть еще один вариант добавления кнопок социальных сетей — API Яндекса.
Что ж, ну а на этом я буду заканчивать. И так получилось около 5-6 способов добавления кнопок, если соединить 2 статьи. Какой-то из них наверняка понравится и вам.
В Интернете, вероятно, не осталось сайтов, на которых бы не были размещены кнопки для постинга материалов в социальные сети. Последние давно и прочно заняли место в наших жизнях. Мы там общаемся, знакомимся, раскручиваем бизнес, читаем новости и прочее. Полный спектр. Неудивительно, что веб-мастера стремятся расширить присутствие своих сайтов в соцсетях любыми доступными методами. Ведь там лежат тонны потенциального траффика, который нужен абсолютно всем. Поток посетителей - это деньги, репутация, рост. Всё строится вокруг него. Лакомый кусок.
Соцкнопки необходимы, это очевидно. Вопрос в другом - какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель - выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.
Выбор лучшего сервиса социальных кнопок
Выбор претендентов для сравнения оказался банален - мы взяли самые популярные сервисы , о которых слышал любой человек, сколь-нибудь близко знакомый с темой создания сайтов. Никаких редких, набирающих популярность, только опытные старички.
Состав команды аттестуемых таков:
В результате тестирования выбранных социальных сервисов – лидером оказался uSocial . Теперь вы желаете получить обоснование нашего выбора. Само собой, голословными не останемся.
Особенности кнопок uSocial
Приведем некоторые факты , убедившие нас в правильности принятого решения.
Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки - от 1 до 5). Все эти данные получены в процессе тестирования.
Надеемся, проведённый анализ смог развеять ваши сомнения в обоснованности нашего выбора. Помимо приятной внешности социальные кнопки от uSocial носят глубокий прикладной характер, являясь довольно мощным инструментом для продвижения любых проектов.
Инструкция как установить кнопки социальных сетей на сайт
Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:
Шаг-1
Шаг-2
Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.
Здесь же можно активировать кнопку "Вверх", включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.
После завершения всех операций вводим адрес своего сайта и жмём на кнопку «Получить код» .
Шаг-3
Копируем код скрипта в появившемся окне. Вставлять код нужно на те страницы вашего ресурса, где необходима панель социальных кнопок. Например, в футер перед закрывающим тегом
Установив и активировав плагин для добавления иконок социальных сетей
, заходим в появившееся новое меню с консоли нашего WordPress - Share Buttons.
/images/vk.png"/>
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows