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

Социальные сети – как двигатель прогресса.

Сегодня самыми популярными он-лайн ресурсами среди пользователей остаются социальные сети.
Вот такой вот кризис…
Всем желающим принять участие в сдвигании прогресса – кнопки социальных сетей для сайта без плагинов и без денег (бесплатно!)

Социальные сети - двигатель прогресса

Практически все ресурсы – Твиттер, Фейсбук, ВКонтакте («нравится/не нравится», «добавить»), Одноклассники, Гугл+1, и пр. социальные сети можно установить на свой сайт без применения плагинов – html-кодом и, как следствие – уменьшить время загрузки страниц сайта.

А плагины, если вы в курсе новостей, мы уже опробовали

 

 

 

Начнем сегодня с блока «Поделиться» от ресурса Яндекс

В конце статьи: видео — для тех, кто не понял установку по тексту и хороший подарок от Яндекса!

 
JavaScript-объект блока Ya.share, переходим по ссылке  ,открываем в новой вкладке.

Кнопки соц сетей для сайта без плагинов

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

Далее выбираем внешний вид блока – есть три варианта, нажимаем нужный:

  1. кнопка «Поделиться» и иконки;
  2. меню «Поделиться» и иконки;
  3. только иконки выбранных соц. сетей

Выбор внешнего вида блока кнопок

Обратите внимание – при выборе иконок и вариантов внешнего вида блока в коде html должны происходить изменения. Если этого не происходит – перезагрузите страницу!

И так – иконки и внешний вид блока выбраны

  • система выдает нам готовый html-код, который нам необходимо установить на свой сайт.

    С этим разобрались – оставляем вкладку с кодом и переходим в админ-панель своего сайта или копируем этот код и сохраняем его в любом текстовом документе (как вам удобнее).



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

  • заходим в админ-панель – дизайн — редактор
  • в правой колонке, список шаблонов, находим single.php (Single Post, Сообщение отдельно, Одиночная запись)

Если вы имеете дело с кодами шаблона впервые – совет:

Создайте на рабочем столе текстовый документ и скопируйте в него весь код файла single.php (не забываем сохранить) – это поможет восстановить сайт в случае некорректного редактирования кода.

  • заходим на вкладку, где у нас открыт наш код html выбранных кнопок (или вы его сохраняли) – выделяем, копируем и вставляем в код файла single.php – обычно до или после строки <?php the_content(); ?>
фрагмент кода single.php
фрагмент кода single.php
  • если в вашем шаблоне, в файле single.php (или в другом файле вывода одиночной записи) отсутствует строка <?php the_content(); ?> и вы плохо разбираетесь в кодах html — место для вставки кода кнопок можно найти методом проб

(смотрите видео)

  • обновляем файл single.php, заходим на любую статью сайта, смотрим что получилось

Мы разместили кнопки социальных сетей на «Записях» сайта,

для вывода кнопок на «Страницах» возвращаемся в админ-панель – дизайн — редактор

  • в правой колонке списка шаблонов, находим page.php (шаблон страницы) – копируем код на всякий случай в новый текстовый документ.
  • также находим в коде строку <?php the_content(); ?> и вставляем ранее упомянутый html-код

 
Analiz-saita
 

 

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

  1. Админ-панель, открываем вкладку «Виджеты», перетаскиваем в нужный сайдбар виджет «Текст» и в него копируем html-код соц. кнопок.
  2. Не забываем сохранить.

На этом все, следующий раз установим кнопку Гугл+1 также с помощью кодов — не пропустите

До встречи!


Если статья была интересна для вас - ей можно поделиться


Получать новые публикации по электронной почте:

 

