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

wordpress кнопки социальных сетей

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

Навигация по странице:

  1. Полезное о соц. кнопках
  2. Кнопки социальных сетей на сайт wordpress
  3. Пошаговая настройка социальных сетей
  4. Социальные кнопки поделиться через шорткод WordPress
  5. Как вывести разные wordpress кнопки социальных сетей
  6. Кнопки соц сетей на произвольную страницу

Чем полезные социальные кнопки поделиться

  • Кнопки социальных сетей wordpress нужны вам для:

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

    Это далеко не полный список, кнопки социальных сетей на сайт wordpress также позволяют проводить раскрутку сайта (определенной тематики бесплатно или же с денежными средствами).

  • Cоц. кнопки поделиться позволяют пользователям

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

  • Социальные кнопки поделиться нужны при СЕО оптимизации для:

    • наращивания ссылочной массы сайта;
    • увеличения количества ссылок с реальными переходами;
    • улучшения поведенческих факторов с прямыми переходами.

к менюЯ довольно много использовал разных плагинов WordPress и сервисов по добавлению иконок социальных сетей на сайт, но все они хоть чем то, но мне не нравились. Для примера взять тот же сервис share.yandex, вроде уважающая себя организация, а заставить безглючно работать маленькие кнопочки не могут :-). Использование плагинов, тоже не вариант ведь грузят они сервер и страницы прилично. Недавно оптимизировал сайт на WP чтоб он меньше жрал ресурсов процессора и ничего не смог сделать пока не выключил все плагины и не начал искать негадяя, им оказался плагин для соц. кнопок и плагин для добавления блоков рекламы на сайт. Варианты с сервисами, которые предоставляют социальные кнопки поделиться вместе с рекламой своего ресурса тоже отпадают сразу, ну это как то не по человечески, - мы вам функцию, а вы нам ссылку на сайт - не сильно равный обмен, особенно если у вас довольно раскрученный проект. Ну да не будем о грустном, раз я пишу этот пост, значит у меня есть что вам предложить и посоветовать: сервис share42, о нем дальше и поговорим.

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

Share42 - это бесплатный сервис, который генерирует скрипт для добавления соц. кнопок на ваш сайт.

к менюСсылка на сервис: Получить ссылку на (share42).

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

Развернуть полное описание сервиса share42

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

  • Facebook;
  • Twitter;
  • Google Plus;
  • Вконтакте;
  • Однокласники;
  • Mail.Ru;
  • Livejournal;
  • FriendFeed;
  • Pinterest;
  • БобрДобр;
  • Мой Круг;
  • и многие другие.

 

Разные размеры кнопок социальных сетей

Сервис позволяет задавать разные размеры для соц. кнопок, вы можете указать:

  1. 32х32 px
  2. 24х24 px
  3. 16х16 px

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

 

Кодировка символов для соц. кнопок

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

  • UTF-8
  • Win-1251

 

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

Например код для вставки wordpress кнопки социальных сетей выглядит вот так:

<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>"></div>
<script type="text/javascript" src="http://Вашсайт/share42/share42.js"></script>

 

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

[свернуть]

 

Пошаговая настройка wordpress кнопки социальных сетей

к меню1. Заходим на сайт сервиса Получить ссылку на (share42).

2. Выбираем размер нужных нам соц. кнопок для wordpress:социальные кнопки поделиться

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

4. Указываем вариант отображения кнопок. Тут доступные варианты "горизонтальная" как у меня на сайте и "вертикальная плавающая" - это когда соц. кнопки размещены справа или слева окна браузера и постоянно доступные при прокрутке.

добавить кнопки социальных сетейили же вот так:knopki-socialnyx-setej-6

5. Отрываем страницу просмотра того что у нас получилось: knopki-socialnyx-setej-3и если все нормально скачаваем код себе на ПК по ссылке рядом.

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

Вывести социальные кнопки поделиться через шорткод WordPress

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

7. Сделав п. 6 не спешите выводить код у себя на сайте, вам нужно открыть header.php вашей темы и вставить туда подключение скрипта

<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/share42/share42.js"></script>
без вызова блока. Сохраняем.

8. Далее вам нужно открыть файл темы functions.php и в самое начало закинуть вот это создание шорткода:

<?php function icosoc(){
$rty='<div class="share42init" data-url="'.get_permalink().'" data-title="'.get_the_title().'" data-path="'.get_bloginfo( 'stylesheet_directory' ).'/share42/"></div>';
return $rty;
}
add_shortcode( 'icosoc', 'icosoc'); ?>

!!! Важно: файлы скачанные с share42 я закачал в папку темы, в папку с именем share42 о чем и говорит этот путь get_bloginfo( 'stylesheet_directory' ).'/share42/ !!!

9. Шорткод для вывода социальных кнопок в любом месте готов, для его вызова вставте код [icosoc] себе в пост.

 

Как вывести разные wordpress кнопки социальных сетей на одном сайте

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

1. Открываем папку share42_2, находим там файл "share42.js" и открываем его в любом текстовом редакторе

wordpress кнопки социальных сетейнас интересует 2 строчка, а именно вот этот текст: div.share42init

Нужно его аккуратно заменить на: div.share42init2

2. Закачиваем обе папки на сервер, в корень вашей темы.

3. Подключаем в файле header.php оба файла:

<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/share42_1/share42.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/share42_2/share42.js"></script>

4. Делаем 2 разных шорткода для вызова социальных кнопок поделиться и закидываем их в functions.php вашей темы:

<?php function icosoc(){
$rty='<div class="share42init" data-url="'.get_permalink().'" data-title="'.get_the_title().'" data-path="'.get_bloginfo( 'stylesheet_directory' ).'/share42_1/"></div>';
return $rty;
}
add_shortcode( 'icosoc', 'icosoc');

 function icosoc2(){
$rty='<div class="share42init2" data-url="'.get_permalink().'" data-title="'.get_the_title().'" data-path="'.get_bloginfo( 'stylesheet_directory' ).'/share42_2/"></div>';
return $rty;
}
add_shortcode( 'icosoc2', 'icosoc2'); ?>

!!! Обратите внимания я поменял пути к картинкам, а также клас для второго блока на share42init2 !!!

4. На этом все, теперь у нас есть два шорткода [icosoc] и [icosoc2] для вызова кнопок социальных сетей на сайте wordpress.

 

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

P.S. Совсем забыл, у всех сайтов WP по умолчанию подключена библиотека jQuery по этому подключать дополнительно нет надобности.

 

Все кнопки социальных сетей wordpress на главную страницу

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

<div class="share42init" data-url="'.get_permalink().'" data-title="'.get_the_title().'" data-path="<?php echo get_bloginfo( 'stylesheet_directory' );?>/share42/"></div>
заменить data-url и дата data-title.

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

<div class="share42init" data-url="https://help-wp.ru/" data-title="Помощь WP" data-path="<?php echo get_bloginfo( 'stylesheet_directory' );?>/share42/"></div>

Обратите внимание, я менял только data-url и дата data-title. В своем варианте data-path у вас может быть немного другой. Я задал путь универсально, вы можете прописать его прямой ссылкой. (хотя я не рекомендую это делать)

Еще из раздела СЕО предлагаю прочесть эти статьи:

Теперь вы знаете как добавить кнопки социальных сетей на сайт wordpress.

Комментарии к записи «Как добавить кнопки социальных сетей на сайт wordpress без плагина»:
  1. Наталья:

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

    • admin:

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

    • Наталья:

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

  2. Людмила:

    И еще. На сайте share42 говорится, чтобы проверить правильность указания пути файла, нужно нажать на ссылку и увидеть текст кода на странице.У меня так он и не вывелся. Только надпись, страница не найдена. Как быть в такой ситуации???

  3. Людмила:

    Добрый день! !!! Вы пишите Важно: файлы скачанные с share42 я закачал в папку темы, в папку с именем share42 о чем и говорит этот путь get_bloginfo( 'stylesheet_directory' ).'/share42/ !!!
    Если у меня папка с файлами лежит
    /site.ru/public_html/wp-content/themes/colormag
    как мне указать путь к файлу?

    • admin:

      Добрый день.
      get_bloginfo('stylesheet_directory') - это и есть путь к вашей теме, который заканчивается "colormag" только вы абсолютный путь вставили, а ВП сделает относительный типа вашдомен/wp-content/themes/colormag/ а далее нужно вставить название папки, где у вас лежат файлы скачанные с share42. Обычно папка так и называется, то есть у вас путь будет точно такой как и у меня, если вы эти файлы залили в тему.

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

  4. Алексей:

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

    • admin:

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

  5. Игорь:

    Я пользуюсь плагином соцзамка от Slocker для WordPress (-url-). Трафик вырос на глазах из Фейсбука. Реально очень много репостов.
    На первый сайт мне бесплатно помогли установить в службе поддержки, а на второй я уже поставил сам, оказалось очень просто.

  6. Виктор:

    Привет! Все сделал по инструкции - в записях шорткод отлично отображается, а на страницах не отображается - просто пустота (как будто там ничего нет...). В чем может быть проблема? Куда копать?

    • admin:

      Добрый день.
      Разницы между постом и страницей для этого шорткода - нет. Если шорткод работате у вас в записах типа post то должен работать и в page.
      В чем может быть проблема, трудно сказать 🙁 Нужно смотреть сайт.

  7. гость:

    Геморой.... Проще установить плагин и забыть о правках непонятных скриптов.

  8. Юрий:

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

    • admin:

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

  9. Николай:

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

  10. Владимир:

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

  11. Валентин:

    Тут кнопки социальных сетей (-spam-url) тоже без плагинов, всего пару строк

  12. Аэлита:

    Я так уже делала. к сожалению в сингл вообще всего две строчки
    <?php
    /**
    * The Template for displaying all single posts.
    *
    * @package Catch Themes
    * @subpackage Simple_Catch
    * @since Simple Catch 1.0
    */
    if( function_exists( 'simplecatch_content' ) ) simplecatch_content();
    И всё... куда ещё можно? Пробовала в контент но не очень понимаю куда именно.

    • admin:

      Нужно искать от куд берет вывод функция simplecatch_content.

      Единственный способ найти, это по очереди отключать все файлы темы, через фтп и проверять перестал работать сайт или нет.
      отключить любой файл можно переименовав его, например content-single.php в content-single.php-

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

      К сожалению больше ничего посоветовать не могу

  13. Аэлита:

    Добрый день Не могли бы вы сказать куда надо вставить код с сайта share42? Не очень понятно. У них сказано в шаблон вашего сайта, а куда именно? Тема simplecatch.

    • admin:

      Добрый день.
      Многое зависит от того какой код вы сгенерировали социальных сетей. Но стоить попробовать следующий вариант:
      находим файл single.php в теме и бросаем в любое место (только не первой строкой и не последней), а далее смотрите куда вам нужно его вставить или поднять или опустить потом по коду.

  14. Ирина:

    Привет у меня все получилось. WordPress кнопки социальных сетей работают.
    И код чистенький и без всяких там плагинов.
    Мне понравилось, можете сами посмотреть на сайте (-spam-url-)

Сделать заказ
Онлайн помощь по WordPress