Как добавить официальные кнопки соцсетей. Share настройки, выбор стиля кнопок для социальных сетей

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

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

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

Мечта каждого владельца сайта, если все его записи будут репостить читатели на своих страницах в одной из социальных сетей. Сейчас больше всего идет спрос на Вконтакте, Facebook, Twitter и Одноклассники. Я бы еще добавить LiveJournal, liveinternet и Blogger. Вот эти кнопки желательно добавить на сайт для полного удобства пользователя.

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

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

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

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

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

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

Чем сегодня можно воспользоваться, чтоб добавить социальные кнопки для сайта:

1. Сервис uptolike.
2. Социальные кнопки яндекс.
3. Добавление вручную каждой соц сети отдельно.
4. Сервис Pluso.
5. С помощью плагинов для WordPress (для ленивых).

Больше никуда влазить наверное не нужно, лучших способов не найти. Каждый из этих вариантов по своему хорошо. Если вы знаете более удобней или привлекательный способ, напиши пожалуйста в комментариях.

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

Uptolike

В данный момент я сам пользуюсь этим сервисом, понравился он мне. Кроме удобства, сервис uptolike имеет несколько привилегий перед другими себе подобными.

• Широкий выбор среди кнопок социальных сетей;
• Кнопки адаптированы под мобильные устройства;
• Возможность цитирования в соц сетяъ любого участка текста;
• Можно добавить кнопку наверх;
• Возможность добавления всплывающего окна на подписку в группу Вконтакте;
• Выбор размера иконок;
• Выбор стиля иконок для сайта;
• Добавить эффект при наведении;
• Изменение фона кнопки, цвета текста, фона счетчика;
• Увеличение или уменьшение текста в счетчике.

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

Кроме этого, что еще может сервис uptolike.

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

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

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

Яндекс

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

Ручной метод добавления

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

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

Вконтакте

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

Сложного ничего нет, выбираем стиль кнопки (с счетчиком или без него), пишем текст на кнопке, вариант логотипа и внизу будет готовый код для вставки. Я сам пользовался таким ручным методом добавления, но в данный момент пробую посторонний сервис. Посмотрим, что из этого получится. Если не будет устраивать, сразу вернусь назад к ручному методу.

Pluso

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

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

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

WordPress

Если вы ничего не понимаете в этом коде, что куда нужно копировать и как все это работает, выход есть. Если у вас движок WordPress, можно установить плагин, с помощью которого у вас появятся кнопки социальных сетей. Сегодня таких плагинов просто большое количество. Заходи в админку — Плагины. Можно сразу написать в поиске плагинов «соц кнопки», «social» или «вконтакте». Я уверен, вы что то найдете.

Среди большинства таких подобных плагинов для WordPress, посмотрев на рейтинг, больше всего ставят именно такие:

1. Social Share Buttons for WordPress.
2. Social.
3. Social Media Feather — lightweight social media sharing and follow buttons.

На самом деле подобных таких плагинов очень много, нужно устанавливать и перебирать, какой вам больше понравится, правильно работает, что показывает и как его можно настроить под себя. Разберем на примере первый такой плагин Social Share Buttons for WordPress.

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

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

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

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

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

Что такое юзабилити и почему это так важно?

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

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

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

8 распространенных ошибок пользователей Wix

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

Отсутствие ссылки на логотипе . Многие отказываются от вкладки «Главная» в меню и заменяют ее ссылкой на логотипе. В результате пользователи ожидают, что кликнув на логотип, они смогут перейти на начальную страницу сайта. Так как кликабельный логотип уже давно стал стандартом, пренебрежение им станет большой ошибкой в юзабилити.

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

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

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

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

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

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

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

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

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

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

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

Яндекс кнопки соц сетей

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

Теперь несколько картинок для лучшего понимания, выбираем какие сайты будем использовать:

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

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

Не буду проводить обзор всех возможных сервисов, их суть одна и та же:

1. Выбираете соц сети.
2. Изменяете внешний вид.
3. Копируете код.
4. Вставляете у себя на сайт.

Теперь список сервисов:

• http://share.pluso.ru/
• http://share42.com/ru
• https://uptolike.com/
• http://social-likes.js.org/ru/

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

Не буду долго описывать, незачем, все интуитивно понятно.

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

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

Для данного случая мы выбрали два удобных плагина, которые именуются как Social Share Buttons и Jetpack.

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

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

Затем нажимаем «Настроить» и нас перекидывает в меню настроек социальных сетей.

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

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

В следующем меню мы настраиваем стиль кнопки и места их вывода на нашем сайте.

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

Установка кнопок социальных сетей на сайт WordPress. Настройки Social Share Buttons.

Итак, не будем ходить вокруг да около, а перейдем сразу же к установке кнопок социальных сетей . Заходим с в меню настройки и добавления плагинов. Через поиск находим предложенный нами Social Share Buttons for WordPress.

Установив и активировав плагин для добавления иконок социальных сетей , заходим в появившееся новое меню с консоли нашего WordPress - Share Buttons.

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

Главные настройки отображения кнопок социальных сетей на сайте WordPress.

Что мы можем тут настроить?

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

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

Share настройки, выбор стиля кнопок для социальных сетей.

1. Выбираем понравившиеся стиль и сортируем на свое усмотрение наши иконки.
2. Настраиваем с какими именно соц. сетями вы хотите взаимодействовать и где соответственно продвигать свой продукт.
3. Настройка отступов между иконками.

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

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

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

Добавление каждой кнопки соц сети по отдельности

Твиттер так же предоставляет широкие настройки для кнопок. Ссылка , скрин ниже:

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

Похоже на Однокласники, с чего бы это 😆 .

Добавление иконок на профили и группы в социальных сетях на сайт

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

Итак, что нам нужно:

• Определиться с будущим местонахождением иконок;
• минимальные знания html и CSS, как не крути, а предсказать все варианты, которые могут вам понадобиться я не смогу.
• готовые картинки-иконки соц сетей, скачанные с интернета. Их можно найти очень много используя поиск.
• доступ к файлам шаблона.

Первым делом покажу небольшой код, для 2-х соц сетей, VK и G+, а так же иконку ленты FeedBurner. По аналогии вы можете добавить сколько угодно иконок.

< div class = "head-icon" > < a href = "http://feeds.feedburner.com/yrokiwp" > < img title = "Подписка RSS" alt = "Подписка RSS" src = "//feedburner.google.com/fb/images/pub/feed-icon32x32.png" / > < / a > < / div > < div class = "head-icon" > < img title = "Группа Вконтакте" alt = "Группа Вконтакте" src = " /images/vk.png" / > < / a > < / div >

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

Соцкнопки необходимы, это очевидно. Вопрос в другом - какие выбрать? Мы для вас протестировали ТОП 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 символов)
- описание сайта
- путь к файлу изображения

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

В этой статье я расскажу вам о нескольких способах, как добавить на сайт кнопки социальных сетей. Из них мне больше всего понравился первый способ — кнопки от сервиса 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 статьи. Какой-то из них наверняка понравится и вам.