89 мыслей о “Кнопки социальных сетей для сайта без плагинов”

    1. @Jazzmin, а у меня этот плагин стал барахлить. Отправлять отправляет, но без картинки. Хотя сами кнопки мне очень нравятся.
      Задумалась над размещением кнопок кодом. И сайту будет полегче: — 1 плагин.

  1. Честно говоря,я не понимаю, какой смысл в этих кнопках.Чем они хороши? И что практически происходит, если я нажимаю на кнопку «поделиться»? Как это влияет на мой сайт? Объясните бестолковой, пожалуйста.

  2. Меня зинтересовала статья. Поставила сайт в закладки. Буду ждать видео по установке кнопок соцсетей.

  3. И вновь Сегрей вы порадовали доходчивым уроком. Смотрела его и делала. Установила и очень рада. А то друзья заходят и спрашивают, как поделиться в контакте и одноклассниках. У меня строчки не было, и помог ваш видео урок. Спасибо. Вот мне с хлебными крошками надо теперь разобраться.

  4. Сережа! Огромная благодарность! Убрала эти громоздкие плагины и поставила блок кнопок. Красота!

  5. Помоги, пожалуйста! Я тоже решила взять скрипт от share42 , но вот ума не приложу, куда его ставить! Уже попробовала, кажется, после каждого кода поставить. Подскажите, куда нужно ставить, если код одиночной страницы (да и шаблона тоже) вот такой:

    1. @Лара, Ваш код в комментарий не прошел, я его НЕ вижу — пишите просто на почту — ser.bondin7@gmail.com (не оправляет — пришлите как текстовый документ, скопировав в него код)
      Вы сами пробовали ставить — какой результат?
      — не выводятся кнопки?
      — выводятся, но «криво»..?

  6. Спасибо,Сергей! Поставила, с Вашей помощью, кнопки на свой блог. =) Одно смущает — уж больно мелкие значки…=(

  7. Здравствуйте Сергей. Поставила я пока одну кнопку закладки, думаю временно, нет сил пока на другую кнопку. и поставила плагин google+, но эта кнопка появляется вначале статьи, а нужно, чтобы она была рядом с кнопкой закладки в конце статьи. Как ее поставить рядом с кнопкой закладки?
    А плагин OK2 я вообще в плагинах на word press не нахожу.

    1. @Татьяна, здравствуйте!
      Плагин ok2 можно скачать вместе с другими здесь — в конце статьи.
      Кнопка Гугл+1 — плагином?
      Смотрите в его настройках — размещение кнопки на странице.
      У меня +1 установлена кодом

  8. Сергей! Спасибо за урок. А можно эти кнопки установить в шапке сайта? Или они делятся только записями?
    Мне просто посоветовали, что на сайте в шапке должны быть кнопки соц. сетей.

    1. @Ирина, попробовать можно — код и в виджетах ставится, и в шапке встанет
      Отправлять должен открытую статью, но нужно попробовать

  9. Добавила код, только кнопки маленькие, можно их как нибудь сделать на размер больше. Подписалась еще раз на новые статьи, на почту mail ничего не приходит.

    1. @Зема, кнопки, они такие у всех — в коде размера нет…
      Подписку видел, она подтверждена. Не приходят статьи? — наверное давно не писал ничего. Отвлекался на другой сайт.
      И проверяйте папку спам в почте

  10. Спасибо за отличную статью — именно то, что нужно было.
    Единственный момент — хотелось разместить кнопки в боковой панели, они не помещались в одной строке. Перенос на другую страницу происходит криво.
    Как разбить разбить код на 2 строки, чтобы перенос происходил в нужном месте?

  11. Доброго, Сергей! :)

    Благодарю за нужную и понятную статью, попробовал без всякого энтузиазма, (т.к. до этого несколько раз пытался)но, как не странно получилось! Ура!
    А можно как то перед «похожими записями» поставить, а то у меня после похожих записей?

    С уважением.

    1. @Юрий, шаблоны у всех разные…
      Пробуйте «методом тыка» — я показывал на видео — ставьте точки, выводите над похожими статьями. Но может и не получиться

  12. Удалила плагин, который начал у меня глючить на фейсбуке. Стала искать замену и наткнулась на вашу запись — спасибо! Помогли — все пока работает. Посмотрим, как дальше будет (ведь у меня Social Share Buttons тоже поначалу хорошо работал). Главный плюс — облегчение работы сайта, ИМХО.

  13. Спасибо. Пока поставила кнопки в виджеты. Но то же не плохо. У вас очень хороший сайт. С помощью ваших статей становиться намного понятнее.

  14. Сергей, пыталась несколько раз установить кнопки без плагина. Два раза сайт переставал работать. Хорошо, что есть копии на хостинге. Сложно оказалось. Но буду далее пытаться. Уж очень мне нравятся эти аккуратные кнопочки.Я только начала изучать html. Пока знаний не хватило. Заодно и слетел установленный FeedBurner. Все опыт, опыт…или, скорее его отсутствие.

    1. @Светлана, Вы видео до конца досмотрели?
      Там есть вариант размещения — «методом тыка…»

      1. Вот как раз метод тыка и не спас.
        На моем блоге какой-то совсем необычный Одиночный файл, где ничего подобного из Вашего видео нет.
        У меня получалось поставить кнопки и в верхнем сайдбаре и в нижнем. Где я только не размещала этот код. Пока чуть не разрушила все. Хорошо, что сохранилась на хостинге. Даже не обращалась к специалистам. Теперь все нужно переделывать, а времени у меня сейчас нет. Работа.
        Сергей, Вы — очень внимательный человек! Спасибо. Искреннее спасибо!

  15. Копки установил по вашей статье, спасибо! Но вот проблему свою не решил. Я совсем новичок в сайтостроении. У меня вопрос по поводу внешних ссылок с моего сайта на сервис закладок Bposter и на соц.кнопки. Social Butons у себя на сайте убрал. Кнопки поставил как у Вас рекомендуется, а внешние ссылки остались. Если понятно сформулировал вопрос и можете мне помочь- буду благодарен.

    1. @Владимир, у Вас кроме установленных — еще 5 кнопок соц. сетей + 1 ссылка Твиттер с летающего «пингвина» + 1 ссылка с RSS
      Вы разве не видите кнопки? — они под МЕТКАМИ

  16. Спасибо Сергей! Мне бы хотелось установить еще кнопку для Li.,но она есть только в Pluso. Надо тогда все эти кнопки переустановить вместо моих. Подскажите пож. стоит ли это делать…

    1. @Елена, переустановить кнопки или нет — это как Вы сами решите.
      Если кнопка Li нужна только для себя — отправлять анонсы — можно просто сделать закладку на компе и отправлять с нее

  17. Уважаемый Сергей! искренне благодарю вас за такую подробную инструкцию! все получилось легко и просто!!!

  18. Спасибо, я попробую.
    А то у меня плагин барахлит, устанавливаются только страшные кнопки, аккурантые не все работают.. такой бардак под статьями!!!!

  19. Кроме яндекса — надёжных плагинов соц закладок нету. Только с самих соц сетей. Недавно яндекс обнаружил, что сервис odnaknopka*ру перенаправляет посетителей каталога на их рекламную страницу — только если посетитель зашёл с мобильного интернета. Как назвать такой сервис соц кнопок?

  20. Сереж у меня еще одна проблемка есть. Мне очень нравятся кнопки от share.pluso — красивые и завоевывают популярность, очень удобные.Я поставила их себе, но почему то не работает кнопка одноклассников. Вернее она работает, но публикует не коротенький анонс в соц сетях, а то, что предлагает плагин похожих картинок с рецептами. Я не пойму почему. Поможешь разобраться, что нужно исправить.

    1. @Лариса, не работает одна кнопка — скорее всего ошибка плагина или несовместимость с чем-то.
      В одноклассниках то, что он пишет, можно удалить и написать свое?
      Если ничего нельзя — можно просто руками дать анонс в этой соц. сети

  21. У меня стоят некоторые кнопки на сайте, но я хочу поставить такие, как у Вас Гугл+1 — по такому типу, чтобы сразу возле каждой кнопки показывало и количество нажавших на неё людей. Это такие в статье или нет? И если нет, то не подскажете, где их взять?

    1. @Людмила, нет, это не Гугл+
      Кнопка Гугл+ устанавливается двумя кодами — основной (большой) и код самой кнопки (в то место, где она будет отображаться).

  22. Спасибо Сергей за информацию по установке.Пока поставила в виджет,работает ОТЛИЧНО!
    А вот с файлом пока не разобралась не могу найти у себя в файле single.php такую штучку как

  23. Социальная сеть в выплатами! Всего за регистрацию вы можете вывести 70 рублей сразу, после того как заполните свой профиль!
    Моментальные выплаты на вебмани и вконтакте(голосами)!

  24. Спасибо! Все получилось замечательно. Полезные знания на Вашем ресурсе.

  25. Здравствуйте! Установила кнопки соц сетей себе на сайт, но у меня не работает кнопка «отправить на email». После нажатия открывается пустая страница. В чем может быть проблема? Подскажите пожалуйста, я новичек в этом деле, хотя уже есть два сайта)

    1. @lika777, что-то я не вижу на вашем сайте кнопок соц. сетей…
      Там вообще пока ничего нет.

        1. @lika777, теперь вижу.
          Слишком страница длинная попалась.
          «отправить на email» — на компьютере должна быть установлена программа «Офис» со всеми ее разделами. При нажатии «отправить на e-mail» открывается программа почты «Microsoft Office Outlook» и выходит окно создания письма

          1. Спасибо. У меня только документы Word установлены на компе, полностью офис не устанавливала) А можно еще вопрос? У меня на втором сайте, если делаешь ссылку на email, то она не работает. Могу видео записать коротенькое, чтобы вы посмотрели. Может настройки в WordPress неправельные и RSS ленту установить не могу FeedBurner ошибку показывает, что не нашел на сайте feed-файл?

            1. @lika777, попробуйте временно сменить шаблон — если все заработает — дело в шаблоне.
              А зачем Вам проблемный шаблон — меняйте его.

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

                1. @lika777, ну, а что я могу сказать, глядя на сайт со стороны…?
                  Ремонтировать нужно его, но не по переписке же.

  26. Сергей,спасибо за подробную статью и видео,установила кнопки соц.сетей кодом,все получилось.

  27. Спасибо, нашла много полезного для себя, всё очень просто и доступно описано! Страницу добавила в закладки.

  28. Не понимаю, в чём причина…работают все кнопки, кроме одноклассников. При попытке поделиться в Одноклассниках, запрашивает логин и пароль, после ввода зависает. Если предварительно войти в Одн-ки, то со страницы выходит и опять запрашивает пароль… Можно как-то это исправить? Спасибо.

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

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

      1. Сергей, спасибо за помощь! Вчера уже все эти методы пробовала, к сожалению, не помогло…Правда, на тестовом сайте, какое-то время кнопка работала нормально, уже не знаю, в какую сторону копать)))

        1. У меня на одном поддомене стоит этот скрипт — проверил — работает.
          Возможно на вашем сайте он с чем-то не дружит.
          Поищите другие скрипты кнопок соц сетей

  29. Спасибо за статью. У меня очень быстро все кнопочки установились на одном из сайтов. Впервые я исправила что-то в коде, думала, что не получится. Однако!
    Все получилось. Поделилась вашей статьей с друзьями!

  30. Здравствуйте! Дошел до середины статьи и обнаружил, что требуется какой-то файл single.php. Где его взять. Я сам делал сайт и такого файла у меня нет. Или вы пишите для wordpress?

    1. Да, разговор о сайте на WordPress
      Найдите у себя код отвечающий за вывод одиночной записи (страницы) — туда и ставим кнопки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *