Главная » Тарифы » Кнопки социальных сетей. Кнопки социальных сетей Поделились вашей записью от всех

Кнопки социальных сетей. Кнопки социальных сетей Поделились вашей записью от всех

В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

Каковы возможности и функции?

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

Кнопки социальных сетей Share Pluso

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

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

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

Онлайн-демо и исходники данного примера вы найдете в конце статьи, а сейчас по порядку приступим к реализации. Сперва убедитесь, что на сайте используется jQuery, в противном случае подключите его, в WordPress это лучше делать через файл functions.php:

1 2 3 4 function my_jquery() { wp_enqueue_script( "jquery" ) ; } add_action( "wp_enqueue_scripts" , "my_jquery" ) ;

function my_jquery() { wp_enqueue_script("jquery"); } add_action("wp_enqueue_scripts", "my_jquery");

Затем подключите Font Awesome - мы будем использовать векторные иконки социальных сетей вместо изображений. Теперь необходимо вставить HTML основу кнопок в код шаблона:

1 2 3 4 5 6 7 8 9 <div id = "share" > <div class = "like" > </ div > <div class = "social" data-url= " " data-title="() ; ?> "> <a class = "push facebook" data-id = "fb" > Facebook</ a > <a class = "push twitter" data-id = "tw" > Twitter</ a > <a class = "push vkontakte" data-id = "vk" > Вконтакте</ a > <a class = "push ok" data-id = "ok" > Одноклассники</ a > </ div > </ div >

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

С помощью стилей оформим наши кнопочки, зададим цвет фона и текста, добавим эффект при наведении указателя курсора мыши. В style.css добавим следующий код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 #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 { 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, его вы найдёте в архиве с исходниками. Для этого в заголовке перед закрывающим тегом вставляем строку, меняя путь к файлу на своём хостинге:

1 <script defer src = "share.js" >

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

Делимся с помощью Публикатора

  • В вашей Хронике.
  • В верхней части Ленты Новостей вашей главной страницы.

Чтобы опубликовать обновление статуса:

Чаще всего пользователи Facebook делятся обновлениями своих статусов - коротких текстовых записей, которые могут прочесть и прокомментировать друзья. Когда вы публикуете обновленный статус, он появляется в вашей Хронике и Лентах новостей ваших друзей.


Публикация в Хронике друга


Удаление вашего местоположения из записей

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

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

Лайки, комментарии и перепост

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

Отметки «Нравится» (Лайк)

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

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

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

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

Соцкнопки необходимы, это очевидно. Вопрос в другом - какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель - выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

Выбор лучшего сервиса социальных кнопок

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

Состав команды аттестуемых таков:

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

Особенности кнопок uSocial

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


Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки - от 1 до 5). Все эти данные получены в процессе тестирования.

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

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

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

Шаг-1

Шаг-2

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

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

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

Шаг-3

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

Шаг-4

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

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

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

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

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

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

1. Facebook и Вконтакте используют Open Graph protocol:





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



4. Для Google+ так:

- cсылка на профиль автора в Google+
- название сайта
- текст сниппета (до 40 символов)
- описание сайта
- путь к файлу изображения

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



Предыдущая статья: Следующая статья:

© 2015 .
О сайте | Контакты
| Карта сайта