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

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

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

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

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

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

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

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

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

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

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

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

Другие варианты получения кнопок соцсетей для сайта

Как я уже говорил, всевозможных онлайн-сервисов, где можно бесплатно взять скрипт кнопок социальных сетей и поставить к себе на сайт много. Все они преследуют разные цели: «от души» (как в случае сервиса Димокса), для сбора данных нужных для работы других сервисов (как в случае с АпТуЛайк) или для наживы (вирусы и прочие незаконные махинации с имеющимся у вас на сайте трафиком). Есть и просто платные решения, например, как упомянутый ниже плагин.

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

1. Довольно давно я описывал потрясающий конструктор Share42 от известного многим Димокса. Он позволяет создавать как горизонтальные блоки с кнопками соцсетей, так и вертикальную плавающую панель, которую очень легко настроить и позиционировать на странице.
2. Чуть позже мы говорили про онлайн-сервис UpToLike, который кроме удобного конструктора предоставляет возможность на манер Яндекса отслеживать статистику кликов по различным кнопкам блока, а также имеет дополнительные возможности, такие как расшаривание любой цитаты из текста или предложение стать вашим фоловером после расшаривания.

3. Относительно недавно я купил плагин для Вордпресс под названием Easy Social Share Buttons , который по описанию мне показался очень даже прикольным (да и на других популярных сайтах я его неоднократно встречал (например, в новостном разделе Серча именно он используется для расшаривания).

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

В общем, сами смотрите, сравнивайте и выбирайте.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

2 нюанса расположения кнопки соцсетей на сайте

1. Продумываем расположение

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

   Чаще всего социальные виджеты ставят в начале или в конце статьи, а также в sidebar. Можно протестировать разные варианты расположения и решить, какое будет оптимальным для конкретного веб-ресурса.

Кнопки социальных сетей должны выглядеть определенным образом:

быть заметными на фоне сайта, но не оттягивающими внимание пользователей на себя; логотипы социальных сетей должны быть идентифицируемыми, даже если они видоизменены исходя из общей стилистики веб-ресурса; использование минимальных анимационных эффектов в виде, например, плавного изменения цвета при наведении курсора, но никак не навязчивое мигание или неожиданное выскакивание; применение не более пяти — семи социальных кнопок с учетом целевой аудитории сайта (в России обычно пользуются YouTube, Instagram, «ВКонтакте», «Одноклассниками», Facebook, мессенджерами Viber и WhatsApp); ссылки на социальные сети должны работать с учетом того, что, к примеру, ссылку на Google+ могут открыть только корпоративные пользователи из-за закрытой соцсети, а в переживший цепь блокировок Telegram не всегда получается беспроблемно войти; быть удобного для клика размера: оптимально от 10 на 10 пикселей до 40 на 40 пикселей, то есть не слишком маленькие и в то же время заметные, такие, на которые удобно нажимать, не задевая соседние кнопки

Минусы кнопки соцсетей для сайта

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

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

Подробнее

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

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

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

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

Шаг-2

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

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

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

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

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

Шаг-3

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

Шаг-4

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

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

Блок поделиться для сайта с помощью сервиса UptoLike

Для всех тех, кто не хочет устанавливать на свой сайт множество плагинов, можно воспользоваться специальным сервисом для вывода кнопок поделиться для Facebook, Вконтакте, Одноклассники, Инстаграм и других популярных социальных сетей на своем сайте.

Преимущества сервиса:

• быстрая настройка;
• множество разнообразных соц сетей, на данный момент их более 25;
• адаптивность для мобильных версий сайта;
• гибкие настройки дизайна кнопок и выбор места расположения;
• Сервис полностью бесплатный.

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

Ставим кнопки поделиться для сайта:

1. Заходим на сайт uptolike.ru и выполняем простейшую регистрацию.

Регистрацию, можно будет пройти и после создания блока кнопок соц. сетей.

1. Теперь жмем «создать проект» и выбираем интересующий нас, в нашем случае — это «поделиться».

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

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

Если сайт адаптивный, то ставим галочку в соответствующем чек-боксе, в противном случае — ненужно.

1. В конце, после настроек всех пунктов жмем «сгенерировать код».

1. На выходе копируем получившейся код (нажимаем на него левой кнопкой мыши, таким образом он выделяется и копируем код при помощи комбинации клавиш Ctrl+c).

1. Чтобы добавить кнопки поделиться в соц сетях для сайта wordpress нужно код вставить в файл Single.php. На некоторых сайтах, как например на моем, нужно вставить в content-single.php.

Важно! перед тем, как вставить код, сделайте резервную копию сайта, или просто скопируйте файл, в который будите вносить изменения, себе на компьютер, чтобы в случае, если что поломаете, вы смогли быстро все исправить. Добавляйте код после закрывающего тега ?> php, иначе можно нарушить код и сайт будет отображаться не правильно

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

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

Я поставил код перед открытием тега footer.

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

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

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

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

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

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

Шаг 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 положение учебник, чтобы узнать больше о позиционировании.

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

Простые символы Facebook

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

• Одним из самых узнаваемых изображений, которые являются основой бренда Facebook, является знаменитый значок «Нравится». Вам может понравиться обновление статуса, цитата, ссылка, изображение или что-то еще. Просто нажмите на это изображение, и пусть все знают.
• В верхней части домашней страницы Facebook вы увидите три темных значка. Изображение колокольчика представляет ваш список уведомлений о последних обновлениях от ваших друзей, а также ваши любимые страницы и группы.
• Нажмите на этот маленький значок пузыря беседы, и вы увидите выпадающий список, отображающий последние полученные вами сообщения Facebook.
• Последнее изображение вверху главной страницы – это значок запроса на добавление в друзья. Нажмите на это, и если у вас есть какие-либо новые запросы на добавление в друзья, они будут отображаться в раскрывающемся списке.

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

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

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

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

Другие символы Facebook

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

Если вы нажмете на вкладку «Главная», под своим именем вы увидите четыре значка в левой панели навигации.

Это основные области навигации Facebook.

• Новостная лента: Это часто обновляемая лента сообщений ваших друзей, которую вы просматриваете каждый день.
• Messenger: Перенаправляет вас в зону чата Facebook, где вы можете общаться с друзьями.
• Часы: Перейдите на страницу потокового видео в Facebook.
• Рынок: Посетите местный рынок Facebook, чтобы покупать и продавать товары.

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

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

В этой области навигации вы найдете следующие символы Facebook:

• События: Создать события Facebook

  Как создавать события на Facebook

  Как создавать события на Facebook

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

• Группы: Публичные или частные группы других пользователей Facebook, которые разделяют ваши интересы.
• Страницы: Страницы Facebook, посвященные бизнесу или публичному человеку.
• Фандрайзеры: Создайте или рекламируйте сбор средств для ваших друзей.
• Списки друзей: Создавайте списки, чтобы организовать группы друзей, с которыми можно делиться сообщениями.
• Воспоминания: Просматривайте и публикуйте обновления Facebook много лет назад.
• Управление приложениями: Здесь разработчики могут создавать и управлять приложениями, которые интегрируются с Facebook.
• Игры: Играйте в игры на Facebook с друзьями.
• Менеджер объявлений: Покупайте или управляйте своими объявлениями на Facebook.
• Предложения: Найдите специальные скидки и акции.
• Живое видео: Ознакомьтесь с последними видео в Facebook, опубликованными пользователями Facebook.
• Заметки: Напишите полнометражные сообщения (например, сообщения в блоге) и посмотрите, что написали друзья.
• Недавняя рекламная активность: Просмотреть все объявления, на которые вы нажали или просмотрели недавно.
• Фильмы: Смотрите расписание для фильмов рядом с вами, и купить билеты без сборов.
• Messenger Kids: Специальная зона обмена сообщениями для детей со встроенным родительским контролем.

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

В этой области вы можете изучить любую из следующих областей Facebook:

Разве ты не понимаешь, что ты так много можешь сделать на Facebook?

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

Еще один отличный способ изучить все, что доступно в Facebook, это просто начать поиск. Есть много разных способов сделать это. Отличное место для начала – наше простое руководство, заполненное советами по поиску в Facebook.

7 советов по поиску в Facebook, чтобы найти то, что вы ищете

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

Изображение предоставлено: rvlsoft / Shutterstock

Узнайте больше о: Facebook,.

Подключение стилей 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.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll 0px 0px transparent;}

.share a.vkontakte {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -168px 0px transparent;
}
.share a.google {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -252px 0px transparent;
}
.share a.livejournal {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -336px 0px transparent;
}
.share a.twitter {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -42px 0px transparent;
}
.share a.mail {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -294px 0px transparent;
}
.share a.odnoklassniki {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -126px 0px transparent;
}
.share a.pinterest {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -210px 0px transparent;
}
.share a.liveinternet {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -378px 0px transparent;
}
.share a.evernote {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -420px 0px transparent;
}
.share a.bookmark {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -462px 0px transparent;
}
.share a.email {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -504px 0px transparent;
}
.share a.print {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -546px 0px transparent;
}
.share a.digg {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -588px 0px transparent;
}
.share a.spring {
background: url("http://test.1zaicev.ru/wp-content/uploads/2015/04/soc_icon.png") no-repeat scroll -630px 0px transparent;
}

Пояснения по коду: класс .share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.

На этом весь процесс создания своего блока социальных кнопок – закончен. Можно смело переходить к проверке.

А ещё у меня есть видеоурок, в котором весь процесс показан наглядно, полюс показана работа самих кнопок. Смотрите и внедряйте на своих сайтах и блогах.

Добавление соц. панели с помощью Share42

Настройка панели выполняется всего за несколько шагов:

1. 1.Для установки панели нам необходимо перейти на сайт Share42.
2. 2.Выбираем нужные нам социальные сети, а так же указываем размер иконок:
3. 3.Далее, настраиваем свою панель:
   1. 1)Выбираем тип нашей панели (вертикальная или горизонтальная).
   2. 2)Выбираем кодировку UTF-8.
   3. 3)Соглашаемся или нет на размещение иконки Share42
   4. 4)В случае если у вас сайт сделан на WordPress, ставим галочку в пункте «К вашему сайту подключен JQuery»

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

4.Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:

1. 1)Разархивируем архив.
2. 2)При помощи FTP-клиента загружаем папку Share42 в корневой каталог вашего сайта на хостинге.
3. 3)Указываем путь к папке.
4. 4)Ставим галочку напротив CMS на базе которой сделан сайт. В нашем случае WordPress.
5. 5)Вставляем в шаблон страницы сгенерированный код.

Так же, нажав ссылку «Параметры, которые вы можете указать» вы увидите таблицу с перечнем дополнительных параметров, а так же их описанием, которые можно использовать для настройки панели кнопок.