Социальные кнопки Яндекс «Поделиться» — настройка и установка
Здравствуйте, уважаемые друзья. Сегодня, в продолжение темы о полезных инструментов от Яндекс (Вебмастер, Метрика, Деньги), рассмотрим возможность создать на своём сайте или блоге кнопки социальных сетей. У Яндекса эта кнопка так и называется «Поделиться». И назначение этой кнопки, — организация вирусного маркетинга.
Вообще, не так давно я уже писал о специализированном сервисе PLUSO, который позволяет создавать кнопки соцсетей на сайте и блоге. Такие кнопки реализованы и на моём блоге. И должен отметить, очень удобный сервис.
Принцип работы, таких кнопок, заключается в том, что Вам проще публиковать анонсы статей в социальных статьях. Но это мелочь по сравнению с основной задачей, — Ваши посетители с помощью удобных кнопок делятся Вашими полезными материалами и тем самым ускоряют индексацию статьи поисковыми системами и улучшают поведенческие факторы. А это, согласитесь, сегодня сильно влияет на продвижение сайта.
Но вот вопрос, — зачем мне искать и тестировать другие сервисы, если сервис PLUSO меня полностью устраивает? А ответ прост, — установив социальные кнопки Яндекс «Поделиться» у Вас появляется подробная статистика в личном кабинете Яндекс.Метрика. А это очень удобно, когда Вы в одном месте можете проанализировать посещаемость, поведенческие факторы и узнать какой материал больше всего нравится Вашим посетителям.
Итак, давайте приступать.
Как создать кнопки Яндекс «Поделиться»
1. Открываем сервис создания социальных кнопок Яндекс «Поделиться». 2. Отмечаем чекбоксы нужных социальных сетей. 3. Выбираем вид отображения будущих соцкнопок.
Примечание: для того, чтобы появилась иконка социальной сети Pinterest, в специальное поле нужно будет ввести адрес ссылки к иконки данной социалки.
Для этого нужно скопировать иконку в папку на вашего сайта на сервере. Я скопировал эту иконку ко всем остальным иконкам соцсетей. И указал этот путь в специальном поле.
В результате появится иконка Pinterest и в коде добавится строчка с указанием пути к дополнительной иконке.
Как вставить кнопки Яндекс «Поделиться» на сайт
Для этого полученный код нужно вставить в соответствующее место Вашего сайта. Наиболее предпочтительный вариант внизу каждой статьи. Пример разберём на примере моего блога, созданного на WordPress.
Важно! перед внесением изменений в код, обязательно сделайте резервную копию изменяемого файла. Для этого достаточно скопировать весь код страницы в отдельный документ и сохранить его.
Для того чтобы вставить кнопки социальных статей внизу каждой записи, полученный ранее код нужно вставить в файл single.php.
Открываем административную панель WordPress, далее раздел «Внешний вид» — «Редактор». И выбираем файл single.php.
Следующим шагом нужно выбрать место для вставки кода. Подсказать конкретное место для вставки сложновато, так как у каждого свой шаблон. Если вам трудно разобраться в коде, посмотрите внимательно на Вашу страницу, определите где заканчивается статья, что идёт за ней (навигация, популярные материалы, комментарии) и уже потом ищите место для вставки.
Ну а на крайней случай, если вы сделали резервную копию, поможет метод научного тыка.
В результате вставки кода у вас после каждой статьи теперь будут социальные кнопки и выглядеть они будут примерно так:
Для того чтобы сделать призыв к действию, выровнять по центру кнопки и сделать подсказки в коде, нужно внести некоторые доработки:
Код ДО:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter" data-yashareImage="https://1zaicev.ru/wp-content/themes/BusinessWeb/images/social-icons/pinterest.png" ></div>
Код ПОСЛЕ:
<!--призыв к действию--><div><p>Друзья, жмите на кнопочки, помогите развитию блога:</p></div><!--призыв к действию--> <!--соцкнопки Яндекс--><script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <center><div data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter" data-yashareImage="https://1zaicev.ru/wp-content/themes/BusinessWeb/images/social-icons/pinterest.png" ></div></center><!--соцкнопки Яндекс-->
Как видите я добавил отдельный блок с призывом к действию, отцентровал кнопки и сделал комментарии в коде. Советую и Вам всегда делать комментарии, — это очень облегчает работу в дальнейшем.
В общем, результат будет выглядеть так:
Наглядный пример кнопок Яндекс «Поделиться» можно посмотреть на странице моего бесплатного курса «Набор текста голосом». Там они, мне кажется, больше подходят по дизайну.
Как посмотреть статистику нажатий на кнопки Яндекс «Поделиться»
Для этого Вам потребуется установить счётчик Яндекс.Метрики на сайте. Как это сделать читайте тут.
Итак, переходим в аккаунт Яндекс.Метрика в раздел «Содержание» — «кнопка Поделиться».
И вот здесь-то вам и откроется вся статистика нажатий на социальные кнопки. Со временем у вас наберётся приличная статистика, и вы сможете видеть, какие материалы больше всего понравились вашим посетителям. А значит, сможете предугадать их желание и писать больше полезного материала.
Моя статистика крайне скромная, одно нажатие. И то мое 🙂 но думаю, принцип понятен.
Также советую посмотреть видеоверсию статьи, где я наглядно рассказываю о вышеперечисленном алгоритме.
Ну, и в качестве альтернативы — предлагаю вам ознакомиться с возможностью создать социальные кнопки без сервисов и плагинов. Достаточно выполнить три шага и кнопки уже готовы к использованию.
На этом у меня сегодня всё. Всем желаю удачи.
С уважением, Максим Зайцев.
P.S. И конечно же поделитесь материалом с друзьями, посмотрите работу социальных кнопок в действии.
Лучшие кнопки социальных сетей — большие кнопки от Яндекс
Перепробовав огромную кучу различных кнопок социальных сетей (кнопки поделиться), я остановился на блоке «Поделиться» от Яндекс и вот почему:
- Это Яндекс. Это не левый сервис, который может встроить в свои коды какой-нибудь вирусный фрагмент кода. Яндекс так может, но вряд ли он будет это делать;
- Это Яндекс. Другие сервисы, которыми я пользовался, могли иногда долго грузиться или вовсе, перестать работать. У Яндекса пока хватает «сил» поддерживать их непрерывную работоспособность;
- Большое количество кнопок различных сетей;
- Бесплатно;
- Легко встраиваются.
Есть и минусы: очень мало настроек. Ну ЁМАЁ! Вы Яндекс! Добавьте хотя бы возможность выбирать размер кнопок, это ведь не трудно и не перегрузит ваши нежные сервера!
Как сделать кнопки блока «Поделиться» от Яндекс больше
Сначала устанавливаем кнопки как обычно. Просто встраиваем код, который дал Яндекс, в нужное место на сайте. Как вы сможете увидеть, будут они очень маленькими и скудными.
Чтобы поменять их размер и сделать более заметными, внесем изменения в их CSS код. НО, делать это будем, разумеется, на стороне нашего сайта.
Исследовав элемент кнопок, мы нашли нужный нам параметр (класс).
Что делаем дальше?
Открываем шаблон, куда вы вставили код кнопок.
Над самим кодом кнопок добавляем конструкцию вида:
<style>
.ya-share2__icon{
width: Npx!important;
height: Npx!important;
background-size: Npx Npx!important;
}
</style>Все N нужно заменить на числа — это и есть размер наших иконок. Тут можно задать любой размер, именно этого параметра и не хватает в стандартных настройках.
Ключевое слово здесь !important, именно благодаря ему наши кнопки имеют теперь тот размер, который диктуем ему мы, а не сервера Яндекс.
Пример готово кода с размером иконок в 36px.
<style>
.ya-share2__icon{
width: 36px!important;
height: 36px!important;
background-size: 36px 36px!important;
}
</style>P.S. Почему я не добавил этот код в CSS файл своей темы? Все просто, тогда он будет работать не на всех сайтах, так произошло и у меня. Дело в том что многие используют нестандартные темы или плагины, которые оптимизируют код сайта. Попробуй объяснить новичку почему код не работает? Проще использовать мой вариант и встраивать его непосредственно на ту страницу, где располагаются сами кнопки.
На этом мини-урок окончен 
Социальные кнопки для wordpress|кнопки Pluso и Яндекса
Здравствуйте уважаемые блоггеры и гости моего сайта! Сейчас без социальных сетей просто невозможно блоггеру, да и многим обычным пользователям. Особенно тем, у кого свой сайт, социальные сети его могут очень сильно продвинуть как в поисковых системах, так и на увеличение трафика(посещаемости), даже зачастую на ускорение индексации страниц. В этом и помогают кнопки соцсетей, нажав на которые, ваш адрес или анонс статьи улетает в соцсети, а там его видят пользователи, которые возможно ваши будущие подписчики, и также наши глазастые роботы поисковики.
Социальные кнопки для wordpress можно установить с помощью плагинов, но мне не нравиться этот способ, во-первых дополнительная нагрузка на сайт, а во-вторых бывает много глюков с плагинами. Лучший способ-это с помощью кода. И в этом разнообразии сервисов производства социальных кнопок, я выбрал 2: Pluso и кнопки Яндекса. Мне они очень понравились, простота установки кнопок и их красивый внешний вид.
Социальные кнопки Pluso
Заходим на сайт . Здесь зарегистрируйтесь и приступим к выбору кнопок. На главной странице приведены настройки, где вы можете выбрать стиль кнопок и необходимые вам социальные сети.
Как видите, здесь огромное количество социальных сетей, выбирайте себе необходимые! То, что будете выбирать, будет отображаться сразу ниже, посмотрите скриншот:
Здесь вы доводите до конца настройки, и ниже отобразится сгенерировавшийся код, его весь и копируйте для вставки на свой сайт.
Как скопировали, можете вставлять в нужное место вашего сайта. Обычно его все вставляют в конце записей, для этого в большинстве сайтов wordpress он ставится в файл single.php, иногда content.php или даже loop.php, все зависит от вашего шаблона. Можно прямо после статей в текстовом редакторе (предварительно переключившись с визуально на текст), но в таком случае надо будет все вручную ставить. Также можно в виджет, в поле текст вставлять, тут уже все на ваше усмотрение.
Еще вам скажу такой секретик: когда вы поставите кнопки pluso, то всегда с любыми соцсетями в ряду кнопок стоит плюс, это как бы реклама от сервиса, можете оставить по умолчанию, а можно эту лишнюю кнопку убрать, для этого нужно в самом конце файла стилей style.css прописать такую строчку
.pluso-more{display:none!important;}
и вуаля, плюса нету!
Сначала, если вы новичок, то лучше конечно сделать копию сайта, а это прекрасно делает плагин updraftplus, об этом у меня написано, можете почитать по ссылке. Потом пробуйте вставлять в необходимое вам место.
Социальные кнопки от Яндекса
Яндекс придумал превосходные социальные кнопки. Адрес сайта: https://api.yandex.ru/share/. Здесь также выбираете социальные сети и вид кнопок, смотрите скриншот ниже:
Как и в предыдущем случае, генерируется код и вставляете на сайт. Заметьте, код этих кнопок состоит из 2 частей:
<script type=»text/javascript» src=»//yandex.st/share/share.js»
charset=»utf-8″></script>
<div class=»yashare-auto-init» data-yashareL10n=»ru»
data-yashareType=»icon» data-yashareQuickServices=»yaru,vkontakte,facebook,twitter,odnoklassniki,moimir»></div>
Сам скрипт, и 2-ая часть кода. Можно сразу полностью ставить код, а можно для удобства сделать так: скрипт ставите в файл header.php между тегами head или в файл footer.php перед закрывающим тегом /body, а уже 2-ую часть кода в нужное вам место.
Чем еще хороши эти кнопки, тем что по ним можно смотреть статистику в яндекс-метрике, будут видны все клики по кнопкам и подробная статистика, смотрим скриншот:
Вот такие прекрасные социальные кнопки для wordpress придумал Яндекс. Можете выбирать любой сервис. Советую вам также зарегистрироваться в яндекс-метрике и завести счетчик, очень точно показывает все посещения сайта и многое другое, целый комплекс качественного контроля, об этом я буду писать отдельную статью, поэтому советую подписаться на блог , будьте первыми в курсе событий!!!
Я ПОЙМАЛ КОТА!!! А ВАМ СЛАБО???
Логическая игра: нужно окружить кота, нажимая на круги, чтобы он не убежал с поля! Если не получилось-игра начнется заново.
Социальные кнопки от Яндекса на блоге, без плагина
Давно я хотел заменить кнопки социальных сетей на блоге, которые были сделаны с помощью плагина WP-Social Buttons, на другие. Давайте, для начала, поговорим о том, зачем нужны социальные кнопки на сайте, или на блоге вообще.
Для раскрутки блога мало писать статьи, нужно еще увеличивать привлекательность блога для поисковых систем. И для этого необходимо наращивать ссылочную массу, то есть, разбрасывать ссылки на свои статьи, где только можно. Важная часть увеличения ссылочной массы — работа с социальными сетями. И кнопки социальных сетей помогают делиться ссылками легко и просто, несколькими кликами мыши. Причем делать это может не только владелец, но и любой посетитель блога.
Кроме наращивания ссылочной массы, также увеличивается вероятность того, что по этим ссылкам из социальных сетей к Вам прийдут еще посетители.
Раньше у меня был плагин WP-Social Buttons, который генерировал кнопки социальных сетей. Но мне он не очень нравился по одной причине — кнопки не отображают, сколько раз по ним кликали. Кроме того, нет кнопки социальной сети Одноклассники, и кнопки Google+1. Кнопку от Гугла я поставил отдельно, но она у меня вечно обнулялась.
Плагин WP-Social Buttons генерировал два ряда социальных кнопок. Первый ряд — кнопки для того, чтобы поделиться ссылкой на статью в своем аккаунте социальной сети. Второй ряд — для того, чтобы добавиться в друзья.
Для начала я решил посмотреть как новые кнопки социальных сетей от Яндекса будут выглядеть у меня на блоге, и появятся ли они вообще. Итак, чтобы поставить кнопки, я перешел на блок Поделиться от Яндекса, и взял код в закладке Счетчики.
После этого я зашел в административную панель блога, в пункт Внешний вид — Редактор, в шаблон Одиночная запись (single.php), и поставил этот код ниже кода социальных кнопок, который был сгенерирован плагином.
Кнопки оказались слишком малы, и поэтому в параметре data-yashareType я заменил параметр «small» на «large». Результат меня удовлетворил, и я начал писать эту статью, параллельно устанавливая кнопки дальше.
Следующее, что нужно было сделать — это установить данные кнопки по центру. Задача решилась просто — я окружил код тэгом div с выравниванием по центру, вот таким образом:- <div align=»center»> скопированный код социальных кнопок от Яндекса</div>
Кнопки установились по центру.
Поначалу я хотел оставить второй ряд кнопок от плагина WP-Social Buttons, которые предназначены для добавления в друзья, но кнопки Поделиться никак не хотели устанавливаться над ними. Поэтому я вообще решил убрать плагин, а второй ряд кнопок сделать с помощью простого html-кода.
Код представляет собой четыре картинки, которые являются ссылками на страницы моих аккаунтов в социальных сетях. Его я даже не составлял, а взял готовый, нажав правой клавишей на существующие кнопки, и выбрав пункт
Кстати, Вы точно так же можете посмотреть мой код, также нажав на мои кнопки, и выбрав этот пункт. Все, что мне нужно было сделать — это заменить картинки своими, и прописать новые URL-адреса для них, так как плагин я решил полностью убрать.
В итоге, не найдя ничего интересного с помощью поиска Гугл, я скопировал старые картинки, поставил их в другую папку на хостинге, предварительно уменьшив размер и вес, и сделав их поярче. После этого я заменил URL-адреса картинок в коде, и поставил код добавления в друзья после кода Поделиться.
Оба созданных кода я разместил не только в шаблоне Одиночная запись (single.php), но и в Шаблоне страницы (page.php), чтобы кнопки социальных сетей отображались не только в статьях, но и на страницах блога.
И последнее, что мне нужно было сделать — это деактивировать и удалить плагин WP-Social Buttons.
То, что получилось, Вы можете увидеть ниже, и заодно поделиться статьей с друзьями в социальных сетях. Данное изменение пошло на пользу еще и тем, что блог начал загружаться ощутимо быстрее. Так что используйте, при желании, а я, в свою очередь, желаю Вам Успеха!
Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook: