Как сделать кнопку share без сторонних сервисов
Обновлено: 07.07.2024
Навигация по странице:
Чем полезные социальные кнопки поделиться
Кнопки социальных сетей wordpress нужны вам для:
- привлечения новых посетителей на сайт;
- бесплатной рекламы ресурса;
- информирования пользователей социальных сетей о выходе нового поста в вашем wordpress блоге.
Это далеко не полный список, кнопки социальных сетей на сайт wordpress также позволяют проводить раскрутку сайта (определенной тематики бесплатно или же с денежными средствами).
Cоц. кнопки поделиться позволяют пользователям
- Легко публиковать понравившийся им сайт у себя на стене.
- Делать положительный или отрицательный отзыв в соц. сетях о вашем ресурсе.
- Запомнить на долгое время на какой странице есть полезная информация. В истории стены всегда можно найти нужный сайт, даже через несколько лет после публикации.
Социальные кнопки поделиться нужны при СЕО оптимизации для:
- наращивания ссылочной массы сайта;
- увеличения количества ссылок с реальными переходами;
- улучшения поведенческих факторов с прямыми переходами.
к менюЯ довольно много использовал разных плагинов WordPress и сервисов по добавлению иконок социальных сетей на сайт, но все они хоть чем то, но мне не нравились. Для примера взять тот же сервис share.yandex, вроде уважающая себя организация, а заставить безглючно работать маленькие кнопочки не могут :-). Использование плагинов, тоже не вариант ведь грузят они сервер и страницы прилично. Недавно оптимизировал сайт на WP чтоб он меньше жрал ресурсов процессора и ничего не смог сделать пока не выключил все плагины и не начал искать негадяя, им оказался плагин для соц. кнопок и плагин для добавления блоков рекламы на сайт. Варианты с сервисами, которые предоставляют социальные кнопки поделиться вместе с рекламой своего ресурса тоже отпадают сразу, ну это как то не по человечески, - мы вам функцию, а вы нам ссылку на сайт - не сильно равный обмен, особенно если у вас довольно раскрученный проект. Ну да не будем о грустном, раз я пишу этот пост, значит у меня есть что вам предложить и посоветовать: сервис share42, о нем дальше и поговорим.
Кнопки социальных сетей на сайт wordpress share42
Share42 - это бесплатный сервис, который генерирует скрипт для добавления соц. кнопок на ваш сайт.
Сервис имеет большую гаму настроек для отображения кнопок соц. сетей. О них вы можете узнать более подробно если развернете вкладку ниже:
Как уже говорилось share42 это бесплатный сервис, который не публикует свою ссылку возле иконок соц. сетей и может генерировать ссылки для 43 социальных сетей, а именно для:
Разные размеры кнопок социальных сетей
Сервис позволяет задавать разные размеры для соц. кнопок, вы можете указать:
Также вы можете задать свои картинки для социальных сетей, сделать их в монохроме или под цвет вашего сайта.
Кодировка символов для соц. кнопок
Вы можете из списка выбрать кодировку вашего сайта и указать ее для кнопок социальных сетей. Доступный вариант выбора:
Кнопки социальных сетей можно вставить на любой сайт не зависимо от CMS, но для WordPress и Drupal, сервис может сгенерировать готовую ссылку для вставки в любое место вашего шаблона. Вам не нужно писать код чтоб получить ссылку текущей страницы и ее заголовок с описанием, share42 сделает это за вас.
Например код для вставки wordpress кнопки социальных сетей выглядит вот так:
Пошаговая настройка wordpress кнопки социальных сетей
к меню1. Заходим на сайт сервиса Получить ссылку на (share42).
2. Выбираем размер нужных нам соц. кнопок для wordpress:
3. Кликая на социальные сервисы выбираем те что нам нужны, они будут подсвечиваться вот таким фоном: Перетаскивая эти иконки в начало, зажав на них левую клавишу мышки, мы можем задать правильный порядок иконок соц сетей у нас на сайте.
4. Указываем вариант отображения кнопок. Тут доступные варианты "горизонтальная" как у меня на сайте и "вертикальная плавающая" - это когда соц. кнопки размещены справа или слева окна браузера и постоянно доступные при прокрутке.
или же вот так:
5. Отрываем страницу просмотра того что у нас получилось: и если все нормально скачаваем код себе на ПК по ссылке рядом.
6. Читаем инструкцию на их сайте, далее там подробно описано что нужно сделать со скачанным файлом и как разместить и вывести иконки социальных сетей у себя на сайте WordPress.
Вывести социальные кнопки поделиться через шорткод WordPress
к менюДля тех кому не интересный вывод горизонтальных соц. кнопок в определенном месте шаблона хочу посоветовать вариант с шорткодом WP который позволит вывести социальный кнопки посредине поста / статьи или любом другом месте, куда можно вставить шорткод.
7. Сделав п. 6 не спешите выводить код у себя на сайте, вам нужно открыть header.php вашей темы и вставить туда подключение скрипта
8. Далее вам нужно открыть файл темы functions.php и в самое начало закинуть вот это создание шорткода:
. Важно: файлы скачанные с share42 я закачал в папку темы, в папку с именем share42 о чем и говорит этот путь get_bloginfo( 'stylesheet_directory' ).'/share42/ .
9. Шорткод для вывода социальных кнопок в любом месте готов, для его вызова вставте код [icosoc] себе в пост.
Как вывести разные wordpress кнопки социальных сетей на одном сайте
к менюПредположим вы хотите видеть у себя на сайте горизонтальные и вертикальные кнопки, или же горизонтальные кнопки разных размеров. Для этого нам нужно сгенерировать несколько разных кодов и вставить к себе на сайт, при этом нужно изменить имена скачанных каталогов, например "share42_1" и "share42_2".
1. Открываем папку share42_2, находим там файл "share42.js" и открываем его в любом текстовом редакторе
нас интересует 2 строчка, а именно вот этот текст: div.share42init
Нужно его аккуратно заменить на: div.share42init2
2. Закачиваем обе папки на сервер, в корень вашей темы.
3. Подключаем в файле header.php оба файла:
4. Делаем 2 разных шорткода для вызова социальных кнопок поделиться и закидываем их в functions.php вашей темы:
. Обратите внимания я поменял пути к картинкам, а также клас для второго блока на share42init2 .
4. На этом все, теперь у нас есть два шорткода [icosoc] и [icosoc2] для вызова кнопок социальных сетей на сайте wordpress.
В этом уроке мы научились делать социальные кнопки поделиться для своего сайта. Посмотреть как они работают можно у меня на сайте, заодно и поделитесь этим постом среди своих друзей:
P.S. Совсем забыл, у всех сайтов WP по умолчанию подключена библиотека jQuery по этому подключать дополнительно нет надобности.
Все кнопки социальных сетей wordpress на главную страницу
к менюЕсли вам потребуется сделать все кнопки социальных сетей на одну страницу, например на главную, вам достаточно в этом вот блоке
Обратите внимание, я менял только data-url и дата data-title. В своем варианте data-path у вас может быть немного другой. Я задал путь универсально, вы можете прописать его прямой ссылкой. (хотя я не рекомендую это делать)
Еще из раздела СЕО предлагаю прочесть эти статьи:
Теперь вы знаете как добавить кнопки социальных сетей на сайт wordpress.
Здравствуйте!
Этот способ актуален ещё?
Не на сайте ваши кнопки.
Добрый день.
Да, вроде все работает, сервис еще живой :))
Все, решил. В файл CSS надо было вставить код:
.share42init margin-top:30px;
margin-bottom:30px;
>
На данный момент ключевая проблема в том, что после добавления кода в functions.php, который позволяет выводить социальные кнопки через шорткод, у меня перестает работать библиотека медиафайлов и становится невозможным добавить изображение на сайт. Как только убираю из functions этот код, все сразу снова начинает работать.
P.S. соблюдайте плз. вложенность, так легче разобраться о чем был разговор до этого
На почту мне приходят письма с адресом noreply, туда все-таки можно написать?) Не придумала как разместить файл, кроме как кинуть ссылку на его текстовую версию у себя в блоге, надеюсь меня не сочтут спамером: (-url-) Не поняла, что такое скин? Не совсем поняла, как соблюдать вложенность, нужно отвечать на свой первый пост? Просто кнопки ответить непосредственно Вам нет.
Спасибо Вам большое, ни за чтобы не догадалась, что перенос строки и комментарии на что-то влияют. А есть ли возможность одновременно и использовать шорткоды и в тоже время настроить автоматическое добавление кнопок к каждой записи в блоге?
пожалуйста, нужно найти файл который отвечает за вывод постов, смотрите single.php а там уже внутри что тема подключает. Код выведет вам этот же шорткод в теме.
Кнопки работают) Но есть одно но, они всегда выводятся слева, как сделать чтобы кнопки выводились по центру или справа в зависимости от необходимости?
Я хочу расположить шорткод [icosoc] по правому краю, тег не срабатывает, при этом работает, почему не срабатывает right?
В предыдущем комментарии я писала, что тег right не срабатывает, а тег center срабатывает, сами теги не отобразились)
Еще вопрос) А если я хочу, чтобы у меня и шорткод работал и к каждой записи прикреплялись кнопки, как это реализовать?
Почему-то после добавления кода для шорткода, перестала грузиться библиотека медиафайлов.
Добрый день.
Если честно, то из вашего вопроса не совсем понятно о чем идет речь. Вы хотите прилепить соц кнопки справа?? Тогда о каком right и center мы говорим?? надо смотреть сайт чтоб понять где у вас ошибка.
Огромное спасибо за этот урок. В моей теме нет single.php, хорошо, что нашла ваш блог. Но у меня такой вопрос, как сделать так, чтобы шорткод автоматически добавился на все ранее опубликованные посты, их много и каждый редактировать затруднительно.
Если у вас нет single.php то его можно создать, нужно конечно знать из чего его делать. Нужно поискать кто у вас выводит посты, сомневаюсь что index.php хотя и такое может быть, тогда его нужно скопировать и копию переименовать в single.php, тогда в этот файл можно будет забросить код только для постов, ну или же проверка на пхп is_single(). это ответ на вопрос как автоматически добавить этот шорткод, если знаний не хватает то придется проделывать это все руками. можно еще прицепить хук до the_content но в таком случаи может повылазить эти иконки там где не нужно. С вашей темой не знаком, а туда могли набросать что угодно и как угодно 🙁
Да, вы правы, знаний не хватает. Тема Customizr, пока, абсолютно мне не понятна, шаблон сменила на днях. Посты выводит, как раз index.php, все что добавляю в него, отображается и на главной. Возможно, снова придется подключать плагин. Спасибо за ответ!
И еще. На сайте share42 говорится, чтобы проверить правильность указания пути файла, нужно нажать на ссылку и увидеть текст кода на странице.У меня так он и не вывелся. Только надпись, страница не найдена. Как быть в такой ситуации.
Добрый день.
get_bloginfo('stylesheet_directory') - это и есть путь к вашей теме, который заканчивается "colormag" только вы абсолютный путь вставили, а ВП сделает относительный типа вашдомен/wp-content/themes/colormag/ а далее нужно вставить название папки, где у вас лежат файлы скачанные с share42. Обычно папка так и называется, то есть у вас путь будет точно такой как и у меня, если вы эти файлы залили в тему.
Проверять в share42 ничего не нужно, он не воспроизведет пхп код 🙂 туда можно вставить разве что вашдомен и полный путь.
Здравствуйте, подскажите пожалуйста как сделать на своем сайте кнопки социальных сетей пр нажатии на которые будет производиться переход на страницу сайта названия кнопки
Добрый день.
Я правильно вас понимаю, у вас есть на сайте страница фейсбук, вконтакт и по клику на соц. должен быть переход. - тогда нужно просто делать на хтмл иконки и ссылку куда вам нужно. Иконки можно срезать в сети их там полно, верстка простенькая будет, а вот стили нужно смотреть по задаче как их будет нужно выводить.
Я пользуюсь плагином соцзамка от Slocker для WordPress (-url-). Трафик вырос на глазах из Фейсбука. Реально очень много репостов.
На первый сайт мне бесплатно помогли установить в службе поддержки, а на второй я уже поставил сам, оказалось очень просто.
Привет! Все сделал по инструкции - в записях шорткод отлично отображается, а на страницах не отображается - просто пустота (как будто там ничего нет. ). В чем может быть проблема? Куда копать?
Добрый день.
Разницы между постом и страницей для этого шорткода - нет. Если шорткод работате у вас в записах типа post то должен работать и в page.
В чем может быть проблема, трудно сказать 🙁 Нужно смотреть сайт.
Геморой. Проще установить плагин и забыть о правках непонятных скриптов.
Добрый день.
Вопрос с передачей картинки в соц.сеть. На странице есть несколько картинок указываю конкретную типа
, а передаются в разные соцсети разные. Подскажите где копать.
Добрый день. К сожалению ничем не смогу помочь. Если хорошенько посмотреть мой сайт то такая же проблема и у меня. Возможно нужно копать в сторону микроразметки. Как мне кажется у меня соц кнопки просто берут первую картинку на сайте. Если честно, глубже в эту тему не копал
Хотелось бы посмотреть социальные кнопки wordpress без плагинов и без сторонних ресурсов. Вы банально подключаете яваскрипт код с другого ресурса, который тормозит скорость ответа сервера кстати.
Мне кажется самый эффективный способ добавления соц. кнопок - это использовать АПИ самих социальных сетей. А вы как думаете?
прикольное решение делать социальные кнопки wordpress без плагинов но с помощью шорткодов. Спасибо. Всегда можно заменить, не нужно каждый раз лазить в шаблон после разных обновлений.
Так понимаю у вас они выводятся именно через шорткоды
Тут кнопки социальных сетей (-spam-url) тоже без плагинов, всего пару строк
Я так уже делала. к сожалению в сингл вообще всего две строчки
admin :
Нужно искать от куд берет вывод функция simplecatch_content.
Единственный способ найти, это по очереди отключать все файлы темы, через фтп и проверять перестал работать сайт или нет.
отключить любой файл можно переименовав его, например content-single.php в content-single.php-
Проверте чтоб был выключен кеш, если он есть. когда найдете файт, который генерирует текст, вставите туда свой код для соц кнопок и потом подкоректируете верх/вниз.
К сожалению больше ничего посоветовать не могу
Добрый день Не могли бы вы сказать куда надо вставить код с сайта share42? Не очень понятно. У них сказано в шаблон вашего сайта, а куда именно? Тема simplecatch.
Добрый день.
Многое зависит от того какой код вы сгенерировали социальных сетей. Но стоить попробовать следующий вариант:
находим файл single.php в теме и бросаем в любое место (только не первой строкой и не последней), а далее смотрите куда вам нужно его вставить или поднять или опустить потом по коду.
Привет у меня все получилось. WordPress кнопки социальных сетей работают.
И код чистенький и без всяких там плагинов.
Мне понравилось, можете сами посмотреть на сайте (-spam-url-)
Большинство популярных скриптов для добавления на сайт социальных иконок и кнопок обладают одним или несколькими из следующих недостатков:
Как добавить на сайт скрипт социальных кнопок
Собственное решение должно избегать вышеперечисленных ошибок, а значит обладать небольшим весом, генерировать только необходимые семантически верные элементы и не зависеть от сторонних ресурсов. Добавляемый скриптом блок с социальными кнопками, в свою очередь, должен быть адаптивным и не содержать значений идентификаторов, классов и атрибутов, которые могут быть отфильтрованы блокировщиком рекламы.
HTML-разметка
По мнению автора, с точки зрения SEO использование пустого элемента вместе с aria-label предпочтительнее, нежели добавление ссылки со скрытым текстом или без анкора.
CSS-оформление
Чтобы не загружать на сайт лишние спрайты и обеспечить масштабирование кнопок, изображения для них будут выводиться через CSS в виде закодированного в base64 SVG (для удобочитаемости в приведенном примере данные SVG отсутствуют). Соответствующие иконки взяты с сайта Simple Icons и находятся в свободном доступе. Для высоты, ширины и отступа от кнопок используются относительные единицы измерения — em . Таким образом, масштаб блока и его дочерних элементов будет зависеть от родительского размера шрифта.
Процесс стилизации кнопок можно облегчить благодаря SCSS:
JavaScript
Для правильной работы скрипта понадобятся вспомогательные функции, обеспечивающие открытие нового окна и парсинг основных необходимых meta-данных о странице: url, заголовок и описание .
Скрипт share отлично работает во всех современных браузерах. В Internet Explorer 11 для метода Object.assign() необходимо добавить полифилл.
Поскольку поисковые системы все больше определяю рейтинг сайта основываясь на поведенческих факторах – ускорено развивается интеграция социальных сетей в проектах. Это можно сделать несколькими способами: добавлением кода кнопок в элементы сайта, либо использованием плагинов и сторонних сервисов.
Зачем нужны социальные кнопки
Социальные кнопки в WordPress являются важным элементом продвижения. Все поисковые системы и сервисы статистики учитывают переходы на ресурс из социальных сетей – благодаря этому формируется общий рейтинг популярности. Трафик начинает расти, пользователи рекомендуют материалы сайта своим друзьям, а те своим – так выстраивается целая цепочка обмена информацией. При публикации качественного уникального контента, будьте уверены, что социальная составляющая сама отрекомендует ваш проект и пригласит новых посетителей.
Установка кнопок без плагинов
Распространенный вариант работы с этой CMS, поскольку позволяет разместить социальные кнопки на сайте WordPress без установки лишних плагинов, снижающих производительность сайта. К тому же, вебмастер может детально изучить код, модернизировать его и разместить в нужном месте.
Вертикальный блок
Это решение достаточно популярно, так как не мешает изучению контента на сайте и всегда на виду, ведь прокручивается со статей. Это делается для того, чтобы пользователь не забыл оценить материал, если он был интересен ему. В некоторых случаях наличие блоков в конце статьи не дает такого эффекта, поскольку посетители могут не опустится в самый низ и не заметить его. Необходимо сделать так, чтобы блок был всегда на виду, но не мешал работе со статьей и другими элементами ресурса.
Вот пример кода, рассмотренный для Facebook:
– определяет место размещения блока. Не несет никакой функции, позволяет находить блоки в коде сайта. Тег содержит запись, которая является следующей функцией: блок прилипнет к текущей позиции посетителя и не будет исчезать во время скроллинга страницы. Свойства bottom и left устанавливают положение кнопок по нижнему левому краю. Для изменения их расположения, следует изменить значения.
Чтобы разместить несколько кнопок социальных сетей, необходимо изменить значение bottom, отнимать от него высоту иконки – 50px. Так как они могут налаживаться одна на вторую. Для каждой последующей значение следует изменять. Обязательно нужно скрывать тегом и атрибутом rel = “nofollow” ссылки кнопок от индексации. Для того, чтобы разместить другую социальную сеть или добавить еще несколько, следует изменить ссылку в href . Получаем образец, который после заполнения параметров установит кнопки на сайте.
Перед тем, как углубляться в кодинг, давайте осмотримся и обратим внимание нате ресурсы, которые уже нам предоставляет глобальная паутина. К слову их очень много мы же рассмотрим два наиболее популярных.
С чем же мы рискуем столкнуться, используя готовые кнопки поделиться?
Во-вторых: в надежности Яндекса сомневаться не приходится, но кнопки, в отличие от счетчика метрики, почему-то грузятся тяжело, и не редко происходит видимое их запаздывание от основного контента страницы. Особенно это заметно при хорошем высокоскоростном соединении, когда страница вылетает фактически мгновенно, а у вас несколько блоков с кнопками.
В-третьих: для теста сгенерируйте скрипт на share24 – он большой. Все ли из предоставленных строк кода так уж нам необходимы? – Не думаю.
Взвесив за и против, вы со мной согласить, что собственные кнопки поделиться подойдут вам намного лучше. Но, выбирая свой вариант, следует учесть, что поддержка и ответственность за его работу ляжет целиком на вас. URL по которому происходит репост хоть и меняется очень редко, но все же меняется, и это приходится отслеживать.
Теперь перейдём к самому написанию скрипта, он будет делиться на три части: HTML, CSS и, собственно, сам код, написанный на JavaScript. Дополнительно я буду использоваться для удобства библиотеку jQuery.
Подключаем все необходимые файлы:
Теперь добавляем в файл share.js скрипт, он будет выглядеть таким образам:
Это объект с набором методов: twitter(), vk(), facebook(), data(), popup(). Первые три метода непосредственно отвечают за процесс поделиться. Вначале идёт обращение к методу data(), где парсится значение атрибута data-share-data и возвращается json. Далее формируется URL c с учётом полученных данных и вызывается метод popup(). Он отвечает за создания нового окна одной из этих соцсетей.
Добавляем разметку на страницу:
Структура довольно простая, а именно обёртка с классом share, далее идёт div с атрибутом data-share-data, о котором было упомянута выше. Строка формируется из четырех параметров со своими значениями.
- url – адрес которым мы делимся;
- img – картинка, если она не нужна указываем пустую строку;
- title – заголовок страницы;
- text – нужное нам описание.
Внутри div лежат сами кнопки с навешенным на них событием onclick. По клику будет вызываться один из методов описанных выше.
Осталось только придать кнопкам человеческий вид и добавить CSS:
В итоге после добавления CSS кнопки получаться вида:
На этом написание скрипта законченно, в примере я использовал всего три социальных сети, если нужно подключить другие, то это не составит большого труда. Для этого потребуется добавить новый метод в объект share, не забывая прописать также дополнительно HTML и CSS. Ссылки, по которым происходит репост в соцсети можно получить двумя способами:
- Воспользоваться API социальной сети, что не всегда помогает;
- Выковырять у аналогичного сервиса, воспользовавшись firebugом или другим инструментом для веб-разработчика.
На этом я сегодня закончу, в одной из следующих статей допишем счетчик репостов для наших кнопок поделиться.
Читайте также: