Отличные кнопки социальных сетей для сайта

Кнопки социальных сетей от uSocial.pro

Быстро глянул исходный код, погуглил и обнаружил авторский сайт — https://usocial.pro, на котором можно было бесплатно залогиниться через соцсети и сгенерировать кнопки основных соцсетей: Вконтакте, Google+, Твиттер, Одноклассники и т.п.

Интерфейс отличный: все на русском, интуитивный, разберется даже школьник. Приятно, когда все продумали до тебя — нет ничего лишнего, в то же время все что требуется 99% сайтам, присутствует и настраивается в два клика.

Особенно порадовала возможность делать именно «плавающие» кнопки соцсетей и при этом выбирать их положение: слева, справа и т.п.

Размещается код стандартно на сайте перед закрывающим тегом </body>, для этого понадобится доступ по FTP и знать, в каком файле у вас находится «подвал сайта», в WordPress это обычно footer.php в папке с шаблоном, уверен, что никаких проблем с добавлением возникнуть ни у кого не должно.

Управление вашими собственными постами в Facebook

Если вы нажмете стрелку вниз в правом верхнем углу одного из ваших собственных сообщений, у вас будет много других вариантов.

Эти параметры позволяют каким-либо образом изменить сообщение, сохранить его, включить уведомления или даже полностью удалить его.

Прямо над сообщением, рядом с вашим именем, вы увидите значок двух человек или глобуса. Нажмите на стрелку, и вы увидите другое окно, подобное приведенному ниже.

Это важный раскрывающийся список, поскольку он позволяет вам установить уровень конфиденциальности ваших сообщений. Для получения дополнительной помощи по защите вашей социальной сети, ознакомьтесь с нашим руководством по конфиденциальности Facebook

Полное руководство по конфиденциальности Facebook

Полное руководство по конфиденциальности FacebookКонфиденциальность на Facebook – сложный зверь. Многие важные настройки скрыты из виду. Вот полный обзор всех настроек конфиденциальности Facebook, о которых вам нужно знать.
Прочитайте больше
,

Это то, на что мало кто обращает внимание, но это может означать разницу между вещами, которые видят только семья и друзья, или весь интернет. Что означают эти значки?

Что означают эти значки?

Глобус (общедоступный): Сделайте свое сообщение видимым для всех в Интернете (используйте с осторожностью!)

Два человека (кроме друзей): Заблокируйте конкретных друзей от просмотра вашего поста.

Один человек (конкретные друзья): Показать свой пост в ленте только для определенных друзей.

Lock (только я): Только вы можете увидеть этот пост. Полезно для публикации важных заметок для себя.

Снаряжение (Custom): Добавьте или удалите друзей или списки друзей, которые могут видеть сообщение.. Как вы можете видеть, очень легко настроить конфиденциальность каждого поста в Facebook

Как вы можете видеть, очень легко настроить конфиденциальность каждого поста в Facebook.

Управление другими постами на Facebook

Последние несколько наиболее распространенных значков отображаются рядом с сообщениями, когда вы нажимаете стрелку вниз в верхнем правом углу окна сообщения.

Это окно появляется с различными параметрами в зависимости от того, где находится сообщение и кто его опубликовал. В приведенном выше примере пост был опубликован кем-то другим и отображается на моей временной шкале.

• Закладка (Сохранить сообщение): Сохраняет сообщение в ваш список сохраненных элементов.
• Коробка с крестиком (Скрыть сообщение): Сообщает алгоритму Facebook, что вам не нравится этот пост или другие посты, как он.
• Значок часов (Повтор): Позволяет замолчать любое сообщение от человека, группы или страницы в течение ограниченного времени.
• Комментарий с восклицательным знаком (Оставить отзыв на этот пост): Сообщите об этом в Facebook по любой причине.

Некоторые другие вещи, которые вы можете сделать с отдельными сообщениями, это включить уведомления для комментариев (значок колокольчика) или встроить сообщение, используя код для встраивания (значок конечного тега HTML).

Воробышек

Устанавливая социальные кнопки для сайта, не следует «гнаться» за количеством — лучше учитывать популярность соцсетей. Например, установка кнопки соцсети «My Space», популярной на Западе и практически неизвестной на наших просторах, не приведет к желаемому результату.

А вот если среди потенциальной целевой аудитории сайта много пользователей «Твиттера», нужно обязательно установить любую из его кнопок.

Настройка кнопки проста до безобразия. Радует также русскоязычная инструкция на странице настроек. Однако генератор кода учитывает довольно мало вариантов оформления счетчика, поэтому, если не устроят стандартные предложения, часть кода придется прописывать вручную.

Добавляем на сайт кнопку Google+

Из скриншота видно, что имеется возможность настроить внешний вид кнопки на Ваше личное предпочтение. Например, можно задать размер кнопки, выбрать язык. Так же есть расширенные настройки, но их совсем необязательно трогать, поскольку и так все будет работать на отлично.

После проведения необходимых настроек, скопируйте код кнопки и разместите на сайт в том месте, где нужно вывести кнопку google +1. Код должен быть примерно таким:

Вторую часть кода желательно поместить в самый конец страницы, однако я иногда пренебрегаю этим требованием и размещаю его там же где и выводится кнопка (хотя это неправильно).

В конце отмечу важность Google+1: дело в том, что в некоторых случаях количество плюсов учитывается при ранжировании сайтов в Google. Поэтому советую Вам набирать побольше плюсиков

Накручивать их не надо, поскольку подобные манипуляции легко отслеживаются и ничего хорошего от этого не будет, кроме большой цифры на счетчике. Более подробно про эту кнопку читайте в статье: обзор Google+ и кнопка Google +1.

Почему кнопки соцсетей для сайта так важны?

соцсети

Я думаю, что Вы уже и сами знаете зачем нужны сайту социальные кнопки? А те, кто не знает этого или еще сомневается в том. чтобы поставить их, то давайте разберемся с этим вопросом раз и навсегда!

Для этого и существуют социальные кнопки на сайте, чтобы человек быстро и без потери своего драгоценного времени, просто взял нажал на нужную ему социальную кнопку и отправил ваш материал всем своим друзьям например Вконтакте или в Одноклассниках одним разом!

Также здесь есть и выгода для Вас, уважаемый владелец сайта, на котором расположены социальные кнопки. Вы спросите, какая? Отвечу Вам! Ведь кнопки социальных сетей на сайте — это бесплатная и очень эффективная реклама вашего ресурса. Вы только представьте себе, что каждый зашедший на ваш сайт посетитель, кликнет по любой из социальных кнопок и отправит вашу ссылку на материал в какую либо из соцсетей своим друзьям, а они в свое время поделятся ей с другими пользователями соцсетей и так далее … Чувствуете какой размах и объем рекламы вашего сайта получается?!

Вот и весь секрет, который нужно знать, чтобы уже наконец решиться поставить кнопки соцсетей для сайта у себя на ресурсе!

Теперь переходим к следующему важному вопросу …

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

1. Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.

Скорость загрузки

А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в css спрайты. Все стили сведены к минимуму. Плюс простой каркас html.

1. Способ, который я предлагаю, не содержит ни одной внешней ссылки. Нет, ссылки есть, но они все будут, как внутренние ссылки. При желании вы всегда можете их закрыть через скрипт. И тогда их вообще не будет видно.

Нет внешних ссылок

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Зачем добавлять кнопки соцсетей для сайта?

Данные кнопки имеют несколько преимуществ как для продвижения сайта, так и для удобства пользования.

Преимущества таких кнопок:

1. Бесплатная реклама вашей статьи.
2. Привлечение дополнительного трафика на сайт.
3. Удобство для пользователя. Так он сможет сделать закладку у себя в соцсети на понравившийся материал и, например, прочитать позже.
4. Увеличение ссылок на сайт и поведенческие факторы. (Для SEO)

В общем, одни плюсы и никаких минусов. Принцип действия таков: человек прочитал вашу статью, и она ему очень понравилась, этот человек нажимает вашу кнопку, например, чтобы оставить её у себя на стене и перечитать потом.

Или он этой статьёй захочет поделиться с друзьями или больше того, в какой то группе. Ваш читатель рекламирует ваш сайт, бесплатно и очень эффективно, он рекомендует, а к рекомендациям относятся намного лучше, чем к рекламе.

Я думаю не стоит объяснять, что статья должна быть интересной, а главное, полезной читателю, иначе никто нажимать на кнопки соцсетей для сайта не будет.

С полезностью и преимуществом этих кнопок разобрались. Перейдём к способам их установки. Их, этих способов, скажем, не мало, но ориентируюсь на новичков, а значит, скрипты и уж тем более редактирование кодов задевать не будем. Максимум простоты.

Куда вставлять код?

Если вы хотите чтобы эти кнопку выводились под текстом статей, то данный код вам нужно будет вставить в шаблон single.php где то в самом конце.
Если нужно вывести эти кнопки на всех страницах сайта, то кроме single.php нужно вставить код и в шаблон page.php
Внимание! Возможно при добавлении в эти файлы кнопки соцсетей могут высветиться не в том месте, где вам нужно или не высветиться вообще. Здесь всё зависит от особенностей вашей темы и её структуры

В таком случае нужно будет поэкспериментировать с добавлением кода в другие части шаблона single.php и page.php.

Для вывода социальных кнопок в подвале сайта или как плавающую вертикальную панель – вставляем предложенный код в файл footer.php вашей темы.
Для того чтобы открыть эти файлы подключаемся к сайту по ftp и заходим в папку:
wp-content – thems – папка с названием вашей темы.

Для того чтобы выровнять эти кнопки по центру страницы нужно в файл style.css вашей темы прописать:

XHTML

.share42init{
text-align:center;
margin-top:20px;
}

1
2
3
4
5

.share42init{

text-aligncenter;

margin-top20px;

}

Все готово! Что получиться, вы можете увидеть в конце статьи

Как создать фиксированную социальную панель

Шаг 1) добавить HTML:

Пример

<!— Load font awesome icons —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><!— The social media icon bar —><div class=»icon-bar»>  <a href=»#» class=»facebook»><i class=»fa
fa-facebook»></i></a>   <a href=»#» class=»twitter»><i class=»fa fa-twitter»></i></a>
  <a href=»#» class=»google»><i class=»fa fa-google»></i></a>  
<a href=»#» class=»linkedin»><i class=»fa fa-linkedin»></i></a>  <a
href=»#» class=»youtube»><i class=»fa fa-youtube»></i></a> </div>

Шаг 2) добавить CSS:

Пример

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen)
*/.icon-bar {  position: fixed;  top: 50%;  -webkit-transform:
translateY(-50%);  -ms-transform: translateY(-50%); 
transform: translateY(-50%);}/* Style the icon bar links */
.icon-bar a {  display: block; 
text-align: center;  padding: 16px;  transition: all 0.3s
ease;  color: white;  font-size: 20px;}/* Style
the social media icons with color, if you want */.icon-bar a:hover { 
background-color: #000;}.facebook {  background: #3B5998; 
color: white;}.twitter {  background: #55ACEE; 
color: white;}.google {  background: #dd4b39;  color: white;}.linkedin
{  background: #007bb5;  color: white;}.youtube { 
background: #bb0000;  color: white;}

Совет: Перейдите в наш CSS положение учебник, чтобы узнать больше о позиционировании.

❮ Назад
Дальше ❯

Для чего нужны кнопки социальных сетей?

На сегодняшний день социальные сети стали неотъемлемой частью большинства пользователей сети интернет и люди активно ими пользуются для того, чтобы общаться со своими друзьями и знакомыми. Наличие этих кнопок стимулирует пользователей рассказать о заинтересовавшей их информации. Но это ещё не всё!

Социальные сети играют немаловажную роль в поисковом продвижении:

Таким образом это дает вам дополнительные возможности по привлечению и взаимодействию с посетителями, а также дает возможность распространять контент в нескольких соцсетях, помогающих для привлечения трафика на ваш интернет-ресурс.

Чем больше делятся вашим контентом, тем больше людей с ним ознакомятся и тем больше можно получить новых уникальных посетителей.

Лирическое отступление

Социальные сети из невинной забавы и способа общения бывших и настоящих школьников превратились в мощный инструмент добычи трафика. Теперь соцсеть – это не только общение. Можно сказать, это отдельная категория СМИ, в которой происходит постоянное движение информации.

Естественно, что эта информация редко бывает уникальной — в основном, она представлена в виде ссылок на заинтересовавшие конкретного пользователя ресурсы. Предоставляют эти ссылки именно кнопки социальных сетей, на которые пользователь нажимает, чтобы поделиться информацией с друзьями.

Одно нажатие на социальную кнопку может привести к существенному притоку на сайт гостей из социальных сетей — при условии, что информация на странице будет действительно актуальной, полезной и интересной. Исходя из этого, следует подумать, как установить кнопки социальных сетей на собственный сайт.

Как уже стало понятно, кнопка — это ни что иное, как ссылка, ведущая на скрипт публикации в соцсети. Все популярные социальные сети пошли навстречу владельцам сайтов, предоставив им уже готовые варианты кнопок для установки. Все что нужно — скопировать готовый HTML-код, предоставляемый «социалкой» и скопировать его в исходный код своей страницы.

Добавляем кнопки с помощью плагина

Плагинов для вывода кнопок соцсетей великое множество, можете поискать сами. Я посоветую отличный плагин с простой, но функциональной настройкой Juiz Social Post Sharer.

Установить его просто: В консоли вашего сайта выбираем «плагины», «добавить новый» 

Далее, в поисковой строке плагинов вводим Juiz Social Post Sharer , можете скопировать название отсюда, чтобы не перепутать, и выбираем тот, который слева. Как видим, 10000 установок, очень даже неплохо и совместим с нашей версией Вордпресс.

Затем нажимаем «установить», далее «активировать» (у меня на скриншоте «активен», т.к я его уже установил). Отлично, переходим к настройке и здесь ничего сложного.

Попадаем на страницу настройки

Выбирайте понравившийся вам стиль, я выбрал первый, жмём «сохранить изменения», идём дальше

Выбирайте социальные сети, которые хотите отображать, поставив напротив них галочку.

Выбираете, где хотите отображать кнопки. Ну и дополнительные настройки, разберётся даже новичок.

Нажимаем сохранить изменения и смотрим, что получилось.

Вот такие симпатичные кнопочки отлично вписываются в дизайн моего блога, при нажатии появляется название социальной сети, в общем, вам должно понравиться, а главное, всё предельно просто, согласны?

Но всё-таки, я бы оставил место для более важного плагина, тем более второй способ, хоть и сложнее, но всё же простой

Инструкция как установить кнопки социальных сетей на сайт

Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:

Шаг-2

Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.

внешнего вида«Поделиться»

Здесь же можно активировать кнопку «Вверх», включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

Очень полезной выглядит функция Eye-Catcher — «Ловушка для глаз», призывающая пользователя поделиться страницей в соцсетях.

После завершения всех операций вводим адрес своего сайта и жмём на кнопку «Получить код».

Шаг-3

Копируем код скрипта в появившемся окне. Вставлять код нужно на те страницы вашего ресурса, где необходима панель социальных кнопок. Например, в футер перед закрывающим тегом </body>.

Шаг-4

После установки соцбара из личного кабинета uSocial можно просматривать статистку лайков и репостов за выбранный период как сразу по всем социальным сетям, так и по выбранным. Данные отображаются в виде понятных графиков или диаграмм.

В личном кабинете uSocial будут храниться все созданные наборы и статистика для сайтов, к которым они были прикреплены. В любое время можно переключаться между сайтами и анализировать полученные со счётчиков данные.

Как добавить панель социальных кнопок?

Сегодня мы рассмотрим способы добавления панели соц. сетей для сайта на WordPress с русскими социальными сетями.

Это можно сделать двумя наиболее распространенными способами:

• Первый способ — с помощью онлайн-сервисов, таких как: Share42, AddThis, ShareThis, Pluso.

  Для этого вам, нужно всего лишь, выбрать необходимые параметры панели, после чего, добавить сгенерированный код в шаблон страницы. Этот вариант очень удобен особенно для тех, кто не хочет перегружать свой сайт плагинами.

• Второй способ — использовать специальные плагины. Их, конечно же, большое множество. Вот одни из наиболее распространенных: Fixed Social buttons, Simple Social Buttons, Social Share Buttons for WordPress, UpToLike, Socialize It!

  Использование плагина удобно тем, что, когда угодно, можно отключить или добавить новые кнопки без необходимости для этого копаться в коде.

Поэтапные шаги

По быстрому анализу причин пробежались, а теперь более подробно, как понять в чем проблема. Собственно говоря, есть несколько способов.

Проверка индикаторов

Если питание поступает, есть Интернет, модуль ВайФай активирован, то на передней панели будет светиться индикатор, отвечающий за работу всего устройства. Но если это не так?

Тут все просто. Нажимаем кнопку питания и смотрим: загорелись ли индикаторы на передней панели и какие именно. Если светодиод Wi-Fi не горит, то не будет работать и вся сеть. Не лишним будет перечитать инструкцию к прибору — может что-то упущено.

Теперь рассмотрим, как проверить сам ВайФай роутер работает или нет, в случае если светодиод все-таки светится. Для этого необходимо выполнить следующие действия:

• Выключаем устройство минут на пять и снова включаем. Если сетевой индикатор не горит, то проверяем на повреждение провод, входящий в квартиру.
• Попробовать подключиться с другого устройства к этому маршрутизатору или по беспроводному протоколу, или с помощью кабельного подключения.
• Также вспомогательные устройства — ноутбук или смартфон — помогут увидеть: есть ли сигнал от радиомодуля модема или нет.
• Проверить включен ли радиомодуль в самом девайсе. Здесь надо войти в оболочку маршрутизатора через любой веб-браузер, напечатав IP-адрес прибора в поисковой строке. Попадаем на вкладку «Состояние» и там должна быть активирована строка «Беспроводное вещание: Включено».

Примечание: IP-адрес определяем на наклейке прибора с обратной стороны.

Как добавить/установить кнопки соцсетей на сайт WordPress без плагина?

Зайдите на страницу конструктора блока Поделиться — https://tech.yandex.ru/share/. Выберите сервисы социальных сетей (их довольно много), иконки которых будут отображаться на вашем веб-ресурсе и внешний вид блока:

Затем, копируете код и заходите в админпанели Внешний вид — Редактор тем. Открываете файл Отдельная запись (single.php) или в зависимости от вашей темы файл loop-single.php, content.php. Находим строчку <?php the_content(); ?> или похожею на неё и чуть ниже вставляем код соцкнопок. Обновляем файл. Кнопки будут расположены под каждым сообщением. Если не получается, то можно ориентироваться на код <?php comments_template(); ?> (форма комментариев) в файле Одна запись. Выше данной строчки добавляем скрипт соцкнопок.

Для того, чтобы иконки кнопок выравнять по центру, то оберните скрипт в теги <center>….</center>. Получится вот так:

Блок Поделиться после статьи

Таким же методом, можно добавить после статьи код рекламы РСЯ, ADSENSE или Рекомедуемый контент адсенсе

Обратите внимание что, после обновления вашей темы вам придётся вставлять код кнопок заново. Если у вас, друзья, не получается вывести блок кнопок на станицах записей, то советую воспользоваться плагином автоматического вывода блока «Яндекс.Поделиться» в WordPress

Во, вспомнил. У Рамблер тоже есть конструктор кнопок соцсетей и там больше настроек. Кнопки подходят для десктопной и мобильной версии сайта. Как выглядят соцкнопки, вы решаете сами. Настраивайте цвет, форму, размер и шрифт текста и иконок на кнопках или установите стандартный набор.

Конструктор кнопок соцсетей для сайта

Читайте о Рамблер / лайки здесь.

Плагин Easy Yandex Share

Вы можете настроить и добавить блок Поделиться на свой сайт с помощью Yandex Share.

Плагин Яндекс. Поделиться

Установка плагина стандартная, через админку. Плагины — Добавить новый. В поле поиска вводим Easy Yandex Share, устанавливаем и активируем. А далее переходим к его настройке. Продвинутый вывод блока Яндекс.Поделиться с кучей дополнительных настроек.

Настройки плагина Easy Yandex Share

После того, как вы активируйте плагин в разделе Настройки появится новый пункт — Easy Yandex Share. Нажимаете на него и приступаете к настройкам блока Поделится в соцсетях. Модуль на русском языке, всё будет вам понятно. Здесь, больше настроек, чем в конструкторе Яндекс:

Настройки плагина Easy Yandex Share

Также выбираете соцсети (есть предпросмотр), внешний вид. Вывод блока соцкнопок до или после записи. Даже возможен вывод иконок соцсетей вертикально. Ещё хорошо — надпись к кнопкам можно свою написать. Так выглядит блок после статьи:

Блок Поделиться Яндекс после записи

Как увеличить КПД соцбара?

Само по себе размещение кнопок социальных сетей, безусловно, важно, но для повышения эффективности их работы желательно сделать микроразметку под них. Что это такое?. Если при репостинге материала отображается не та картинка и описание, можно вручную посредством специальных мета-тегов, понятных всем социальным сетям, указать на то, что, сколько и как должно отображаться

Если этого не сделать, то в социалках могут отображаться рандомные картинки и описания. Вряд ли вам это нужно

Если при репостинге материала отображается не та картинка и описание, можно вручную посредством специальных мета-тегов, понятных всем социальным сетям, указать на то, что, сколько и как должно отображаться. Если этого не сделать, то в социалках могут отображаться рандомные картинки и описания. Вряд ли вам это нужно.

При корректном заполнении социальных мета-тегов записи будут правильно восприниматься социальными сервисами, ибо в них указан тип материала, релевантный заголовок, ссылка на нужную картинку. Всё это повышает эффективность от репостинга: ваш материал корректно проиндексируется социальными сервисами.
 
Примеры кода микроразметки для популярных социальных сетей (код нужно прописывать перед тегом </head>):

1. и используют Open Graph protocol: 

<meta property=»og:title» content=»Название страницы»/> 
<meta property=»og:description» content=»Описание»/> 
<meta property=»og:image» content=»http://www.site.com/logo.png» />
<meta property=»og:url» content=»http://www.site.com»/> 
<meta property=»og:site_name» content=»Название сайта»/>

3. Для код выглядит так:

<meta name=»twitter:site» content=»Название сайта»/> 
<meta name=»twitter:title» content=»Название страницы»> 
<meta name=»twitter:description» content=»Описание»/> 

4. Для так:

<link rel=»author» href=»https://plus.google.com/Blogger777/»> — cсылка на профиль автора в Google+
<link rel=»publisher» href=»https://plus.google.com/+ScotchIo/»> — название сайта
<meta itemprop=»name» content=»Блог о разведении слоников»> — текст сниппета (до 40 символов)
<meta itemprop=»description» content=»Описание сайта»> — описание сайта
<meta itemprop=»image» content=»http://site.ru/pic/img.jpg»> — путь к файлу изображения

Инструменты для работы с микроразметкой:

Как видите, процесс добавления микроразметки под социалки технически несложен, но требует внимательности.

Коды HTML для добавления кнопки соцсетей на сайте

Социальные виджеты добавляются на веб-ресурс через код HTML конкретной соцсети.

• <div class=»social youtube»>

  <a href=»#» target=»_blank»><i class=»fa fa-youtube fa-2x»></i></a>

  </div>

• <div class=»social twitter»>

  <a href=»#» target=»_blank»><i class=»fa fa-twitter fa-2x»></i></a>

  </div>

• <div class=»social instagram»>

  <a href=»#» target=»_blank»><i class=»fa fa-instagram fa-2x»></i></a>

  </div>

• <div class=»social facebook»>

  <a href=»#» target=»_blank»><i class=»fa fa-facebook fa-2x»></i></a>

  </div>

• <div class=»social skype»>

  <a href=»#» target=»_blank»><i class=»fa fa-skype fa-2x»></i></a>

  </div>

  Подробнее

• <div class=»social vk»>

  <a href=»#» target=»_blank»><i class=»fa fa-vk fa-2x»></i></a>

  </div>

• <div class=»social odnoklassniki»>

  <a href=»#» target=»_blank»><i class=»fa fa-odnoklassniki fa-2x»></i></a>

  </div>

• <div class=»social pinterest»>

  <a href=»#» target=»_blank»><i class=»fa fa-pinterest fa-2x»></i></a>

  </div>

• <div class=»social telegram»>

  <a href=»#» target=»_blank»><i class=»fa fa-paper-plane fa-2x»></i></a>

  </div>

• <div class=»social whatsapp»>

  <a href=»#» target=»_blank»><i class=»fa fa-whatsapp fa-2x»></i></a>

  </div>

Если ваши знания в области HTML оставляют желать лучшего или вообще нулевые, то можно воспользоваться следующим алгоритмом:

Код виджета конкретной социальной сети включает три строчки. Начало строки —

. Класс открывающегося тега divвключает англоязычные наименования социальных сетей. Те кнопки, которые не потребуются, мы смело удаляем. Необходимые кнопки сортируем в желаемой последовательности. Вставляем ссылку на аккаунт, группу или страницу в социальной сети. Для этого следует вместо символа # в атрибуте hrefвключить ссылку на соцсетьОбратим внимание на двойную кавычку, которая стоит перед ссылкой и в ее конце, — ее не удаляем!

Зачем нужны социальные кнопки на сайте?

Социальные сети прочно вторглись в нашу жизнь. На данный момент 85% активных онлайн пользователей зарегистрированы хотя бы в одной социальной сети. Люди с удовольствием делятся полезной информацией в своих профилях.

Добавляя в статью социальную кнопку, вы упрощаете работу пользователю – поделиться вашей статьей. Ссылка на статью попавшую в социальную сеть открывается множеством пользователей, и вы получаете существенный трафик из социальных сетей и улучшаете ранжирование. Все очень здоров и прекрасно. В интернете множество обзоров о необходимости установки соц.иконок, уроков по установке социальных кнопок.

Появилось множество сервисов для генерации кода вставки необходимых иконок для вашего сайта, например, от яндекса.

Но на практике все оказалось не так лучезарно, как в теории.

Кнопки Поделиться в анонсах на главной и страницах рубрик

Для этого надо добавить дополнительную функцию

Но проще, вывести такие кнопки добавив нужный код в файл и

Всегда ваш, Артем.

Темы оформления

В некоторых шаблонах для WordPress кнопки социальных сетей уже предусмотрены. Это могут быть как бесплатные темы из каталога, так и премиум-версии из магазинов. Если вы найдете такую тему, вам не придется дополнительно устанавливать плагины или размещать какой-то код.

Если вы только продумываете создание своего проекта, не лишним будет заглянуть в магазин шаблонов и поискать там варианты с социальными кнопками.

Если вы так и не определились, то я могу посоветовать вам тему Root. В ней как раз есть все функции для создания крутого информационного проекта и кнопки социальных сетей в их числе.

Также для поиска тем с кнопками вы можете зайти в магазин шаблонов ThemeForest. Почти все самые популярные шаблоны имеют такой функционал.

Как установить кнопки соцсетей на сайт самому?

установить кнопки соцсетей

Все довольно просто на самом деле! И в установке социальных кнопок на сайт ничего сложного нет. Вам нужно зайти на сервис, который Вы уже выбрали заранее и решили использовать именно его код социальных кнопок. Затем выберите для себя те кнопки, которые важны для Вас и вашего ресурса. Обычно это самые популярные социальные сети, такие как: Вконтакте или VK, Одноклассники, Facebook, Twitter, Youtube. Это самые важные социальные сети, где ваш сайт сможет быстро найти своих поклонников и постоянных читателей, а остальные соц сети на ваш выбор.

После того, как социальные сети вами выбраны и код их сформирован сервисом. Вам нужно скопировать предоставленный код соц кнопок и установить его на своем сайте в нужном месте. Это может быть сайдбар, вначале и вконце статьи, да где угодно. Главное учтите то, чтобы установленные кнопки социальных сетей не мешали вашему контенту и вашим посетителям. Это очень важный момент!

Некоторые вебмастера используют специальные плагины для расположения социальных кнопок у себя на сайтах. Но я не сторонник данного вида размещения соц кнопок на сайте и Вам не советую пользоваться плагинами! Так как плагин, какой бы он ни был легкий, быстрый и удобный, он все же тормозит загрузку вашего сайта!

Вот собственно и все на сегодня!

Всем спасибо за внимание и терпение! Всем удачи и процветания! До новых встреч!

Выводы

Мы задались целью и протестировали вдоль и впоперек 5 известных популярных сервисов для добавления на сайты социальных кнопок. Все они в той или иной мере хороши, но по ряду признаков победителем сравнения был признан Юсошиал. Именно его мы используем на своем сайте и рекомендуем всем!

uSocial – продвинутый и эффективный конструктор для сборки и добавления соцкнопкок на любые сайты. Процесс создания виджета занимает не более 5 минут. Результат получается весьма приятным, а главное – функциональным! Вы сможете просматривать подробную статистику и оптимизировать сайт в соответствии с полученной информацией. Кроме того, соцбар стильно смотрится и качественно собран: чистый код, легковесный, быстрозагружаемый. Никаких лагов или сбоев – панель работает как часы. Выбор редакции в этой категории, в общем.